Как использовать холст в коде JavaScript Flappy Bird ⇐ Html

[Anonymous]

У меня есть работающий код Flappy Bird, но мне сказали использовать Canvas. Я пытался прочитать другие коды Flappy Bird, но они сильно отличались от моих, поэтому каждый раз, когда я пытался применять их коды, это не сработало. Как я могу изменить свой код, чтобы JS содержит сборку Canvas, а затем я могу назвать игру на Canvas в HTML? PrettyPrint-Override ">

Код: Выделить всё

var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var speed;
var score;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;

function load() {
bird = document.getElementById("bird")
poles = document.querySelectorAll(".pole")
pole1 = document.getElementById("pole-1")
pole2 = document.getElementById("pole-2")
scoreSpan = document.getElementById("score")
speedSpan = document.getElementById("speed")
gameArea = document.getElementById("game-area");
restartBtn = document.getElementById("restart-btn");
containerWidth = gameArea.clientWidth;
containerHeight = gameArea.clientHeight;

gameArea.addEventListener("mousedown", function (e) {
if (playing) {
flapping = true;
}
});

gameArea.addEventListener("mouseup", function (e) {
if (playing) {
flapping = false;
}
});
}

function restart() {
restartBtn.removeEventListener('click', restart);
speed = 2;
score = 0;
scoreUpdated = false;
flapping = false;
playing = true;
speedSpan.textContent = speed;
scoreSpan.textContent = score;
poles.forEach((pole) => {
pole.style.right = 0;
});
bird.style.top = 20 + "%";
gameLoop();
}

function update() {

var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));

if (polesCurrentPos > containerWidth * 0.85) {
if (!scoreUpdated) {
score += 1;
scoreUpdated = true;
}
scoreSpan.textContent = score;
}

if (polesCurrentPos > containerWidth) {

var newHeight = parseInt(Math.random() * 100);
pole1.style.height = 100 + newHeight + "px";
pole2.style.height = 100 - newHeight + "px";

polesCurrentPos = 0;

speed += 0.25;
speedSpan.textContent = parseInt(speed);
scoreUpdated = false;
}

poles.forEach((pole) => {
pole.style.right = polesCurrentPos + speed + "px";
});

let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));
if (flapping) {
bird.style.top = birdTop + -2 + "px";
} else if (birdTop < containerHeight - bird.clientHeight) {
bird.style.top = birdTop + 2 + "px";
}

if (collision(bird, pole1) || collision(bird, pole2) || birdTop  containerHeight - bird.clientHeight) {
gameOver();
}
}

function gameOver() {
window.console.log("game over");
playing = false;
restartBtn.addEventListener('click', restart);
}

function gameLoop() {
update();
if (playing) {
requestAnimationFrame(gameLoop);
}
}

function collision(gameDiv1, gameDiv2) {
let left1 = gameDiv1.getBoundingClientRect().left;
let top1 = gameDiv1.getBoundingClientRect().top;
let height1 = gameDiv1.clientHeight;
let width1 = gameDiv1.clientWidth;

let bottom1 = top1 + height1;
let right1 = left1 + width1;
let left2 = gameDiv2.getBoundingClientRect().left;
let top2 = gameDiv2.getBoundingClientRect().top;
let height2 = gameDiv2.clientHeight;
let width2 = gameDiv2.clientWidth;
let bottom2 = top2 + height2;
let right2 = left2 + width2;

if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
return false;
return true;
}

document.addEventListener("keydown", function (e) {
var key = e.key;
if (key === " " && playing) {
flapping = true;
}
});

document.addEventListener("keyup", function (e) {
e.preventDefault();
var key = e.key;
if (key === " " && playing) {
flapping = false;
}
});

load();
restart();  < /code>
#game {
font-family: David, cursive, sans-serif;
text-align: center;
}

#instructions {
text-align: center;
}

#game-area {
margin: auto;
position: relative;
width: 400px;
height: 300px;
border: 2px solid green;
background-color: deepskyblue;
overflow: hidden;
}

#bird {
position: absolute;
background: url('https://usercontent.one/wp/compucademy.net/wp-content/uploads/2020/11/robbybird.png');
height: 27px;
width: 42px;
background-size: contain;
background-repeat: no-repeat;
top: 20%;
left: 15%;
}

.pole {
position: absolute;
height: 100px;
width: 30px;
background-color: green;
right: 0px;
}

#pole-1 {
top: 0;
}

#pole-2 {
bottom: 0;
}

#game-info {
margin: 5px;
font-size: 18px;
}

#game-info p {
display: inline;
padding: 20px;
}

#restart-btn {
padding: 5px 10px;
background-color: green;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
outline: none;
}< /code>




Stav Levy - Flappy Bird










Score:0
Restart
Speed:2

Подробнее здесь: https://stackoverflow.com/questions/677 ... -bird-code