1

Решил попрактиковаться в написании небольшой игрушки на 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);


2
  • отпускаете кнопку прыжка - jump = false, соответственно функция jump не вызывается
    – user355286
    6 мая 2020 в 9:49
  • Спасибо, это помогло. Это было глупое упущение с моей стороны)) 6 мая 2020 в 14:12

1 ответ 1

2

Спасибо hu-fo, ошибка действительно заключалось в этом:

отпускаете кнопку прыжка - jump = false, соответственно функция jump не вызывается

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.