JavaScript學習之自定義對象--小遊戲貪吃蛇

    <script type="text/javascript">
            var timer;
            //定義地圖
            var Map;
            //定義蛇
            var Snack;
            //定義實物
            var Food;
            //自定義函數造地圖相關屬性
            function map() {
                this.width = "900"; //自定義地圖的寬
                this.height = "600"; //自定義地圖的高
                this.backcolor = "gray"; //自定義地圖的背景顏色
                this.border="1px soild black";
                this.position = "relative";
                this.margin = "0 auto";
                //造地圖對象
                this._map = null; //沒有地圖
                this.creatmap = function() {
                    if(this._map == null) {
                        //判斷如果沒有地圖，則造一個出來
                        this._map = document.createElement("div");
                        //設置地圖相關屬性
                        this._map.style.width = this.width + "px";
                        this._map.style.height = this.height + "px";
                        this._map.style.backgroundColor = this.backcolor;
                        this._map.style.border=this.border;
                        this._map.style.position = this.position;
                        this._map.style.margin = this.margin;
                        //追加造的地圖到body裏
                        document.body.appendChild(this._map);
                    };
                };
            };
            //自定義函數造蛇相關屬性
            function snack() {
                this.width = "30";
                this.height = "30";
                this.border = "1px solid black";
                this.position = "absolute";
                this.direct = "right";
                //造蛇的對象
                this._snack = [
                    [4, 1, null, "red"],
                    [3, 1, null, "yellow"],
                    [2, 1, null, "yellow"]
                ];
                //蛇的移動方向
                this.setdirection = function(code) {
                    //綁定鍵盤左上右下鍵
                    switch(code) {
                        case 37:
                            this.direct = "left";
                            break;
                        case 38:
                            this.direct = "up";
                            break;
                        case 39:
                            this.direct = "right";
                            break;
                        case 40:
                            this.direct = "down";
                            break;
                    };
                };
                //蛇的移動
                this.snackmove = function() {
                    //屬性傳遞，蛇移動時將上一個的屬性傳給下一個,頭控制方向，身子跟隨頭的移動而移動
                    var length = this._snack.length - 1;
                    for(i = length; i > 0; i--) {
                        this._snack[i][0] = this._snack[i - 1][0]; //將上一個的x值傳給下一個
                        this._snack[i][1] = this._snack[i - 1][1]; //將上一個的y值傳給下一個
                    };
                    //判斷蛇頭方向
                    switch(this.direct) {
                        case "right":
                            this._snack[0][0] += 1;
                            break;
                        case "left":
                            this._snack[0][0] -= 1;
                            break;
                        case "up":
                            this._snack[0][1] -= 1;
                            break;
                        case "down":
                            this._snack[0][1] += 1;
                            break;
                    };
                    //判斷吃到食物
                    if(this._snack[0][0] == Food.x && this._snack[0][1] == Food.y) {
                        //增加最後一截蛇尾巴
                        this._snack.push([this._snack[this._snack.length - 1][0], this._snack[this._snack.length - 1][1], null, "yellow"]);
                        //畫食物，食物跑到其他位置
                        Food.creatfood();
                    };
                    //穿牆
                    if(this._snack[0][0]>=30){
                        this._snack[0][0]=0;
                    };
                    if(this._snack[0][0]<0){
                        this._snack[0][0]=29;
                    };
                    if(this._snack[0][1]>=20){
                        this._snack[0][1]=0;
                    };
                    if(this._snack[0][1]<0){
                        this._snack[0][1]=19;
                    };
                    //自己撞自己死了
                    for(i=1;i<this._snack.length;i++){
                        if(this._snack[0][0]==this._snack[i][0]&&this._snack[0][1]==this._snack[i][1]){
                            clearInterval(timer);
                            alert("死了");
                        };
                    };
                    //重新畫蛇，加蛇尾巴
                    Snack.creatsnack();
                };
                //造蛇
                this.creatsnack = function() {
                    for(i = 0; i < this._snack.length; i++) {
                        if(this._snack[i][2] == null) {
                            this._snack[i][2] = document.createElement("div");
                            this._snack[i][2].style.width = this.width + "px";
                            this._snack[i][2].style.height = this.height + "px";
                            this._snack[i][2].style.border = this.border;
                            this._snack[i][2].style.position = this.position;
                            this._snack[i][2].style.backgroundColor = this._snack[i][3];
                            Map._map.appendChild(this._snack[i][2]);
                        };
                        this._snack[i][2].style.left = this._snack[i][0] * this.width + "px";
                        this._snack[i][2].style.top = this._snack[i][1] * this.height + "px";
                    };
                };
            };
            //自定義函數造實物的相關屬性
            function food() {
                this.width = "30";
                this.height = "30";
                this.border = "1px solid black";
                this.backcolor = "yellow";
                this.position = "absolute";
                this.x = 0;
                this.y = 0;
                //造食物對象
                this._food = null; //沒有食物;
                //造食物
                this.creatfood = function() {
                    this.x = Math.floor(Math.random() * 30);
                    this.y = Math.floor(Math.random() * 20);
                    if(this._food == null) {
                        this._food = document.createElement("div");
                        this._food.style.width = this.width + "px";
                        this._food.style.height = this.height + "px";
                        this._food.style.border = this.border;
                        this._food.style.backgroundColor = this.backcolor;
                        this._food.style.position = this.position;
                        Map._map.appendChild(this._food);
                    }
                    this._food.style.left = this.x * this.width + "px";
                    this._food.style.top = this.y * this.width + "px";
                };
            };
            //當數口加載完成後
            window.onload = function() {
                Map = new map(); //實例化對象
                Map.creatmap();
                Snack = new snack();
                Snack.creatsnack();
                timer=setInterval("Snack.snackmove()", 300)
                document.onkeydown = function(event) {
                    Snack.setdirection(event.keyCode);
                }
                Food = new food();
                Food.creatfood();
            }
        </script>