JS編寫貪吃蛇（面向對象思想）

時間 2019-11-11

原文原文鏈接

效果圖：（抱歉，因爲本人能力有限，只能暫時放靜態圖。後期會把動態圖更新上去）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #map {
            width: 500px;
            height:500px;
            position:relative;
            background: #ccc;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="Food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>
    var map = document.getElementById("map");
    var game = new Game(map);
    game.init();
</script>
</body>
</html>

Food.js內容：

(function(){
    function Food(width,height,top,left,background){
            this.width = width || 20;
            this.height = height || 20;
            this.top = top || 0 ;
            this.left = left || 0;
            this.background = background || "green";
    }
    var newFood = null;
    Food.prototype.init = function(map){
        removeFood(map);
        newFood = document.createElement("div");
        newFood.style.width = this.width + "px";
        newFood.style.height = this.height + "px";
        newFood.style.background = this.background;
        this.top = parseInt(Math.random()*(map.offsetHeight-this.height)/this.height)*this.height;
        this.left = parseInt(Math.random()*(map.offsetWidth-this.width)/this.width)*this.width;
        newFood.style.top = this.top + "px";
        newFood.style.left = this.left  + "px";
        newFood.style.position  = "absolute";
        map.appendChild(newFood);
    }
    function removeFood(map){
        if(newFood){
            map.removeChild(newFood);
        }
    }
    window.Food = Food;
})();

Snake.js內容：

(function(){
    function Snake(width,height,direction){
        this.width = width ||20;
        this.height = height || 20;
        this.direction = direction || "right";
        this.body = [
            {top:1,left: 3,color: "red"},
            {top:1,left: 2,color: "gold"},
            {top:1,left: 1,color: "gold"}
        ]
    }
    var newSnake = [];
    Snake.prototype.init = function(map) {
        removeSnake(map);
        for (var i = 0; i < this.body.length; i++) {
            var snake = document.createElement("div");
            snake.style.width =this.width+ "px";
            snake.style.height= this.height +"px";
            snake.style.background = this.direction;
            snake.style.position ="absolute";
            snake.style.top = this.body[i].top*this.height +"px";
            snake.style.left  = this.body[i].left*this.width+ "px";
            snake.style.background = this.body[i].color;
            map.appendChild(snake);
            newSnake.push(snake);
        }
    }
    Snake.prototype.move = function(map,food){
        //移動過程當中，刪除原來的，建立新的；中間加上位置移動
        removeSnake(map);
        for(var j=this.body.length-1;j>=1;j--){
            this.body[j].left = this.body[j-1].left;
            this.body[j].top = this.body[j-1].top;
        }
        switch(this.direction){
            case "right":
                this.body[0].left +=1;
                break;
            case "left":
                this.body[0].left -=1;
                break;
            case "top":
                this.body[0].top -=1;
                break;
            case "bottom":
                this.body[0].top +=1;
        }
        //移動過程當中，若是蛇頭的位置同食物相同，則一、建立新食物  二、蛇身體增長一部分
        var last = this.body[this.body.length-1];
        var x = this.body[0].left*food.width;
        var y = this.body[0].top * food.height;
        if(x == food.left && y == food.top){
            food.init(map);
            var newBo = {
                top: last.top,
                left:last.left,
                color:"gold"
            }
            this.body.push(newBo);
        }
        this.init(map);
    }
    function removeSnake(map){
        for(var i=0;i<newSnake.length;){
            map.removeChild(newSnake[i]);
            newSnake.shift();
        }
    }
    window.Snake = Snake;
})();

Game.js內容：

(function(){   function Game(map){       var food = new Food();       this.food = food;       var snake = new Snake();       this.snake = snake;       this.map = map;   }    Game.prototype.init= function(){        this.snake.init(this.map);        this.food.init(this.map);        snakeMove(this.map,this.food,this.snake);        changeDire(this.snake);    }    function snakeMove(map,food,snake){        //設置定時器，蛇移動        timer = setInterval(function(){            snake.move(map,food);            //判斷蛇頭位置有沒有超出範圍            var x = map.offsetWidth/parseInt(food.width) -1;            var y = map.offsetHeight/parseInt(food.height) -1;            if(snake.body[0].left<0 || snake.body[0].left>x){                clearInterval(timer);                alert("Game over");            }            if(snake.body[0].top<0 || snake.body[0].top>y){                clearInterval(timer);                alert("Game over");            }        },200);    }    //根據輸入值改變方向    function changeDire(snake){        document.onkeydown = function(event){            event = event || window.event;            var num = event.keyCode;            switch(num){                case 37:snake.direction ="left";break;                case 38:snake.direction = "top";break;                case 39:snake.direction = "right";break;                case 40:snake.direction = "bottom";break;            }        }    }    window.Game = Game;})();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。