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里面添加了判断函数
但是经过测试无法实现；
