我们一起写个Web贪吃蛇小游戏吧（二） | 新手向 ⛵

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

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

昨日成果

小改进

发现速度太慢，所以将速度调整为750毫秒
修改的代码如下：
gameInterval = setInterval(gameRoutine, 750)

为了怕蛇的身体粘在一起，我们让蛇的身体不占满一格。

context.fillStyle = 'lime'
    for(var i=0;i<snack.body.length;i++){
        context.fillRect(
            snack.body[i].x * BLOCK_SIZE + 3,
            snack.body[i].y * BLOCK_SIZE + 3,
            BLOCK_SIZE - 3,
            BLOCK_SIZE - 3 
        )
    }
复制代码

写控制蛇的部分

接下来是写控制蛇的方向：

//在页面加载完成后 onPageLoaded 方法会被调用。
window.onload = onPageLoaded


function onPageLoaded() {
    //建立事件监听器
    document.addEventListener('keydown', handleKeyDown)
}

function handleKeyDown(event) {
    if(mode === '1'){
        var originX = snake.direction.x
        var originY = snake.direction.y

        if(event.keyCode === 37){//左方向键
            snake.direction.x = originY
            snake.direction.y = -originX
        } else if(event.keyCode === 39){//右方向键
            snake.direction.x = -originY
            snake.direction.y = originX
        }
    }else if(mode === '2'){
        // keycode:  ←37 ↑38 →39 ↓40
        if(event.keyCode === 37){
            snake.direction.x = -1
            snake.direction.y = 0
        }else if(event.keyCode === 38){
            snake.direction.x = 0
            snake.direction.y = -1
        }else if(event.keyCode === 39){
            snake.direction.x = 1
            snake.direction.y = 0
        }else if(event.keyCode === 40){
            snake.direction.x = 0
            snake.direction.y = 1
        }
    }

}
复制代码

什么是Event 对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

本函数调用了DOM的event对象，通过event的keyCode属性来获取玩家动作。

本游戏设置了两种模式：双方向模式、四方向模式。

其中双方向模式的编写逻辑可能不太好理解，但是可以通过观察来找到规律：

实现游戏结束逻辑

function snakeIsDead(){
    //碰墙
    if(snake.body[0].x < 0){
        return true
    }else if(snake.body[0].x > BLOCK_COUNT){
        return true
    }else if(snake.body[0].y < 0){
        return true
    }else if(snake.body[0].y >= BLOCK_COUNT){
        return true
    }

    //撞身体
    for(var i=1;i<snake.body.length;i++){
        if(snake.body[0].x === snake.body[i].x &&
            snake.body[0].y === snake.body[i].y){
                return true
            }
    }
    //都没撞，没死...
    return false
}

复制代码

很简单的思路，当蛇的头超过了画布就相当于撞墙，撞身体就是头的坐标等于身体的坐标。这样蛇就die了。

function gameover() {
    //停止更新画布
    clearInterval(gameInterval)
}
复制代码

蛇死后，我们就停止画布更新。

今天到此为止吧，明天写蛇吃苹果啦….