js編寫簡單的貪吃蛇游戲

css代碼

*{
        margin: 0;
        padding:0;
    }
    td{
        width: 4px;
        height: 4px;
        background: #ccc;
        border: 2px solid #ccc;
    }
    table{
        margin: 60px auto 0;
        border: 10px solid #333;
        background: #ccc;
    }

 

 

js代碼

window.onload = function(){
        snake();
    };

    function snake(){
        //<table><tbody><tr><td></td><td></td><td></td></tr></tbody></table>
        //創建表格的外層，並存入變量
        var oTa =  document.createElement('table');
        var oTb =  document.createElement('tbody');
        //循環生成40*40的表格
        for(var i=0; i<40; i++){
            var oTr = document.createElement('tr');
            //需要生成td
            for(var j=0; j<40; j++){
                var oTd = document.createElement('td');
                //oTd.style = "background:#ccc";
                oTr.appendChild(oTd);
            }
            //將tr放到tbody中
            oTb.appendChild(oTr);
        }

        //將tbody放入table中
        oTa.appendChild(oTb);
        oTa.cellSpacing = '1';
        document.body.appendChild(oTa);

        //約定一下所有的顏色 黑邊框#333  大背景#ccc 紅點背景red  #555蛇身的顏色 #eee蛇頭的顏色
        //隨機一個紅點,先獲取所有的td存起來，以便后續使用
        var aTd = document.getElementsByTagName("td");
        fruit();
        function fruit(){
            var num = Math.floor( Math.random()*aTd.length );

            //判斷是否和蛇重復了
            if(aTd[num].style.backgroundColor != 'rgb(238, 238, 238)' && aTd[num].style.backgroundColor != 'rgb(85, 85, 85)'){
                aTd[num].style = 'background:red;border:2px solid #333';
            }else{
                fruit();
            }

        }


        //初始化蛇的位置
        var arr = [[19,20]];
        var rows = oTb.rows;
        var timer = null;
        var keyTimer = null;
        var directionCode = "";
        var snakeMove ="";
        snakeColor();
        function snakeColor(){
            //蛇身的顏色需要設置
            //通過tbody的rows屬性可以找到下面的所有tr ，通過tr的cells屬性可以找到下面所有td
            for(var i=0; i<arr.length; i++){
                rows[arr[i][0]].cells[arr[i][1]].style = 'background:#555;border:2px solid #333';
            }
            rows[arr[0][0]].cells[arr[0][1]].style = 'background:#eee;border:2px solid #333';     //19 = arr[0][0]   20 = arr[0][1]
        }

        //檢測鍵盤事件
        document.onkeydown = function(e){
            e = e || window.event;
            //console.log(e.keyCode);
            clearTimeout(keyTimer);
            keyTimer = null;
            keyTimer = setTimeout(function(){
                doKeyAction(e.keyCode);
            },20)

            function doKeyAction(keyCo){
                if( keyCo==37||keyCo==38||keyCo==39||keyCo==40 ){
                    if(Math.abs(directionCode-keyCo) == 2 || directionCode == keyCo){
                        return;
                    }else{
                        directionCode = keyCo;
                    }
                }

                //37 38 39 40 左上右下   32空格   enter 13
                switch (keyCo){
                    case 37:
                        //需要執行的代碼
                        snakeTimer(0,-1);
                        break;
                    case 38:
                        //上需要執行的代碼
                        snakeTimer(-1,0);
                        break;
                    case 39:
                        //右需要執行的代碼
                        snakeTimer(0,1);
                        break;
                    case 40:
                        //下需要執行的代碼
                        snakeTimer(1,0);
                        break;
                    case 32:
                        //空格需要執行的代碼 暫停 繼續
                        //snakeTimer(0,-1);
                        if(timer){
                            clearInterval(timer);
                            timer = null;
                        }else{
                            snakeMove && snakeMove();  //  ||   &&        a || b 如果a為真，就不會執行b        a && b 如果a為真才會執行b
                        }
                        break;
                }
            }
            

            //運動的timer
            function snakeTimer(y,x){
                snakeMove = function(){
                    snakeTimer(y,x);
                };
                clearInterval(timer);  //TUDO這里的清除timer只是暫時處理
                timer = setInterval(function(){
                    //console.log( [arr[0][0],arr[0][1]-1] );

                    //當達到25個的時候，進入下一關
                    if(arr.length >=25){
                        clearInterval(timer);
                        alert("恭喜，進入下一關");
                        window.snakeSpeed = window.snakeSpeed*0.8;
                        document.body.removeChild(oTa);
                        snake();
                    }

                    //檢測是否碰到邊緣了
                    if(arr[0][0]+y<0 || arr[0][0]+y>39 || arr[0][1]+x<0 || arr[0][1]+x>39){
                        fail();
                        return;
                    }

                    //檢測是否撞到自己了
                    for(var i=1; i<arr.length; i++){
                        if(arr[0][0]+y == arr[i][0] && arr[0][1]+x == arr[i][1]){
                            fail();
                            return;
                        }
                    }




                    arr.unshift( [arr[0][0]+y,arr[0][1]+x] );  //arr.unshift(新值),在arr最前面插入一個（新值）
                    //是否遇到紅色的塊了
                    if(rows[arr[0][0]].cells[arr[0][1]].style.backgroundColor == 'red'){
                        //console.log("已經遲到水果了");
                        //重新去生成以紅點
                        fruit();
                        //console.log(arr);
                    }else{
                        rows[arr[arr.length-1][0]].cells[arr[arr.length-1][1]].style =  'background:#ccc;border:2px solid #ccc';          //如何尋找數組的最后一個,arr[arr.length-1]
                        arr.pop();
                    }
                    snakeColor();

                },window.snakeSpeed);
            }


            function fail(){
                clearInterval(timer);
                alert("任務失敗");
                //TODO:任務失敗后重新加載游戲
                document.body.removeChild(oTa);
                snake();
            }

        };

        if(!window.snakeSpeed){
            alert("點擊方向鍵開始游戲，點擊空格暫停");
            window.snakeSpeed = 100;
        }


    }