Неправильно срабатывает условие
Есть мини игра, в котором нужно ловить объекты, съедобные и не съедобные. Съедобные добавляют очков, несъедобные отнимаются соответсвенно.
Когда функция спавнит объект, случайным образов присваивает к переменной объекта enemy
значение true
или false
.
Далее условие проверяет эту переменную и в зависимости от значения, присваивает нужную картинку.
Но по какой-то причине, это условие отрабатывает неправильно.
Код на codepen.io
window.onload = function () {
Game()
}
function Game() {
let c = document.querySelector("canvas");
let canvas = document.querySelector("canvas");
c.width = innerWidth;
c.height = innerHeight;
c = c.getContext("2d");
function startGame() {
mouse = {
x: innerWidth / 2,
y: innerHeight - 33
};
touch = {
x: innerWidth / 2,
y: innerHeight - 33
};
canvas.addEventListener("mousemove", function (event) {
mouse.x = event.clientX;
});
canvas.addEventListener("touchmove", function (event) {
let rect = canvas.getBoundingClientRect();
let root = document.documentElement;
let touch = event.changedTouches[0];
let touchX = parseInt(touch.clientX);
event.preventDefault();
mouse.x = touchX;
});
let player_width = 160;
let player_height = 90;
let playerImg = new Image();
let score = 0;
playerImg.src = "https://arteildev.github.io/game/img/player.svg";
let _foods = [];
let food_width = 64;
let food_height = 64;
function Player(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.draw = function () {
c.beginPath();
c.drawImage(playerImg, mouse.x - player_width, mouse.y - player_height);
this.x = mouse.x - player_width
};
this.update = function () {
this.draw();
};
}
function Food(x, y, width, height, speed, enemy) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speed = speed;
this.enemy = enemy
let foodImg = new Image();
let foodimages = [
"https://arteildev.github.io/game/img/food-1.png",
"https://arteildev.github.io/game/img/food-2.png",
"https://arteildev.github.io/game/img/food-3.png",
"https://arteildev.github.io/game/img/food-4.png",
"https://arteildev.github.io/game/img/food-5.png",
"https://arteildev.github.io/game/img/food-6.png"
]
let enemyImages = [
"https://arteildev.github.io/game/img/enemy-1.png",
"https://arteildev.github.io/game/img/enemy-2.png",
"https://arteildev.github.io/game/img/enemy-3.png",
"https://arteildev.github.io/game/img/enemy-4.png",
"https://arteildev.github.io/game/img/enemy-5.png"
]
if(!enemy) {
foodImg.src = foodimages[Math.floor(Math.random() * foodimages.length)]
} else {
foodImg.src = enemyImages[Math.floor(Math.random() * enemyImages.length)]
}
this.draw = function () {
c.beginPath();
c.drawImage(foodImg, this.x, this.y);
};
this.update = function () {
this.y += this.speed;
this.draw();
};
}
let __player = new Player(mouse.x, mouse.y, player_width, player_height);
function drawFoods() {
for (let _ = 0; _ < 1; _++) {
let x = Math.random() * (innerWidth - food_width);
let y = -food_height;
let width = food_width;
let height = food_height;
let speed = Math.random() * 5;
let enemy = Math.random() < .5;
let __food = new Food(x, y, width, height, speed, enemy);
_foods.push(__food);
}
} setInterval(drawFoods, 1000);
function collision(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y-90;
}
c.font = "1em Arial";
function stoperror() {
return true;
}
window.onerror = stoperror;
function animate() {
requestAnimationFrame(animate);
c.beginPath();
c.clearRect(0, 0, innerWidth, innerHeight);
c.fillStyle = 'black';
c.fillText("Score: " + score, innerWidth - 100, 20);
__player.update();
for (let k = 0; k < _foods.length; k++) {
_foods[k].update();
}
for (let j = _foods.length - 1; j >= 0; j--) {
if (collision(_foods[j], __player)) {
_foods.splice(j, 1);
console.log(_foods[j]);
if(!_foods[j].enemy) {
score++;
} else {
score--;
}
}
}
}
animate();
} startGame();
};