WEB 八

JS 面向对象编程

利用JS面向对象编程写一个贪吃蛇小游戏

思路：地图->蛇->让蛇运动->用键盘控制蛇运动->食物->食物随机->蛇吃食物并让蛇边长->添加死亡判定

首先创建一个地图类

function Map(){
            this.width=1200;
            this.height=600;
            this.margin="0 auto";
            this.bgcolor="black";
            this._map=null;
            this.createMap=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.bgcolor;
                    this._map.style.margin=this.margin;
                    this._map.style.position="relative";
                    this._map.style.overflow="hidden";
                    document.body.appendChild(this._map);
                }
            }
        }

然后在window.onload事件里面新建一个MAP实例，调用createMap方法；

创建一个蛇类

function Snake(){
            this.width=30;
            this.height=30;
            this.direct=r="right";
            this.position="absolute";
            this.snakebody=[[1,1,"white",null],[2,1,"white",null],[3,1,"blue",null]];
            this.createSnake=function(){
                for(i=0;i<this.snakebody.length;i++){
                    if(this.snakebody[i][3]==null){
                        this.snakebody[i][3]=document.createElement("div");
                        this.snakebody[i][3].style.width=this.width+"px";
                        this.snakebody[i][3].style.height=this.height+"px";
                        this.snakebody[i][3].style.position=this.position;
                        this.snakebody[i][3].style.backgroundColor=this.snakebody[i][2];
                        map._map.appendChild(this.snakebody[i][3]);
                    }
                    this.snakebody[i][3].style.left=this.snakebody[i][0]*30+"px";
                    this.snakebody[i][3].style.top=this.snakebody[i][1]*30+"px";
                }
            }
            this.moveSnake=function(){
                for(var i=0;i<this.snakebody.length-1;i++){
                    this.snakebody[i][0]=this.snakebody[i+1][0];
                    this.snakebody[i][1]=this.snakebody[i+1][1];
                }
                    switch (this.direct){
                        case"right":this.snakebody[this.snakebody.length-1][0]+=1;break;
                        case"left":this.snakebody[this.snakebody.length-1][0]-=1;break;
                        case"top":this.snakebody[this.snakebody.length-1][1]-=1;break;
                        case"down":this.snakebody[this.snakebody.length-1][1]+=1;break;
                    }
                this.snackCollider();
                if(this.snakebody[this.snakebody.length-1][0]>=40){
                    this.snakebody[this.snakebody.length-1][0]=0;
                }
                if(this.snakebody[this.snakebody.length-1][0]<0){
                    this.snakebody[this.snakebody.length-1][0]=39;
                }if(this.snakebody[this.snakebody.length-1][1]>=20){
                    this.snakebody[this.snakebody.length-1][1]=0;
                }
                if(this.snakebody[this.snakebody.length-1][1]<0){
                    this.snakebody[this.snakebody.length-1][1]=19;
                }


                if(this.snakebody[this.snakebody.length-1][0]==food.x&&this.snakebody[this.snakebody.length-1][1]==food.y){
                    this.snakebody.unshift([
                        this.snakebody[this.snakebody.length-1][0],
                        this.snakebody[this.snakebody.length-1][1],
                        "white",
                        null
                    ]);
                    food.createFood();
                }
                this.createSnake();

            }
this.snackCollider=function(){
                for(var i=1;i<this.snakebody.length-1;i++){
                    if(this.snakebody[this.snakebody.length-1][0]==this.snakebody[i][0]&&this.snakebody[this.snakebody.length-1][1]==this.snakebody[i][1])
                    {
                        clearInterval(time);
                        alert("撞死了");
                    }
                }
            }
        }

蛇类里面包括了蛇的运动方法 创建方法 死亡判定；

同再window.onload里新建并调用方法；

创建食物类，在createFOOD方法里面添加随机产生的函数；

function Food() {
this.x = 0;
this.y = 0;
this.width = 30;
this.height = 30;
this.bgcolor = "red";
this._food = null;
this.createFood = function () {

                        this.x = Math.floor(Math.random() * 40);
                        this.y = Math.floor(Math.random() * 20);
                if (this._food == null) {
                    this._food = document.createElement("div");
                    this._food.style.position = "absolute";
                    this._food.style.width = this.width + "px";
                    this._food.style.height = this.height + "px";
                    this._food.style.backgroundColor = this.bgcolor;
                    map._map.appendChild(this._food);
                }

                this._food.style.left = this.x * this.width + "px";
                this._food.style.top = this.y * this.height + "px";
            }
    }

实例化对象并调用方法

添加计时器让蛇一直在运动；

有一个BUG食物可能会出现在蛇的身体里面

[图片上传失败...(image-65ff1c-1528297648579)]

在createfood里面添加了判断函数

但是经过测试无法实现；