Решил попрактиковаться в написании небольшой игрушки на JS (canvas), но вот проблема: при вызове прыжка игрок проходит лишь часть траектории и зависает в полете, при зажатии клавиши все работает и игрок проходит по заданному пути. С чем это может быть связано?
'use strict';
//Canvas
let cvs = document.getElementById('canvas');
let ctx = cvs.getContext('2d');
//Height of window
let w = window.innerWidth -10;
let h = window.innerHeight -10;
cvs.width = w;
cvs.height = h;
//directions
let left = false;
let right = false;
let jump = false;
//blocks settings
let blockSize = 10;
let WorldGrowHeight = ~~(h/2/blockSize);
let WorldSize = 500;
let blockBorder = 0;
let WorldDepth = ~~(h /2/ blockSize) + blockSize;
let GameMap = [];
//user setttings
let userWidth = 25;
let userHeght = 50;
let userColor = "#ff0000";
let userPosX = w/2;
let userPosY = ~~(h/2.348);
let jumpCount = 0;
let jumpLength = 40;
let jumpHeight = 0;
//create game map
for (let y=WorldGrowHeight; y<=WorldDepth+WorldGrowHeight; y++) {
for (let x = 0; x < WorldSize; x++) {
let block = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
GameMap.push({x, y, type: block});
}
}
//create user
let user = {
width : userWidth,
height : userHeght,
posX : userPosX,
posY: userPosY,
color: userColor,
image: function () {
ctx.beginPath();
ctx.fillStyle = "#FF0000";
ctx.rect(this.posX, this.posY-jumpHeight, this.width, this.height);
ctx.fill();
ctx.closePath();
},
jump : function () {
jumpCount++;
jumpHeight = 4 * jumpLength * Math.sin(Math.PI * jumpCount / jumpLength);
if (jumpCount > jumpLength) {
jumpHeight = 0;
jump = false;
jumpCount = 0;
}
},
update : function () {
this.image();
if (jump) {
this.jump();
}
}
}
//Events
document.addEventListener('keydown', handlerUp, false);
document.addEventListener('keyup', handlerDown, false);
//Events Handlers
function handlerUp(e) {
if (e.keyCode === 37) left = true;
if (e.keyCode === 38) jump = true;
if (e.keyCode === 39) right = true;
}
function handlerDown(e) {
if (e.keyCode === 37) left = false;
if (e.keyCode === 38) jump = false;
if (e.keyCode === 39) right = false;
};
//Draw blocks by map
function drawMap() {
GameMap.forEach(block => {
switch (block.type) {
case 1:
ctx.fillStyle = "#2d190d";
ctx.fillRect(block.x * (blockSize + blockBorder), block.y * (blockSize + blockBorder), blockSize, blockSize);
break;
case 2:
ctx.fillStyle = "#1a2ebd";
ctx.fillRect(block.x * (blockSize + blockBorder), block.y * (blockSize + blockBorder), blockSize, blockSize);
break;
case 3:
ctx.fillStyle = "#2cbd19";
ctx.fillRect(block.x * (blockSize + blockBorder), block.y * (blockSize + blockBorder), blockSize, blockSize);
break;
}
});
}
//Update display
function update() {
ctx.clearRect(0,0, w, h);
drawMap();
user.update();
}
//Frame Rate
setInterval(update, 1000/60);
console.log(GameMap);
jump = false
, соответственно функцияjump
не вызывается