11.10贪吃蛇案例的分析

一、html中的布局

    

    

        

            开始
            暂停
        
    

二、用css中对布局盒子进行修饰

三、开始与暂停

var timer;
    window.onload=function(){
        // 浏览器加载完毕调用方法
        createGrass(); // 调用创建草坪的方法
        createSnake(); // 调用创建蛇的方法
        createFood(); // 调用创建food的方法
        // 给开始按钮绑定开始事件
        document.getElementById('start').onclick=function(){
            clearInterval(timer);  //防止多次点击开始
            timer=setInterval(function(){
                snakeMove(diRection);
            },150);
            snakeMove(diRection);
        };
        // 给暂定按钮绑定暂停事件
        document.getElementById('pause').onclick=function(){
            clearInterval(timer);
        };
    };

四、创建蛇

// 创建蛇
    // snakeBoyd是存放小盒子的数组
    var snakeBody=[],oFood,diRection='left';
    function createSnake(){
        var oGround=document.getElementById('ground');
        var oDiv;
        for(var i=0;i<3;i++){
            oDiv=document.createElement('div');
            oDiv.className='snakeBody';

            oDiv.style.left=(i+40)*20+'px';
            oDiv.style.top='60px';

            oGround.appendChild(oDiv);

            snakeBody.push(oDiv);
        }
    }

五、创建食物

//创建食物
    function createFood(){
        var flag=true;  //该标识用于判断生成的div是否和蛇身div重合

        var oGround=document.getElementById('ground');
//        var oDiv;

        var len=snakeBody.length; // 获得蛇的长度

        var iLeft,iTop;

        oFood=document.createElement('div');
        oFood.className='food';

        iLeft=parseInt(Math.random()*49)*20; // pareseInt确保生成的是一个整数
        iTop=parseInt(Math.random()*24)*20; // pareseInt确保生成的是一个整数



        // 判断生成的小盒子是否和snakeBody里面的小盒子重叠
        for(var i=0;i

六、控制蛇的运动

 //蛇运动
    function snakeMove(direction){  //direction用于作为蛇移动的四个方向的判断

        var snakeHead=snakeBody[0];  //获取蛇头

        diRection=direction;  //用于防止比如蛇身本来往左边走，但是向右按钮仍然有效的情况

        for(var i=snakeBody.length-1;i>0;i--){  //移动说白了就是后面的div使用它前一个div的位置

            snakeBody[i].style.left=snakeBody[i-1].offsetLeft+'px';
            snakeBody[i].style.top=snakeBody[i-1].offsetTop+'px';
        }

        // 移动贪吃蛇的头部小盒子
        switch (direction){  //蛇头指向的位置
            case 'left':snakeHead.style.left=snakeHead.offsetLeft-20+'px';break;
            case 'right':snakeHead.style.left=snakeHead.offsetLeft+20+'px';break;
            case 'up':snakeHead.style.top=snakeHead.offsetTop-20+'px';break;
            case 'down':snakeHead.style.top=snakeHead.offsetTop+20+'px';break;
        }

        //蛇头碰壁
        if(snakeHead.offsetLeft == -20 || snakeHead.offsetLeft == 1000 || snakeHead.offsetTop == -20 || snakeHead.offsetTop == 500){

            clearInterval(timer);
            // 如果出界,重新加载网页一次
            if(confirm('再来一次?')){
                window.location.reload();
            }
        }


        //蛇碰到自身
        for(var j=1;j