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>