<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border-sizing: border-box;
}
body{
background-color: grey;
}
#map{
width: 600px;
height: 600px;
background-color: white;
position: relative;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//总共要创建3个对象,分别是我的食物对象,小蛇对象以及最后的游戏对象
//食物对象
(function (){
//首先创建构造函数
function Food(width,height,color){
this.width = width || 20;
this.height = height || 20;
this.color = color || "black";
this.top = 0;
this.left = 0;
this.element = document.createElement("div");
}
//初始化我的食物盒子
Food.prototype.food = function (map){
var div = this.element;
div.style.width = this.width+"px";
div.style.height = this.height+"px";
div.style.background = this.color;
div.style.position = "absolute";
div.style.left = Math.floor(Math.random()*map.offsetWidth/this.width)*this.width+"px";
div.style.top = Math.floor(Math.random()*map.offsetHeight/this.height)*this.height+"px";
map.appendChild(div);
}
window.Food = Food;
})();
//小蛇对象
(function (){
//创建一个空数组用来存放我所要删除的盒子
var arr = [];
function Snake(width,height){
this.width = width || 20;
this.height = height || 20;
//以及要定义一个方向
this.way = "right";
//这里是先从头部进行创建
this.body = [
{x:3,y:1,color:"red"},
{x:2,y:1,color:"black"},
{x:1,y:1,color:"black"}
]
}
//初始化我的小蛇
Snake.prototype.snake = function (map){
//在我初始化之前就删除要创建的盒子
clear();
//因为我需要创建我body数组长度的盒子,所以需要遍历的去创建
for(var i=0;i<this.body.length;i++){
var div = document.createElement("div");
div.style.width = this.width+"px";
div.style.height = this.height+"px";
div.style.position = "absolute";
div.style.background = this.body[i].color;
div.style.left = this.body[i].x*this.width+"px";
div.style.top = this.body[i].y*this.height+"px";
//然后将我创建的盒子加入到map中
map.appendChild(div);
//将我创建的盒子放入数组中
arr.push(div);
}
}
//让小蛇运动
Snake.prototype.move = function (map,food){
//将我数组前面的一个值赋值给后面,其中我的头部应该只负责控制方向
for(var i=this.body.length-1;i>0;i--){
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
//然后就是设置我的头部盒子的方向,也就是判断当前的方向属性
switch (this.way){
case "right" :
this.body[0].x++;
break;
case "bottom" :
this.body[0].y++;
break;
case "left" :
this.body[0].x--;
break;
case "top" :
this.body[0].y--;
break;
}
//吃到食物需要添加
//food 是我实例化的一个对象
if(this.body[0].x*this.width == food.element.offsetLeft && this.body[0].y*this.height == food.element.offsetTop){
var a={};
a.x = this.body[this.body.length-1].x;
a.y = this.body[this.body.length-1].y;
a.color = this.body[this.body.length-1].color;
//然后将a加入到body中
this.body.push(a);
//将我的食物删除
map.removeChild(food.element);
food.food(map);
}
}
//删除最后上一次创建的盒子
//因为这不是一个对象中的方法,所以不能调用对象中的属性
function clear(){
//将我创建的盒子在map中删除,因为我已经将盒子放入到我的数组中,而且是从尾巴开始删除
for(var i=arr.length-1;i>=0;i--){
//这里的map是我的形参
map.removeChild(arr[i]);
//将我的数组清空
arr.splice(i,1)
}
}
window.Snake = Snake;
})();
//游戏对象
(function (){
function Game(map){
this.food = new Food;
this.snake = new Snake;
this.map = map;
that = this;
}
//初始化游戏
Game.prototype.game = function (map){
this.food.food(map);
this.snake.snake(map);
//调用运动实践
this.run(map);
//调用按键事件
this.btn();
}
//run
Game.prototype.run = function (map){
//这里的food是一个对象
//设置定时器
var timeId = setInterval(function (){
//这里调用setInterval的对象是我的window,所以我的this指针指向会出现问题
//that.food是我的一个实参
that.snake.move(map,that.food);
that.snake.snake(map);
//设置蛇的运动范围
if(that.snake.body[0].x*that.snake.width>= map.offsetWidth || that.snake.body[0].x*that.snake.width<=0){
clearInterval(timeId);
}if(that.snake.body[0].y*that.snake.height>= map.offsetHeight || that.snake.body[0].y*that.snake.height<=0){
clearInterval(timeId);
}
},100)
}
//最后就是用户按键事件
Game.prototype.btn = function (){
document.addEventListener("keydown",function (e){
switch (e.keyCode){
case 37 :
that.snake.way = "left";
break;
case 38 :
that.snake.way = "top";
break;
case 39 :
that.snake.way = "right";
break;
case 40 :
that.snake.way = "bottom";
break;
}
})
}
window.Game = Game;
})();
var gamer = new Game(document.getElementById("map"));
gamer.game(document.getElementById("map"));
</script>
</body>
</html>
これが私の最後の実行のスタイルです。