html 贪吃蛇代码

贪吃蛇是一个经典的游戏，这篇文章将介绍如何使用HTML来编写它的代码。

!DOCTYPE html>
    html>
    head>
    title>
    贪吃蛇游戏/title>
    style>
/* 设置画布大小 */canvas {
    width: 600px;
    height: 400px;
}
    /style>
    /head>
    body>
    canvas id="snake-board">
    /canvas>
    script>
    // 获取画布对象var canvas = document.getElementById("snake-board");
    var ctx = canvas.getContext("2d");
// 设置初始变量var snake = [{
x:10, y:10}
, {
x:9, y:10}
, {
x:8, y:10}
    ];
    var direction = "right";
    var food = generateFood();
// 循环绘制蛇和食物setInterval(function() {
    draw();
    move();
}
    , 100);
// 绘制蛇和食物function draw() {
    // 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制食物ctx.fillStyle = "red";
    ctx.fillRect(food.x*20, food.y*20, 20, 20);
    // 绘制蛇ctx.fillStyle = "green";
    for (var i=0;
     isnake.length;
 i++) {
    ctx.fillRect(snake[i].x*20, snake[i].y*20, 20, 20);
}
}
// 移动蛇function move() {
// 头部移动var head = {
x:snake[0].x, y:snake[0].y}
    ;
switch(direction) {
    case "up": head.y -= 1;
     break;
    case "down": head.y += 1;
     break;
    case "left": head.x -= 1;
     break;
    case "right": head.x += 1;
     break;
}
    // 判断是否吃到食物if (head.x == food.x &
    &
 head.y == food.y) {
    snake.unshift(head);
    food = generateFood();
}
 else {
    // 删除尾部snake.pop();
    // 添加头部snake.unshift(head);
}
}
// 随机生成食物function generateFood() {
    var x = Math.floor(Math.random()*30);
    var y = Math.floor(Math.random()*20);
return {
x:x, y:y}
    ;
}
// 监听键盘事件document.addEventListener("keydown", function(event) {
switch(event.keyCode) {
    case 37: direction = "left";
     break;
    case 38: direction = "up";
     break;
    case 39: direction = "right";
     break;
    case 40: direction = "down";
     break;
}
}
    );
    /script>
    /body>
    /html>
    

以上代码使用HTML来设置画布大小、绘制蛇和食物、监听键盘事件等。通过JavaScript来控制贪吃蛇的移动，实现了一个简单的贪吃蛇游戏。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！