今天我們來分享一款用HTML5制作的簡單小游戲——人走懸崖。這款小游戲不僅能提高你的反應能力，還能磨練你的耐心?，F在就讓我們一起來看看它的代碼吧！
<html>
<head>
<title>人走懸崖</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
//獲取canvas元素
var canvas = document.getElementById("canvas");
//設置上下文類型
var context = canvas.getContext("2d");
//定義小人的初始位置
var x = 250;
var y = 450;
//定義小人移動的速度
var speed = 3;
//定義懸崖的初始高度
var cliff = 100;
//定義懸崖移動的速度
var cliffSpeed = 2;
//定義游戲是否結束的變量
var gameover = false;
//繪制小人
function drawPlayer(x, y) {
context.beginPath();
context.fillStyle = "red";
context.arc(x, y, 10, 0, Math.PI * 2);
context.fill();
context.closePath();
}
//繪制懸崖
function drawCliff(cliff) {
context.beginPath();
context.fillStyle = "black";
context.fillRect(0, cliff, canvas.width, canvas.height - cliff);
context.closePath();
}
//監聽鍵盤事件，控制小人移動
document.onkeydown = function (event) {
if (gameover) {
return;
}
if (event.keyCode == 37) {
x -= speed;
if (x< 10) {
x = 10;
}
} else if (event.keyCode == 39) {
x += speed;
if (x >canvas.width - 10) {
x = canvas.width - 10;
}
}
}
//游戲循環函數
function loop() {
if (gameover) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
//繪制小人
drawPlayer(x, y);
//繪制懸崖
drawCliff(cliff);
//判斷小人是否掉進懸崖里
if (y - 10< cliff) {
gameover = true;
alert("游戲結束！");
}
//移動懸崖
cliff += cliffSpeed;
if (cliff >canvas.height) {
cliff = 0;
}
//控制小人和懸崖的速度
setTimeout(loop, 30);
}
//開始游戲
loop();
</script>
</body>
</html>以上就是這款人走懸崖小游戲的所有代碼了。如果你喜歡這款小游戲，也可以試著修改其中的一些代碼，比如小人的顏色、懸崖的高度和速度等，讓它變得更有趣。
上一篇html5人臉識別代碼
下一篇顯示滾動條css樣式