javaScript 贪吃蛇

JavaScript 贪吃蛇

---

自己用js写的贪吃蛇小游戏

一、制作游戏界面

1 定义游戏中需要的变量

    //定义变量
    var rowNum = 25; //列
    var colNum = 25; //行
    var arr = []; //定义数组  装画布内的每个小方格
    var snakeArry =[]; //定义数组  用来装蛇的身体
    var speedTime = 100;  //蛇身移动一次的时间
    var moveTimer = null; // 计时器
    var X = 2; //蛇身初始位置的X座标
    var Y = 0; //蛇身初始位置的Y座标
    var score = 0; //分数
    var dec = 'right'; //蛇的初始方向

2 定义两个变量控制界面的布局

将建好的小方块放入arr数组中

function makePenal(){

        //生成行元素
        for(i=0; i<rowNum; i++){
            var rowDiv = document.createElement('div');
            wrap.appendChild(rowDiv);
            var arrArry = [];       
            //在每行中插入列元素
            for(j=0; j<colNum; j++){
                var colDiv = document.createElement('div');
                colDiv.className = 'col';
                rowDiv.appendChild(colDiv);
                arrArry.push(colDiv);
            }
            arr.push(arrArry);
        }
    }

3 初始化蛇身

将arr数组中的前三个放入snakeArray数组中 完成蛇身初始化

        //初始化蛇身
        function snakeBody(){
            for(i=0; i<3; i++){ //蛇身长度为 3
                arr[0][i].className = 'col col1';
                snakeArry.push(arr[0][i]);
            }
        }

二、蛇身开始移动

1 添加计时器

添加计时器 通过改变 蛇头方向 改变蛇移动的方向

    moveTimer = setInterval(function(){
        switch(dec){
            case 'right'://右移
                X ++; 
                break;
            case 'left': //左移
                X --;
                break;
            case 'up': //上移
                Y --;
                break;
            case 'down': //下移
                Y ++;
                break;                      
    }

2 键盘事件

键盘监听事件 根据键盘输入的键值 改变蛇移动的方向 当蛇在移动时 按下相反方向的键时 不执行当前操作 还有添加一个开关 当蛇身完全移动一个方格后才可以执行操作 否则不执行

        //键盘事件  改变蛇的方向
        var aa = true;
        document.onkeydown = function(){
            var ev = window.event || event;
            if(!aa){
                return;
            }

            //蛇在移动的时候 不能向相反的方向移动
            if(ev.keyCode == 37 && dec == 'right'){
                return;
            }
            if(ev.keyCode == 38 && dec == 'down'){
                return;
            }
            if(ev.keyCode == 39 && dec == 'left'){
                return;
            }
            if(ev.keyCode == 40 && dec == 'up'){
                return;
            }
            //根据键盘 按下的上下左右键  改变蛇移动的方向
            switch (ev.keyCode){
                case 37:
                    dec = 'left';
                    break;
                case 38:
                    dec = 'up';
                    break;
                case 39:
                    dec = 'right';
                    break;
                case 40:
                    dec = 'down';
                    break;
            }
            //蛇身移动后才可以执行下一个操作 否则不能
            aa = false;
            setTimeout(function(){
                aa = true;
            },speedTime);
        }

3 生成食物

先产生两个随机数 foodX foodY 来确定食物在界面上的位置 确定后改变它的样式 特别注意食物的位置不能够和蛇身重复

//随机数  并传入最大值作为参数
        function rand(max){
            var ran = Math.floor(Math.random() * max);
            return ran;
        }
        //产生蛇要吃的食物
        function snakeFood(){
            foodX = rand(colNum);  
            foodY = rand(rowNum);
            //蛇身所在的区域内不能出现食物
            if(arr[foodY][foodX].className == 'col col1'){
                snakeFood();
            }else{
                arr[foodY][foodX].className = 'col food';
            }
        }

三、蛇吃食物

1 蛇碰到四面墙壁

当蛇头碰到界面边界是 结束游戏 注意 要清空计时器

    //判断蛇头是否碰到四面墙壁
    if(X < 0 || X >= colNum || Y<0 || Y >= rowNum){
        clearInterval(moveTimer); //清楚计时器
        alert('game over');
        return;
    }

2 蛇头碰到蛇身

在蛇移动过程中 蛇头是不能碰到自己身体的 否则结束游戏 并清空计时器

//循环遍历 蛇头是否碰到自己的的身体
    for(i=0; i<snakeArry.length; i++){
        if(snakeArry[i] ==arr[Y][X]){
            clearInterval(moveTimer); //清楚计时器
            alert('game over');
            return;         
        }
    }

3 蛇碰到食物

当蛇吃到食物后 积分器 加 1 ， 当前位置的方格样式给变为蛇身的样式 并放入到蛇身的数组中，当蛇移动是没有食物时， 将它当前的方格加入蛇身 ，并删除数组中的第0个元素（即蛇尾）

    //判断蛇是否到达食物位置           
    if(X == foodX && Y == foodY){
        arr[foodY][foodX].className = 'col col1';//改变食物的样式
        snakeArry.push(arr[foodY][foodX]); //蛇身长度加一个
        score ++;
        scoreDiv.innerHTML = "得分： " + score;
        snakeFood(); 
    }else{
        snakeArry[0].className = 'col'; //改变蛇尾的样式（蛇尾即蛇身数组内的第一个元素）
        snakeArry.shift(); //从蛇身尾部删除一个方块
        arr[Y][X].className = 'col col1'; //改变蛇头到达位置元素的样式
        snakeArry.push(arr[Y][X]);  //将蛇头到达位置的元素添加入蛇身               
    }
    },speedTime);
    }

效果图：

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>贪吃蛇</title>
        <style type="text/css">
            .wrap{border: 1px solid black; margin: auto; font-size: 0;}
            .scoring {width: 100%; border-bottom: 1px solid black; font-size: 2rem; text-align: right;}
            .scoring div{padding: 10px; }
            .col {width: 30px; height: 30px; display: inline-block; border: 1px solid blanchedalmond; background: wheat;}
            .col1 {background: black;}
            .food {background: brown;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="scoring">
                <div>得分： 0</div>
            </div>
        </div>

    </body>
    <script type="text/javascript">
        //定义变量
        var rowNum = 25; //列
        var colNum = 25; //行
        var arr = []; //定义数组  装画布内的每个小方格
        var snakeArry =[]; //定义数组  用来装蛇的身体
        var speedTime = 100;  //蛇身移动一次的时间
        var moveTimer = null; // 计时器
        var X = 2; //蛇身初始位置的X座标
        var Y = 0; //蛇身初始位置的Y座标
        var score = 0; //分数
        var dec = 'right'; //蛇的初始方向

        //获取元素
        var wrap = document.querySelector('.wrap');
        wrap.style.width = colNum * (30 + 2) + 'px'; //重新定义wrap的宽度
        var scoreDiv = document.querySelector('.scoring div');

        //制作画布 
        function makePenal(){

            //生成行元素
            for(i=0; i<rowNum; i++){
                var rowDiv = document.createElement('div');
                wrap.appendChild(rowDiv);
                var arrArry = [];       
                //在每行中插入列元素
                for(j=0; j<colNum; j++){
                    var colDiv = document.createElement('div');
                    colDiv.className = 'col';
                    rowDiv.appendChild(colDiv);
                    arrArry.push(colDiv);
                }
                arr.push(arrArry);
            }
        }
        makePenal();

        //初始化蛇身
        function snakeBody(){
            for(i=0; i<3; i++){ //蛇身长度为 3
                arr[0][i].className = 'col col1';
                snakeArry.push(arr[0][i]);
            }
        }
        snakeBody();
        //蛇身开始移动
        function snakeMove(){
            //打开计时器 使蛇根据方向移动
            moveTimer = setInterval(function(){
                switch(dec){
                    case 'right'://右移
                        X ++; 
                        break;
                    case 'left': //左移
                        X --;
                        break;
                    case 'up': //上移
                        Y --;
                        break;
                    case 'down': //下移
                        Y ++;
                        break;                      
                }
                //判断蛇头是否碰到四面墙壁
                if(X < 0 || X >= colNum || Y<0 || Y >= rowNum){
                    clearInterval(moveTimer); //清楚计时器
                    alert('game over');
                    return;
                }

                //循环遍历 蛇头是否碰到自己的的身体
                for(i=0; i<snakeArry.length; i++){
                    if(snakeArry[i] ==arr[Y][X]){
                        clearInterval(moveTimer); //清楚计时器
                        alert('game over');
                        return;         
                    }
                }

                //判断蛇是否到达食物位置           
                if(X == foodX && Y == foodY){
                    arr[foodY][foodX].className = 'col col1';//改变食物的样式
                    snakeArry.push(arr[foodY][foodX]); //蛇身长度加一个
                    score ++;
                    scoreDiv.innerHTML = "得分： " + score;
                    snakeFood(); 
                }else{
                    snakeArry[0].className = 'col'; //改变蛇尾的样式（蛇尾即蛇身数组内的第一个元素）
                    snakeArry.shift(); //从蛇身尾部删除一个方块
                    arr[Y][X].className = 'col col1'; //改变蛇头到达位置元素的样式
                    snakeArry.push(arr[Y][X]);  //将蛇头到达位置的元素添加入蛇身               
                }
            },speedTime);
        }
        snakeMove();

        //键盘事件  改变蛇的方向
        var aa = true;
        document.onkeydown = function(){
            var ev = window.event || event;
            if(!aa){
                return;
            }

            //蛇在移动的时候 不能向相反的方向移动
            if(ev.keyCode == 37 && dec == 'right'){
                return;
            }
            if(ev.keyCode == 38 && dec == 'down'){
                return;
            }
            if(ev.keyCode == 39 && dec == 'left'){
                return;
            }
            if(ev.keyCode == 40 && dec == 'up'){
                return;
            }


            //根据键盘 按下的上下左右键  改变蛇移动的方向
            switch (ev.keyCode){
                case 37:
                    dec = 'left';
                    break;
                case 38:
                    dec = 'up';
                    break;
                case 39:
                    dec = 'right';
                    break;
                case 40:
                    dec = 'down';
                    break;
            }
            //蛇身移动后才可以执行下一个操作 否则不能
            aa = false;
            setTimeout(function(){
                aa = true;
            },speedTime);
        }

        //随机数  并传入最大值作为参数
        function rand(max){
            var ran = Math.floor(Math.random() * max);
            return ran;
        }
        //产生蛇要吃的食物
        function snakeFood(){
            foodX = rand(colNum);  
            foodY = rand(rowNum);
            //蛇身所在的区域内不能出现食物
            if(arr[foodY][foodX].className == 'col col1'){
                snakeFood();
            }else{
                arr[foodY][foodX].className = 'col food';
            }
        }
        snakeFood();
    </script>
</html>