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游戏开发中,我们会遇到像这样很多节点需要进行碰撞检测。

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

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值