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";

b6ae
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>