Html5 Canvas轻松实现贪吃蛇游戏

文章目录

一、前言

二、游戏操作方法

三、代码

总结

---

一、前言

贪吃蛇是一个非常经典的游戏就不多介绍了直接上图，最终代码呈现的效果就如图所示，可以自己根据喜好修改颜色样式，再次只实现基本原理没在样式上做过多的调整。

二、游戏操作方法

· 空格 控制游戏暂停继续
· 鼠标方向键 控制贪吃蛇前进方向

当游戏失败后提示所得分数

三、代码

html部分

<canvas id="canvas" width="500" height="500">
    你的浏览器不支持canvas请更换浏览器
</canvas>

css部分

* {
    margin: 0;
    padding: 0;
}
#canvas {
    /* canvas需要变成块级样式才好写他在网页中的样式 */
    display: block;
    margin: 200px auto;
    border: 1px solid #000;
}

js部分

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

var r = [
    {
        x: 10,
        y: 9
    },
    {
        x: 10,
        y: 8
    }
]

// 前进的键盘值初始为40向下
var co = 40

// 初始化食物
var e = null

// 初始化暂停
var stop = false

ctx.shadowBlur = 20 // 阴影大小
ctx.shadowColor = 'black' // 阴影颜色
function onframe() {
    // 如果死了就结束了，比清除定时器方便
    if (stop || r[0].x < 0 || r[0].x > 50 || r[0].y < 0 || r[0].y > 50) {
        return
    }
    // 判断蛇是否吃到食物,吃到把最后一个元素移到首部
    if (e) {
        if ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y)
        || (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y)
        || (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y)
        || (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) {
            r.unshift(e)
            e = null
        }
    }
    r.unshift(r.pop())
    // 根据方向设定蛇移动方向坐标移动方法
    switch(co) {
        case 37:
            r[0].x = r[1].x - 1
            r[0].y = r[1].y
            break
        case 38:
            r[0].x = r[1].x
            r[0].y = r[1].y - 1
            break
        case 39:
            r[0].x = r[1].x + 1
            r[0].y = r[1].y
            break
        case 40:
            r[0].x = r[1].x
            r[0].y = r[1].y + 1
            break
    }
    ctx.clearRect(0,0,500,500)
    // 绘制贪吃蛇
    for (var i = 0; i < r.length; i++) {
        ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10)
    }

    // 没有食物随机生成
    if (e == null) {
        e = {
            y: (Math.random() * 50) >>> 0,
            x: (Math.random() * 50) >>> 0
        }
    } else {
        ctx.fillRect(e.x * 10, e.y * 10, 10, 10)
    }
    if (r[0].x < 0 || r[0].x > 50 || r[0].y < 0 || r[0].y > 50) {
        alert('死了,得了' + (r.length - 2) + '分')
    }
}
setInterval(onframe, 100)
document.onkeydown = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0]
    if(e && e.keyCode <= 40 && e.keyCode >= 37 && Math.abs(e.keyCode - co) != 2) {
        co = e.keyCode
    } else if (e.keyCode == 32) {
        // 暂停游戏
        stop = !stop
    }
}

总结

这次代码只添加了空格暂停开始功能，没添加重新开始游戏的功能，如果有需要自己写个方法加个按钮就可以。