项目描述:一个简易版的贪吃蛇,蛇在框里吃食物身体会增长,如果不小心碰到墙壁或者自己的身体就会死掉,刷新可以进行 下一次游戏。
基本功能实现:
运用for 循环把地图建立起来
运用if/swich制定蛇死亡的规则
写随机函数让食物在墙内随机出现
运用JS的属性将吃掉食物的蛇和食物添加和删除相关类
用$(window).keydown与键盘码实现蛇的游走
1.首先先创建一个身体的数组和食物的数组,运用for 循环和if把地图建立起来
这是个300*300的地图15*15的格子,一行15个,如下图
判断完外墙和里面的地图把相应的类样式填进去
2.写蛇的相关属性和功能的实现以及食物的随机出现
// 因为蛇已经在 索引值为16的位置出现了 不能再将食物放在这里
foodArr.splice(foodArr.indexOf(16), 1)
在食物的数组里寻找索引为16的那个对象,删除它,indexof 在数组中查找某个值 如果有返回索引 没有返回-1;splice (从哪里开始索引,执行几个,替换成什么)删除或替换。
// 创建食物
function food() {
var f = randomxy()//执行一次随机函数
$('.box').children().eq(f).removeClass().addClass('food')
//在.box的孩子里寻找索引为 生成的随机数f 的对象 移除它的类样式,添加食物的类
}
// 蛇动起来 的方向
function move(direction) {
var num = 0;
switch (direction) {
case 'left':
num = -1
break;
case 'right':
num = 1
break;
case 'up':
num = -15
break;
case 'down':
num = 15
break;
}
// 蛇自动移动 用定时器 每300毫秒让蛇动一次
function automove() {
snake.timer = setInterval(function () {
move(snake.direction)//执行move函数
}, 300)
}
3.写贪吃蛇的游戏规则
// 获得下一个位置的类名
var nextstepstyle = $('.box').children().eq(nextStep).attr('class')
attr():设置或返回匹配元素的属性和值。
如果游戏失败了就清除蛇的计时器让蛇停止;
如果吃掉了食物就让蛇长长一格,把食物的类清除,增加蛇的类,把这个食物加到蛇的数组里,在食物数组里找到它把它删除;再执行一次食物函数生成一个新的食物。
// 将蛇走过的路径改成普通棋子样式
var laststep = snakeArr[0]
$('.box').children().eq(laststep).removeClass().addClass('in')
snakeArr.splice(snakeArr.indexOf(laststep), 1)
foodArr.push(laststep)
用$(window).keydown(){}实现用键盘上下左右移动