项目描述:一个简易版的贪吃蛇,蛇在框里吃食物身体会增长,如果不小心碰到墙壁或者自己的身体就会死掉,刷新可以进行 下一次游戏。

基本功能实现:

运用for 循环把地图建立起来

运用if/swich制定蛇死亡的规则

写随机函数让食物在墙内随机出现

运用JS的属性将吃掉食物的蛇和食物添加和删除相关类

用$(window).keydown与键盘码实现蛇的游走

1.首先先创建一个身体的数组和食物的数组,运用for 循环和if把地图建立起来

简易贪吃蛇java 简单贪吃蛇_javascript

 这是个300*300的地图15*15的格子,一行15个,如下图

简易贪吃蛇java 简单贪吃蛇_简易贪吃蛇java_02

 判断完外墙和里面的地图把相应的类样式填进去

简易贪吃蛇java 简单贪吃蛇_前端_03

 2.写蛇的相关属性和功能的实现以及食物的随机出现

简易贪吃蛇java 简单贪吃蛇_javascript_04

// 因为蛇已经在 索引值为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.写贪吃蛇的游戏规则 

简易贪吃蛇java 简单贪吃蛇_jquery_05

// 获得下一个位置的类名
                var nextstepstyle = $('.box').children().eq(nextStep).attr('class')

attr():设置或返回匹配元素的属性和值。

如果游戏失败了就清除蛇的计时器让蛇停止;

如果吃掉了食物就让蛇长长一格,把食物的类清除,增加蛇的类,把这个食物加到蛇的数组里,在食物数组里找到它把它删除;再执行一次食物函数生成一个新的食物。

简易贪吃蛇java 简单贪吃蛇_jquery_06

// 将蛇走过的路径改成普通棋子样式
                var laststep = snakeArr[0]
                $('.box').children().eq(laststep).removeClass().addClass('in')
                snakeArr.splice(snakeArr.indexOf(laststep), 1)
                foodArr.push(laststep)

 用$(window).keydown(){}实现用键盘上下左右移动

简易贪吃蛇java 简单贪吃蛇_前端_07

 

简易贪吃蛇java 简单贪吃蛇_javascript_08