我正在使用HTML和JavaScript制作简单的侧滚动游戏，其中玩家从平台跳到平台。
我的问题是，我将使用什么命令来制作播放器＆＃34; die＆＃34;或者去＃34;游戏结束＆＃34;当玩家错过一个平台并点击屏幕底部时屏幕？如果您不了解我，可以在此处链接游戏：
https://output.jsbin.com/mevari
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
canvas {
display: block;
margin: 0 auto;
box-shadow: 0px 0px 20px #3399FF;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("c");
canvas.width = 1024, canvas.height = 640;
var context = canvas.getContext("2d");
var menu = true;
var background = {
width: 0,
height: 0,
x: 472,
//x: -8000
};
var player = {
width: 30,
height: 30,
x: canvas.width / 2 - 15,
y: 10,
velx: 0,
vely: 0,
speed: 4,
friction: 0.8,
gravity: 0.3,
jumping: false
};
var player_stats = {
lvl: 1
};
var starting_pos = {
x: player.x,
y: player.y
};
var keys = [];
window.addEventListener("keydown", function (e) {
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
}, false);
function platform(x, y) {
var platform = {
x: x,
y: y,
width: 100,
height: 30
};
background.width = platform.x + platform.width;
context.fillStyle = "#FFFFFF";
context.fillRect(platform.x, platform.y, platform.width, platform.height);
if (player.y + player.height > platform.y && player.y + player.height < platform.y + platform.height && player.x + player.width > platform.x && player.x < platform.x + platform.width) {
player.jumping = false;
player.vely = 0;
player.y = platform.y - player.height;
}
if (player.x + player.width > platform.x && player.x + player.width < platform.x + platform.width / 2 && player.y + player.height > platform.y && player.y < platform.y + platform.height) {
player.x = platform.x - player.width;
player.jumping = true;
}
if (player.x < platform.x + platform.width && player.x > platform.x + platform.width / 2 && player.y + player.height > platform.y && player.y < platform.y + platform.height) {
player.x = platform.x + platform.width;
player.jumping = true;
}
}
function update() {
if (menu) {
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#3399FF";
context.textAlign = "center";
context.font = "120px Arial";
context.fillText("Lord Hero", canvas.width / 2, canvas.height / 4);
context.font = "30px Arial";
context.fillText("Press Enter to play", canvas.width / 2, canvas.height / 1.5);
if (keys[13] && menu) {
menu = !menu;
}
} else if (!menu) {
if (keys[38] && !menu) {
if (!player.jumping) {
player.jumping = true;
player.vely = -player.speed * 2;
}
}
if (keys[39] && !menu) {
if (player.velx < player.speed) {
player.velx--;
}
}
if (keys[37] && !menu) {
if (player.velx > -player.speed) {
player.velx++;
}
}
if (player.y > canvas.height) {
player.x = starting_pos.x;
player.y = starting_pos.y;
player.velx = 0;
player.vely = 0;
}
player.velx *= player.friction;
player.vely += player.gravity;
background.x += player.velx;
player.y += player.vely;
context.fillStyle = "#3399FF";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#FFFFFF";
context.fillRect(player.x, player.y, player.width, player.height);
// Platform width: 100 height: 30
platform(background.x + 25, 100);
platform(background.x + 125, 100);
platform(background.x + 225, 130);
platform(background.x + 425, 240);
platform(background.x + 630, 180);
platform(background.x + 850, 125);
platform(background.x + 1050, 360);
platform(background.x + 1250, 265);
platform(background.x + 1490, 205);
platform(background.x + 1770, 130);
platform(background.x + 2050, 240);
platform(background.x + 2420, 340);
platform(background.x + 2790, 450);
platform(background.x + 3050, 360);
platform(background.x + 3300, 265);
platform(background.x + 3555, 190);
platform(background.x + 3810, 100);
platform(background.x + 4170, 250);
platform(background.x + 4570, 430);
platform(background.x + 4810, 330);
platform(background.x + 5150, 330);
platform(background.x + 5490, 330);
platform(background.x + 5750, 240);
platform(background.x + 6010, 145);
platform(background.x + 6480, 550);
platform(background.x + 6940, 330);
platform(background.x + 7200, 230);
platform(background.x + 7450, 130);
platform(background.x + 7810, 130);
platform(background.x + 8220, 330);
platform(background.x + 8650, 595);
platform(background.x + 8890, 485);
platform(background.x + 9240, 485);
platform(background.x + 9570, 485);
platform(background.x + 9850, 390);
platform(background.x + 10120, 290);
platform(background.x + 10350, 180);
platform(background.x + 10790, 450);
platform(background.x + 11050, 360);
platform(background.x + 11300, 265);
platform(background.x + 11555, 190);
platform(background.x + 11810, 100);
platform(background.x + 12170, 250);
platform(background.x + 12570, 430);
platform(background.x + 12810, 330);
platform(background.x + 13150, 330);
platform(background.x + 13490, 330);
platform(background.x + 13750, 240);
platform(background.x + 14010, 145);
platform(background.x + 14480, 550);
platform(background.x + 14700, 440);
platform(background.x + 14940, 330);
platform(background.x + 15200, 230);
platform(background.x + 15450, 130);
platform(background.x + 15810, 130);
platform(background.x + 16220, 330);
platform(background.x + 16650, 595);
platform(background.x + 16890, 485);
platform(background.x + 17240, 485);
platform(background.x + 17570, 485);
platform(background.x + 17850, 390);
platform(background.x + 18120, 290);
platform(background.x + 18350, 180);
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
</body>
</html>