简易js贪吃蛇

简易贪吃蛇

步骤

1. 先创建一个盒子，即蛇活动的范围及食物产生的范食物围
2. 封装一个随机产生食物的函数
3. 先创建一个蛇头，用键盘来控制移动方向
4. 吃到食物，食物重新生成一个随机的位置，蛇的身体加1
5. 设定判断条件

代码展示

1. html代码

<p>吃到食物： <em>0</em> 个</p>
    <div class="wrap">  
        <ul>
            <li class="head"></li>
            <li></li>
        </ul>
        <div class="food">
            <span></span>
        </div>
    </div>

2.在js中先获取元素及创建所需变量

var wrap = document.querySelector('.wrap');
        var ul = document.querySelector('ul');
        var food = document.querySelector('.food');
        var head = document.querySelector('.head');
        var span = document.querySelector('span');
        var em = document.querySelector('em');
        var time1,time2;
        var flag = 1;//游戏结束标志
        var preDir = 'right';// 设置初始方向
        var count = 0;//计数器

3.封装食物随机生成函数

 function Food(){//改变食物出现位置
            var c = false;
            var lis = document.querySelectorAll('li');
            do{
                var numL = (Math.ceil(Math.random()*40)- 1) * 20;
                var numT = (Math.ceil(Math.random()*20)- 1) * 20;
               for(var i =0; i < lis.length; i++){
                   if(numL == lis[i].offsetLeft && numT == lis[i].offsetTop){
                       c = true;
                   }
               }
            }while(c)//判断食物出现位置，如果出现位置在蛇身上，重新生成一个
            span.style.left = numL + 'px';
            span.style.top = numT + 'px';
        };

4.蛇移动函数

function move(direction) {//根据方向移动
            clearInterval(time1);
            time1 = setInterval(function () {
                var speedL = head.offsetLeft;//获取蛇头的位置
                var speedT = head.offsetTop;
                var lis = document.querySelectorAll('ul li');//重新获取lis
                for(var i = lis.length-1; i > 0 ;i--){//移动，每次后一个的坐标移动到前一个lis的坐标
                    lis[i].style.left = lis[i - 1].style.left;
                    lis[i].style.top = lis[i - 1].style.top;
                }
                if(direction == 'right'){
                    speedL += 20;
                }
                if(direction == 'left'){
                    speedL -= 20;
                }
                if(direction == 'top'){
                    speedT -= 20;
                }
                if(direction == 'bottom'){
                    speedT += 20;
                }
                head.style.left = speedL + 'px';
                head.style.top = speedT + 'px';

                var span = document.querySelector('span');
                if(speedL == span.offsetLeft && speedT == span.offsetTop){//如果吃到食物
                    Food();
                    createBody(lis[count]);//创建身体
                    count++;
                    em.innerText = count;
                }
                judge(speedL,speedT,lis);//判断
            },200);
        }

5.蛇吃到食物新增一节身体

function createBody(dom){//吃到食物添加身体
            var li = document.createElement('li');
            li.style.left = dom.style.left;
            li.style.top  = dom.style.top;
            ul.appendChild(li);
        }

6.判断游戏结束条件

 function judge(speedL,speedT,lis){//判断结束条件
            //判断蛇头是否撞到边界
            if(speedL < 0 || speedL > wrap.clientWidth - head.offsetWidth ||(speedT < 0 || speedT > wrap.clientHeight - head.offsetHeight )){
                alert('游戏结束,成绩为：' + count)
                clearInterval(time1);
                flag = 0;
                return false;
            }
            //判断蛇头是否撞到自己
            for(var i = 1; i < lis.length; i++){
                if((speedL == lis[i].offsetLeft && speedT == lis[i].offsetTop )){
                    alert('游戏结束,成绩为：' + count)
                    clearInterval(time1);
                    flag = 0;
                    return false;
                }
            }
        }

7.键盘控制方向

document.onkeydown = function(ev){//键盘控制方向
            if(!flag){//判断当前游戏是否结束
                return false;
            }
            var e = ev || window.event;
            switch(e.keyCode){//判断当前方向，跟键盘控制方向是否相反
                case 37:
                    if(preDir == 'right'){move('right');}
                    else{preDir = 'left';move('left');}
                    break;
                case 38:
                    if(preDir == 'bottom'){move('bottom');}
                    else{preDir = 'top'; move('top');}
                    break;
                case 39:
                    if(preDir == 'left'){move('left');}
                    else{preDir = 'right'; move('right');}
                    break;
                case 40:
                    if(preDir == 'top'){move('top');}
                    else{preDir = 'bottom'; move('bottom');}
                    break;   
                default:move(preDir);
            }
        }

图片展示