HTML5是一個(gè)重要的前端開發(fā)語言，實(shí)現(xiàn)了許多有趣的應(yīng)用。其中，貪吃蛇游戲是最經(jīng)典的應(yīng)用之一。下面是一個(gè)簡短版本的HTML5貪吃蛇游戲代碼：
<html>
<head>
<title>貪吃蛇</title>
<style>
#canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 創(chuàng)建畫布和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 設(shè)定初始狀態(tài)
var snake = [{x: 100, y: 100}];
var direction = 'right';
var food = {x: Math.floor(Math.random() * 400), y: Math.floor(Math.random() * 400)};
var score = 0;
// 繪制蛇和食物
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#00a';
for (var i = 0; i < snake.length; i++) {
ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
}
ctx.fillStyle = '#f00';
ctx.fillRect(food.x, food.y, 10, 10);
ctx.fillStyle = '#000';
ctx.fillText('Score: ' + score, 10, 20);
}
// 更新狀態(tài)
function update() {
// 移動(dòng)蛇
var head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case 'right': head.x += 10; break;
case 'left': head.x -= 10; break;
case 'up': head.y -= 10; break;
case 'down': head.y += 10; break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) { // 吃到食物
food = {x: Math.floor(Math.random() * 400), y: Math.floor(Math.random() * 400)};
score += 10;
} else { // 沒有吃到食物
snake.pop();
}
// 是否碰到邊界
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
clearInterval(intervalId);
alert('Game Over, Your Score is ' + score);
}
// 是否撞到自己的身體
for (var i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
clearInterval(intervalId);
alert('Game Over, Your Score is ' + score);
break;
}
}
}
// 處理鍵盤事件
function handleKeyDown(event) {
switch (event.keyCode) {
case 37: // left
if (direction !== 'right') {
direction = 'left';
}
break;
case 38: // up
if (direction !== 'down') {
direction = 'up';
}
break;
case 39: // right
if (direction !== 'left') {
direction = 'right';
}
break;
case 40: // down
if (direction !== 'up') {
direction = 'down';
}
break;
}
}
// 設(shè)置游戲循環(huán)
var intervalId = setInterval(function() {
update();
draw();
}, 100);
// 綁定鍵盤事件
document.addEventListener('keydown', handleKeyDown, false);
</script>
</body>
</html>以上代碼定義了一個(gè) HTML 頁面，其中包含了一個(gè)畫布，一個(gè) JavaScript 腳本，以及對應(yīng)的 CSS 樣式。JavaScript 腳本包含了繪制貪吃蛇、更新狀態(tài)、處理鍵盤事件等功能。代碼使用了許多 JavaScript 基本語法和 HTML5 中的 canvas 標(biāo)簽，非常適合入門級別的前端開發(fā)人員學(xué)習(xí)掌握。