要養成寫博客的習慣--附上之前原生js寫的貪喫蛇小遊戲

原創
2020-07-02 11:56
做的並不精美主要目的提高一下對js的熟練程度；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head> <style>

</style>
<body>
    <!-- 貪喫蛇 -->
    <script>
        //定義地圖類
        function map(){
            //地圖尺寸
            this.width = '800px';
            this.height= '600px';
            this.backgroundColor = "#cccccc";

            //添加一個屬性 管理自己的dom對象
            this._map = null;

            //創建顯示地圖的方法
            this.show = function(){
                
                this._map = document.createElement('div');
                
                this._map.style.position = 'absolute';
                this._map.style.width = this.width;
                this._map.style.height= this.height;
                this._map.style.backgroundColor = this.backgroundColor;

                document.getElementsByTagName('body')[0].appendChild(this._map);
            }
        }    
        //定義食物類
        function food(){
            this.width = '20px';
            this.height = '20px';
            this.backgroundColor = '#000';
            
            //定義食物座標
            this.x = 0;
            this.y = 0;
            //顯示食物 的方法
            this._food = null;
            this.show = function(){
                if(this._food==null){
                    this._food = document.createElement('div');
                }
                //定義食物
                this._food.style.width = this.width;
                this._food.style.height = this.height;
                this._food.style.backgroundColor = this.backgroundColor;
                this._food.style.borderRadius = '10px';
                
                //獲取隨機位置；
                this.randPos();
                
                //定義食物位置
                this._food.style.position = 'absolute';
                this._food.style.left = this.x*20+'px';
                this._food.style.top  = this.y*20+'px';
                
                //顯示食物
                map._map.appendChild(this._food);        
            }
            //創建獲得隨機位置的方法
            this.randPos = function(){
                //隨機獲得x座標和y座標
                //math.random() 隨機獲得0-1的數值；
                this.x = Math.floor(Math.random()*40);//從0-39隨機取出一個數字
                this.y = Math.floor(Math.random()*30);//0-29之間的隨機數；
            }
        }
        //定義蛇類
        function Snake(){
            //定義每節蛇的屬性
            this.width = '20px';
            this.height = '20px';

            //定義蛇的屬性
            //移速
            this.speed = 1;
            //蛇當前運動方向
            this.direct = 'right';
            //用戶隨時更改的運動方向
            this.newDirect = 'right';

            //封裝蛇身
            this.body = [
                //每個數組是一個蛇姐，蛇節保存該節蛇的x,y,座標，顏色，自己對應的dom對象
                //蛇頭 標爲紅色；起始位置爲 【2，2】
                [2,2,'red',null],
                //蛇身 藍色 
                [1,2,'green',null],
                [0,2,'green',null]
            ];
            this.gogogo = 300;

            //封裝蛇的顯示方法
            this.show = function(){
                for(var i in this.body){
                    if(this.body[i][3]==null){
                        this.body[i][3] = document.createElement('div');
                    }
                    //蛇節的屬性
                    this.body[i][3].style.width = this.width;
                    this.body[i][3].style.height = this.height;
                    this.body[i][3].style.backgroundColor = this.body[i][2];
                    this.body[0][3].style.borderRadius = '10px';
                    this.body[i][3].style.border = '1px solid #f00';
                    //蛇的位置
                    this.body[i][3].style.position = 'absolute';
                    this.body[i][3].style.left = this.body[i][0]*20+'px';
                    this.body[i][3].style.top = this.body[i][1]*20+'px';
                    
                    //顯示蛇到地圖中
                    map._map.appendChild(this.body[i][3]);
                }
            }
            //添加蛇移動的方法;
            this.move = function(){
                //除了蛇頭 其他蛇節移動到前一個蛇節的位置； 即座標等於前一個蛇節的座標
                for(var i=this.body.length-1;i>0;i--){
                    this.body[i][0] = this.body[i-1][0];
                    this.body[i][1] = this.body[i-1][1];
                }
                //蛇移動方式
                //運動的座標系原點爲（0，0） 
                //向上運動時，y座標-1
                //向下 y+1
                //向左 x-1
                //向右 x+1
                switch(this.newDirect){
                    case 'up':
                    this.body[0][1] = this.body[0][1]-1;
                    break;
                    case 'down':
                    this.body[0][1] = this.body[0][1]+1;
                    break;
                    case 'right':
                    this.body[0][0] = this.body[0][0]+1;
                    break;
                    case 'left':
                    this.body[0][0] = this.body[0][0]-1;
                    break;
                }
                //將更改後的方向添加到運動方向中去
                this.direct = this.newDirect;

                //方向改變後 重新渲染蛇
                this.show();
            }
            
            //喫到食物的處理方法
            this.eat = function(){
                //判斷蛇頭與食物的位置是否重疊
                if(this.body[0][0]==food.x && this.body[0][1]==food.y){
                    //若喫到  蛇身加長1 
                    this.add();
                    //若喫到食物，重新顯示食物；
                    food.show();
                    score += 1;  
                }
            }
            
            //蛇身加一 的方法
            this.add = function(){
                var arr = ['a','b','c','d','e','f'];
                var str = '#';
                var flag = null;
                for(var i=1;i<=6;i++){
                    flag = Math.floor(Math.random()*2);
                    if(flag==0){
                        str += arr[Math.floor(Math.random()*7)];
                    }else{
                        str += Math.floor(Math.random()*10);
                    }           
                }
                this.body.push([-1,-1,str,null]);


            }
            //蛇撞牆或者喫到自己  判定遊戲結束；
            this.die = function(){
                if(this.body[0][0]<0||this.body[0][0]>39||this.body[0][1]<0||this.body[0][1]>29){
                    
                    clearInterval(time);
                    alert('GAMEOVER');
                }
                
                for(var i=this.body.length-1;i>3;i--){
                    if(this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]){
                        console.log(i);
                        clearInterval(time);
                        alert('GAMEOVER!');
                        
                    }
                }
            }




        }
        //封裝用戶操作面板 
        document.onkeydown = function(event){
            console.log(event.keyCode);
            switch(event.keyCode){
                case 37:
                if(snake.direct != 'right'){
                    snake.newDirect = 'left';
                }
                break;
                case 38:
                if(snake.direct != 'down'){
                    snake.newDirect = 'up';
                }
                break;
                case 39:
                if(snake.direct != 'left'){
                    snake.newDirect = 'right';
                }
                break;
                case 40:
                if(snake.direct != 'up'){
                    snake.newDirect = 'down';
                }
                break;
                // case 32:
                // alert('PAUSE!');
                // break;
            }
        }
        
        
        var map = new map();
        var food = new food();
        var snake = new Snake();
        window.onload = function(){
            score = 0;
            map.show();
            food.show();
            snake.show();
            
            run = function(){
                
                // console.log(snake.body[0][0],snake.body[0][1]);
                snake.move();
                snake.eat();
                snake.die();
                document.getElementById('score').innerHTML = '分數'+score;
            }
            time = setInterval(run,200);
            
        }
        
    </script>
    <div style="float:right;width:100px;height:100px;border:1px solid #000;">
        <span style="color:#f0f" id='score'></span>
    </div>
</body>
</html>
```javascript
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
要養成寫博客的習慣--附上之前原生js寫的貪喫蛇小遊戲

哭着喫過飯的人，

要養成寫博客的習慣--附上之前原生js寫的貪喫蛇小遊戲

jwt---json web token 身份驗證

要養成寫博客的習慣--附上之前原生js寫的貪吃蛇小遊戲

哭着吃過飯的人，

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
