h5+js实现单机版贪吃蛇

项目地址-> 已上传github

项目地址-> 码云

项目演示地址

---

技术细节

• 所有的全局变量

var snake_body  // 蛇节数组，存储每个蛇节的位置
var direction   // 蛇当前移动的方向
var food_position   // 食物的位置，每次被蛇吃掉时更新
复制代码

• 初始化蛇节数组和蛇开始移动的方向、食物的位置

function init_snake() {
    // 数组中每一个值都是一个对象，里面存放了x、y轴的坐标位置和color颜色信息，red是蛇头
    snake_body = [{
    	x: 40,
    	y: 40,
    	color: 'black'
    }, {
    	x: 60,
    	y: 40,
    	color: 'black'
    }, {
    	x: 80,
    	y: 40,
    	color: 'red'
    }]
    // 蛇开始默认向右边移动
    direction = 'right'
    // 食物开始位置
    food_position = {
    	x: 260,
    	y: 180
    }
}
// 调用蛇的初始化方法
init_snake()
复制代码

• 先将游戏场景画好，

// init canvas
function init() {
    context.strokeStyle = '#EEEEEE'
    for(var i = 0; i < 500; i += 20) {
        // 画竖线
    	context.moveTo(i, 0)
    	context.lineTo(i, 500)
    	// 画横线
    	context.moveTo(0, i)
    	context.lineTo(500, i)
    }
    context.stroke()
    // 因为游戏场景中默认会有一个食物，这个食物在随机位置生成
    context.fillStyle = 'black'
    context.fillRect(food_position.x, food_position.y, 20, 20)
}   
复制代码

• 开始画蛇

// repaint snake fastival
function draw_snake() {
    var new_fastival = []
    for(var i = 0; i < snake_body.length; i++) {
        context.fillStyle = snake_body[i].color
        context.fillRect(snake_body[i].x, snake_body[i].y, 20, 20)
        new_fastival.push({
    	    x: snake_body[i].x,
    	    y: snake_body[i].y
        })
    }
    // 判断是否和食物发生碰撞
    eat_food()
    // 判断是否死亡
    dead(new_fastival)
}
复制代码

• 监听键盘点击事件，根据keycode修改direction方向变量

// left 37
// right 39
// top 38
// bottom 40
window.addEventListener('keydown', function(e) {
    if(e.keyCode == 37) {
    	if(direction != 'right') {
            direction = 'left'
    	}
    } else if(e.keyCode == 39) {
    	if(direction != 'left') {
            direction = 'right'
    	}
    } else if(e.keyCode == 38) {
    	if(direction != 'bottom') {
    	    direction = 'top'
    	}
    } else if(e.keyCode == 40) {
    	if(direction != 'top') {
            direction = 'bottom'
    	}
    }
})
复制代码

• 蛇的移动方法
  通过将后一位数组的值赋值给前一位，最后将snake_body蛇节数组中最后一个元素的x或y值加上一个蛇节的宽度，如果是left方向，x-=20，right方向x+=20，top方向y-=20，bottom方向y+=20。

function move_snake() {
    var x = 0, y = 0
    // 对方向作判断
    if(direction == 'right') {
    	x = 20
    } else if(direction == 'left') {
    	x = -20
    } else if(direction == 'top') {
    	y = -20
    } else if(direction == 'bottom') {
    	y = 20
    }
    for(var i = 0; i < snake_body.length - 1; i++) {
    	snake_body[i].x = snake_body[i + 1].x
    	snake_body[i].y = snake_body[i + 1].y
    }
    snake_body[snake_body.length - 1].x += x
    snake_body[snake_body.length - 1].y += y
}
复制代码

• 判断食物是否被吃掉

function eat_food() {
    // 如果蛇节数组中最后一个对象的x、y值等于食物的x、y值，那么这个食物将会被蛇吃掉
    if(snake_body[snake_body.length - 1].x == food_position.x && snake_body[snake_body.length - 1].y == food_position.y) {
    	// 再次生产食物
    	random_food()
    	// 蛇在吃掉食物之后将会添加一个蛇节
    	add_snake_fastival()
    }
}
复制代码

• 食物在被吃掉之后，位置将随机生产

// 随机生产食物位置的方法
function random_food() {
    food_position = {
        // ~~ 是位运算取整算法，比Math.floor()这个方法效率高
    	x: ~~(Math.random() * (500 / 20)) * 20,
    	y: ~~(Math.random() * (500 / 20)) * 20
    }
}
复制代码

• 为蛇添加一个蛇节

function add_snake_fastival() {
    // 新蛇节
    new_fastival = {
    	x: snake_body[0].x - 20,
    	y: snake_body[0].y - 20,
    	color: 'black'
    }
    // 在全局数组中的头部添加
    snake_body.unshift(new_fastival)
}
复制代码

• 判断蛇是否死掉，蛇在撞墙或者撞自己都会死掉

function dead(new_fastival) {
    var last_fastival = snake_body[snake_body.length - 1]
    // 判断是否撞墙
    if(last_fastival.x == -20 || last_fastival.x == 500 || last_fastival.y == -20 || last_fastival.y == 500) {
    	alert("重新开始游戏")
    	init_snake()
    }
    // 判断是否自残
    for(var i = 0; i < new_fastival.length; i++) {
    	for(var j = i + 1; j < new_fastival.length; j++) {
            if(new_fastival[i].x == new_fastival[j].x && new_fastival[i].y == new_fastival[j].y) {
            	alert("重新开始游戏")
            	init_snake()
            }
    	}
    }
}
复制代码

• 效果图

---

在canvas游戏开发中，我们会遇到像这样很多节点需要进行碰撞检测。

而重复写这些碰撞检测代码会极大的影响我们的开发效率，我根据我以前用过的游戏引擎的经验，如unity、cocos creator..。

我自己编写了一个插件，专门用于碰撞检测，只需要传入x、y、width、height等参数，你就可以很方便的进行游戏开发了~~

碰撞检测博客请另参见 自己模拟游戏引擎,动手写个js碰撞检测插件，如果有任何问题，欢迎大家来和我交流!