Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   JavaScript + HTML #2 Подробнее внутри (https://javascript.ru/forum/xhtml-html-css/85436-javascript-html-2-podrobnee-vnutri.html)

SashaJava 23.08.2023 01:47

JavaScript + HTML #2 Подробнее внутри
 
Создаю копию игры Flappy Bird но в браузере

Написал код в Visual Studio

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeUp = new Image();
var pipeBottom = new Image();

bird.src = "img/bird.png"
bg.src = "img/bg.png"
fg.src = "img/fg.png"
pipeUp.src = "img/pipeUp.png"
pipeBottom.src = "img/pipeBottom.png"

var gap = 90;

//При нажатии на какую-либо кнопку
document.addEventListener("keydown", moveUp);

function moveUp() {
    yPos -= 25;
}

//Создание блоков
var pipe = [];

pipe[0] = {
    x : cvs.width,
    y : 0
}

// Позиция птички
var xPos = 10;
var yPos = 150;
var grav = 1.5;

function draw() {
    ctx.drawImage(bg, 0, 0); 

    for(var i = 0; i <pipe.length; i++) {
        ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
        ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);

        pipe[i].x--;

        if(pipe[i].x == 125) {
            pipe.push({
                x : cvs.width,
                y : Math.floor(Math.random() * pipeUp.height) - 
                pipeUp.height
            });
        

            if(xPos + bird.width >= pipe[i].x
                && xPos <= pipe[i].x + pipeUp.width
                && (yPos <= pipe[i].y + pipeUp.height
                || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) {
                location.reload(); // Перезагрузка страницы
                }
        }
    }
    

    ctx.drawImage(fg, 0, cvs.height - fg.height);
    ctx.drawImage(bird, xPos, yPos);

    yPos += grav;
    requestAnimationFrame(draw)
}

pipeBottom.onload = draw;


Это весь код, но меня интересует то что написал функцию при столкновении с трубами, но она не работает.

if(pipe[i].x == 125) {
            pipe.push({
                x : cvs.width,
                y : Math.floor(Math.random() * pipeUp.height) - 
                pipeUp.height
            });
        

            if(xPos + bird.width >= pipe[i].x
                && xPos <= pipe[i].x + pipeUp.width
                && (yPos <= pipe[i].y + pipeUp.height
                || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) {
                location.reload(); // Перезагрузка страницы
                }
        }
    }


Как починить?

voraa 23.08.2023 08:33

А что именно не работает?
Слетает с ошибкой?
Не делает того (чего?), что должна делать?


Часовой пояс GMT +3, время: 08:17.