我们一起写个Web贪吃蛇小游戏吧（一）

这是我参与更文挑战的第18天，活动详情查看：更文挑战

这只是大学生博主记录完成Web大作业的全过程。欢迎各位指点，谢谢!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake</title>
</head>
<body>
    <button onclick="gamaStart()">Start</button>
    <h1 id="score_id">0</h1>
    <canvas width="400" height="400" id="canvas_id"></canvas>
</body>
</html>
复制代码

第一步页面主干

首先写一个开始游戏的按钮：

<button onclick="gamaStart()">Start</button>

当点击按钮时，开始游戏。

然后因为我希望分数能够显示出来，于是用了h1标签显示分数。

然后新建一个400*400像素的画布。

第二步设置背景

var gameInterval

function gamaStart() {
    gameInterval = setInterval(gameRoutine, 1000)//每1000毫秒，执行一次

}

function gameRoutine(){
    updateCanvas() //更新画布
}

function updateCanvas(){
    var canvas = document.getElementById('canvas_id') //取画布
    var context = canvas.getContext('2d') //取得画布的context

    context.fillStyle = 'black' //用黑色填满
    context.fillRect(0,0,canvas.width,canvas.height) //填充的范围


}
复制代码

执行开始游戏函数是先取出画布，画布用黑色填充。

然后为画布设置每1000毫秒也就是1秒更新一次。

下面开始进入游戏的主逻辑

第三步画蛇

var BLOCK_SIZE = 20 //每格是20个像素
var BLOCK_COUNT = 20 //20个格子

var gameInterval
var snack

function gamaStart() {
    snack ={
        body: [
            { x:BLOCK_COUNT/2 , y:BLOCK_COUNT/2 }
        ],
        size: 1,
        direction:{ x:0 , y:-1}
    }
    gameInterval = setInterval(gameRoutine, 1000)//每1000毫秒，执行一次

}

}

复制代码

var BLOCK_SIZE = 20 代表每格是20个像素

var BLOCK_COUNT = 20 代表总共有20个格子。

snack ={
        body: [
            { x:BLOCK_COUNT/2 , y:BLOCK_COUNT/2 }
        ],
        size: 1,
        direction:{ x:0 , y:-1}
    }
复制代码

其中body代表身体区块的每一个坐标，size代表长度，direction代表初始方向向上。

function gameRoutine(){
    moveSnack() //蛇移动 
    updateCanvas() //更新画布
}

function moveSnack(){
    var newBlock = {
        x: snack.body[0].x + snack.direction.x, //新区块 x坐标
        y: snack.body[0].y + snack.direction.y //新区块 y坐标
    }

    snack.body.unshift(newBlock) //加在数组最前面


    while(snack.body.length > snack.size){
        snack.body.pop()  //蛇移动后 尾巴断掉
    }
}

function updateCanvas(){
    var canvas = document.getElementById('canvas_id') //取画布
    var context = canvas.getContext('2d') //取得画布的context

    context.fillStyle = 'black' //用黑色填满
    context.fillRect(0,0,canvas.width,canvas.height) //填充的范围
    //为每一个格子填充颜色
    for(var i=0;i<snack.body.length;i++){
        context.fillRect(
            snack.body[i].x * BLOCK_SIZE,
            snack.body[i].y * BLOCK_SIZE,
            BLOCK_SIZE,
            BLOCK_SIZE
        )
    }
}


复制代码