andras/avoid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: andras:c34177b21653c170b78f0aec9b9d2dcca39f163f
Branches Tags
andras:main
..
compare: andras:265bde56b403a374449fdc8ba4db2351acaffda1
Branches Tags
andras:main

No commits in common. "c34177b21653c170b78f0aec9b9d2dcca39f163f" and "265bde56b403a374449fdc8ba4db2351acaffda1" have entirely different histories.
c34177b216 ... 265bde56b4

5 changed files with 26 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="hu">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -9,7 +9,7 @@
<meta name="theme-color" content="#A5402D" />
<link
href="https://fonts.googleapis.com/css?family=Raleway&display=swap"
href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/main.css" />
@ -21,10 +21,9 @@
<div id="startText">
<h1>Avoid</h1>
<p>
A relentless swarm is closing in on you. Guide your light across
the screen with your cursor (or finger), stay out of reach, and
outsmart your pursuers by luring them into crashing into one
another. How long can you survive?
the red balls by moving your cursor (or finger) on the screen. Try
eliminating the enemy balls by getting them to collide with each
other. Good luck!
</p>
</div>
<div id="endText">

8
js/CanvasHandler.js
View file

@ -38,14 +38,6 @@ class CanvasHandler {
return unit * Math.sqrt(this.width * this.height);
}
clientToCanvas(clientX, clientY) {
const rect = this.canvas.getBoundingClientRect();
return [
((clientX - rect.left) / rect.width) * this.width,
((clientY - rect.top) / rect.height) * this.height,
];
}
get width() {
return this.canvas.width / window.devicePixelRatio;
}

18
js/InputHandler.js
View file

@ -1,18 +1,14 @@
class InputHandler {
constructor(canvasHandler) {
const elem = canvasHandler.canvas;
constructor(idOfWatchedArea) {
const elem = document.getElementById(idOfWatchedArea);
const handleMouse = ({ clientX, clientY }) =>
this.setPointerPosition(canvasHandler.clientToCanvas(clientX, clientY));
const handleTouch = (event) => {
event.preventDefault();
const { clientX, clientY } = event.touches[0];
this.setPointerPosition(canvasHandler.clientToCanvas(clientX, clientY));
};
const handleMouse = ({ offsetX, offsetY }) =>
this.setPointerPosition([offsetX, offsetY]);
const handleTouch = ({ touches }) =>
this.setPointerPosition([touches[0].clientX, touches[0].clientY]);
elem.addEventListener("mousemove", handleMouse);
elem.addEventListener("touchmove", handleTouch, { passive: false });
elem.addEventListener("touchmove", handleTouch);
this.pointerPosition = [0, 0];
}

44
js/main.js
View file

@ -1,8 +1,7 @@
const enemySpawnFrequencyPerSecond = 4.5;
const maxDeltaTimeInMs = 50;
const enemySpawnFrequency = 4.5;
const canvasHandler = new CanvasHandler("canvas");
const inputHandler = new InputHandler(canvasHandler);
const inputHandler = new InputHandler("canvas");
let game;
function newGame() {
@ -28,16 +27,11 @@ class Circle {
this.position = add(this.position, limit(deltaPosition, maxDistance));
}
}
draw(canvasHandler) {
canvasHandler.drawCircle(this.position, this.size, this.color);
}
isTouching(other) {
return (
magnitude(subtract(this.position, other.position)) <
this.size + other.size
);
return magnitude(subtract(this.position, other.position)) < 2 * this.size;
}
}
@ -52,8 +46,8 @@ class Game {
);
this.circleHolder = [this.player];
this.spawnInterval = 1000 / enemySpawnFrequencyPerSecond;
this.previousSpawn = this.previousTime = 0;
this.spawnInterval = 1000 / enemySpawnFrequency;
this.previousSpawn = this.previousTimestamp = 0;
this.score = 0;
this.menuBox = document.getElementById("menuBox").style;
@ -61,19 +55,16 @@ class Game {
"none";
this.isActive = true;
this.boundNextFrame = this.nextFrame.bind(this);
window.requestAnimationFrame(this.boundNextFrame);
window.requestAnimationFrame(this.nextFrame.bind(this));
}
nextFrame(timestamp) {
if (this.isActive) {
canvasHandler.fillCanvas("rgba(165, 64, 45, 0.1)");
this.spawnEnemyIfNeeded(timestamp);
this.moveCircles(timestamp);
window.requestAnimationFrame(this.boundNextFrame);
window.requestAnimationFrame(this.nextFrame.bind(this));
}
}
spawnEnemyIfNeeded(timestamp) {
if (timestamp - this.previousSpawn > this.spawnInterval) {
this.circleHolder.push(
@ -93,42 +84,31 @@ class Game {
this.score++;
}
}
moveCircles(timestamp) {
const deltaTime = this.getDeltaTime(timestamp);
const collided = new Set();
for (let i = 0; i < this.circleHolder.length; i++) {
this.circleHolder[i].move(deltaTime);
this.circleHolder[i].draw(canvasHandler);
for (let j = i + 1; j < this.circleHolder.length; j++) {
if (this.circleHolder[i].isTouching(this.circleHolder[j])) {
if (this.circleHolder[i] === this.player) {
this.showEndScreen();
return;
}
collided.add(i).add(j);
if (this.circleHolder[i] == this.player) this.showEndScreen();
else {
this.circleHolder.splice(i, 1);
this.circleHolder.splice(j - 1, 1);
}
}
}
if (collided.size > 0) {
this.circleHolder = this.circleHolder.filter(
(_, index) => !collided.has(index)
);
}
}
getDeltaTime(timestamp) {
const tempPreviousTime = this.previousTime;
this.previousTime = timestamp;
return Math.min(timestamp - tempPreviousTime, maxDeltaTimeInMs);
return timestamp - tempPreviousTime;
}
showEndScreen() {
document.getElementById("endText").style.display = "block";
document.getElementById("endScore").innerHTML = `Your score: ${this.score}`;
document.getElementById("startButton").textContent = "Play again";
this.menuBox.display = "flex";
this.isActive = false;
}