面向对象编程
贪食蛇总共分为三个部分：
- 食物
- 蛇
- 游戏
一、食物
1、封装食物对象
- 将食物的特征全部封装起来，食物的初始坐标，宽高以及颜色
function Food(opt){
//设置默认值
opt = opt || {};
opt.x = opt.x || 0;
opt.y = opt.y || 0;
opt.width = opt.width || 20;
opt.height = opt.height || 20;
opt.color = opt.color || "green";
//设置属性
this.x = opt.x;
this.y = opt.y;
this.width = opt.width;
this.height = opt.height;
this.color = opt.color;
this.init();
}
2、添加食物初始化方法
- 将食物生成到页面上
Food.prototype.init = function(){
var element = document.createElement("div");
this.element = element;
//设置元素
element.style.width = this.width + "px";
element.style.height = this.height + "px";
element.style.backgroundColor = this.color;
element.style.position = "absolute";
};
3、添加食物随机位置的方法
- 旧的食物被吃掉的同时又会重新生成新的食物
//设置随机数
function random(n,m){
return Math.floor(Math.random()*(m-n+1)+n);
}
Food.prototype.render = function(map){
this.x = random(0,map.clientWidth/this.width-1)*this.width;
this.y = random(0,map.clientHeight/this.height-1)*this.height;
this.element.style.left = this.x + "px";
this.element.style.top = this.y + "px";
map.appendChild(this.element);
};
4、设置食物消失的方法
- 蛇头吃到食物，食物就会消失
Food.prototype.remove = function(){
var father = this.element.parentNode;
father.removeChild(this.element);
};
二、蛇
1、创建蛇对象
- 将蛇头和蛇身的特征全部封装起来，蛇头的宽高、初始方向颜色，蛇身的宽高颜色
function Snake(opt){
//设置默认值
opt = opt || {};
opt.width = opt.width || 20;
opt.height = opt.height || 20;
opt.direction = opt.direction || Direction.RIGHT;
//设置属性
this.width = opt.width;
this.height = opt.height;
this.direction = opt.direction;
this.body = [
{x:60,y:20,color:"red"},
{x:40,y:20,color:"green"},
{x:20,y:20,color:"green"}
];
}
2、添加蛇初始化的方法
Snake.prototype.init = function(map){
//创建元素
this.elements = [];
for(var i=0;i< this.body.length;i++){
var element = document.createElement("div");
map.appendChild(element);
this.elements.push(element);
//设置元素
element.style.width = this.width + "px";
element.style.height = this.height + "px";
element.style.backgroundColor = this.body[i].color;
element.style.position = "absolute";
element.style.left = this.body[i].x + "px";
element.style.top = this.body[i].y + "px";
}
}
3、添加一个蛇移动的方法
var Direction = Object.create({},{
"TOP": {
value: 0,
writable: false,
enumerable: false,
configurable: false
},
"RIGHT": {
value: 1,
writable: false,
enumerable: false,
configurable: false
},
"BOTTOM": {
value: 2,
writable: false,
enumerable: false,
configurable: false
}, "LEFT": {
value: 3,
writable: false,
enumerable: false,
configurable: false
}
});
Snake.prototype.move = function(){
//蛇身体移动位置
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 ;
//设置回元素上
this.elements[i].style.left = this.body[i].x + "px";
this.elements[i].style.top = this.body[i].y + "px";
}
//蛇头移动位置
switch (this.direction){
case Direction.TOP:
this.body[0].y -= this.height;
break;
case Direction.RIGHT:
this.body[0].x += this.width;
break;
case Direction.BOTTOM:
this.body[0].y += this.height;
break;
case Direction.LEFT:
this.body[0].x -= this.width;
break;
}
//设置蛇头对应的元素
this.elements[0].style.left = this.body[0].x + "px";
this.elements[0].style.top = this.body[0].y + "px";
};
4、设置一个蛇尾加长的方法
- 蛇每次吃到食物蛇尾就会增加一节
Snake.prototype.growth = function(){
//蛇尾加一节
var last = this.body[this.body.length-1];
var newLast = {
x:last.x,
y:last.y,
color:last.color
};
this.body.push(newLast);
//设置最后一节对应的元素
var element = document.createElement("div");
map.appendChild(element);
this.elements.push(element);
//设置元素
element.style.width = this.width + "px";
element.style.height = this.height + "px";
element.style.backgroundColor = newLast.color;
element.style.position = "absolute";
element.style.left = newLast.x + "px";
element.style.top = newLast.y + "px";
};
三、创建游戏
1、添加一个开始游戏的方法
Game.prototype.start = function(){
//设置一个定时器
this.timer = setInterval(function(){
this.snake.move();
//判断蛇的移动范围
var head = this.snake.body[0];
var maxX = this.map.clientWidth - this.food.width;
var maxY = this.map.clientHeight - this.food.height;
if(head.x<0 || head.x> maxX || head.y<0 || head.y>maxY){
alert("Game Over!");
clearInterval(this.timer);
}
//处理蛇吃食物的情况，蛇头的坐标与食物坐标一致
if(head.x == this.food.x && head.y == this.food.y){
//1.食物消失
this.food.remove();
//2.生成新的食物
this.food = new Food();
this.food.render(this.map);
//3.蛇尾加长
this.snake.growth(this.map);
}
}.bind(this),100)
};
2、创建键盘操控游戏事件
- 利用上下左右键来操控蛇的方向
Game.prototype.keyCode = function(){
//注册键盘按下事件
document.addEventListener("keydown",function(e){
switch (e.keyCode){
case 37:
this.snake.direction = window.Direction.LEFT;
break;
case 38:
this.snake.direction = window.Direction.TOP;
break;
case 39:
this.snake.direction = window.Direction.RIGHT;
break;
case 40:
this.snake.direction = window.Direction.BOTTOM;
break;
}
}.bind(this),false)
};
四、完整代码
1、HTML代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.map {
width: 800px;
height: 600px;
background-color: #000;
margin: 0 auto;
position: relative;
}
#begin{
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="map"></div>
<input type="button" value="开始游戏" id="begin"/>
<--引入封装好的js代码-->
<script src="Game.js"></script>
<script>
var map = document.querySelector(".map");
var btn = document.querySelector("#begin");
var game = new Game(map);
btn.onclick = function(){
game.start();
}
</script>
</body>
</html>
2、封装好的js代码
- 利用沙箱模式，保护代码不被污染
;(function(window,document){
function random(n,m){
return Math.floor(Math.random()*(m-n+1)+n);
}
function Food(opt){
opt = opt || {};
opt.x = opt.x || 0;
opt.y = opt.y || 0;
opt.width = opt.width || 20;
opt.height = opt.height || 20;
opt.color = opt.color || "green";
this.x = opt.x;
this.y = opt.y;
this.width = opt.width;
this.height = opt.height;
this.color = opt.color;
this.init();
}
Food.prototype.init = function(){
var element = document.createElement("div");
this.element = element;
element.style.width = this.width + "px";
element.style.height = this.height + "px";
element.style.backgroundColor = this.color;
element.style.position = "absolute";
};
Food.prototype.render = function(map){
this.x = random(0,map.clientWidth/this.width-1)*this.width;
this.y = random(0,map.clientHeight/this.height-1)*this.height;
this.element.style.left = this.x + "px";
this.element.style.top = this.y + "px";
map.appendChild(this.element);
};
window.Food = Food;
})(window,document);
(function(window,document){
var Direction = Object.create({},{
"TOP": {
value: 0,
writable: false,
enumerable: false,
configurable: false
},
"RIGHT": {
value: 1,
writable: false,
enumerable: false,
configurable: false
},
"BOTTOM": {
value: 2,
writable: false,
enumerable: false,
configurable: false
}, "LEFT": {
value: 3,
writable: false,
enumerable: false,
configurable: false
}
});
function Snake(opt){
opt = opt || {};
opt.width = opt.width || 20;
opt.height = opt.height || 20;
opt.direction = opt.direction || Direction.RIGHT;
this.width = opt.width;
this.height = opt.height;
this.direction = opt.direction;
this.body = [
{x:60,y:20,color:"red"},
{x:40,y:20,color:"green"},
{x:20,y:20,color:"green"}
];
}
Snake.prototype.init = function(map){
this.elements = [];
for(var i=0;i< this.body.length;i++){
var element = document.createElement("div");
map.appendChild(element);
this.elements.push(element);
element.style.width = this.width + "px";
element.style.height = this.height + "px";
element.style.backgroundColor = this.body[i].color;
element.style.position = "absolute";
element.style.left = this.body[i].x + "px";
element.style.top = this.body[i].y + "px";
}
};
Snake.prototype.move = function(){
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 ;
this.elements[i].style.left = this.body[i].x + "px";
this.elements[i].style.top = this.body[i].y + "px";
}
switch (this.direction){
case Direction.TOP:
this.body[0].y -= this.height;
break;
case Direction.RIGHT:
this.body[0].x += this.width;
break;
case Direction.BOTTOM:
this.body[0].y += this.height;
break;
case Direction.LEFT:
this.body[0].x -= this.width;
break;
}
this.elements[0].style.left = this.body[0].x + "px";
this.elements[0].style.top = this.body[0].y + "px";
};
Snake.prototype.growth = function(){
var last = this.body[this.body.length-1];
var newLast = {
x:last.x,
y:last.y,
color:last.color
};
this.body.push(newLast);
var element = document.createElement("div");
map.appendChild(element);
this.elements.push(element);
element.style.width = this.width + "px";
element.style.height = this.height + "px";
element.style.backgroundColor = newLast.color;
element.style.position = "absolute";
element.style.left = newLast.x + "px";
element.style.top = newLast.y + "px";
};
window.Snake = Snake;
window.Direction = Direction;
})(window,document);
(function(window,document){
function Game(map){
this.map = map;
this.food = new Food();
this.food.render(this.map);
this.snake = new Snake();
this.snake.init(this.map);
this.keyCode();
}
Game.prototype.start = function(){
this.timer = setInterval(function(){
this.snake.move();
var head = this.snake.body[0];
var maxX = this.map.clientWidth - this.food.width;
var maxY = this.map.clientHeight - this.food.height;
if(head.x<0 || head.x> maxX || head.y<0 || head.y>maxY){
alert("Game Over!");
clearInterval(this.timer);
}
if(head.x == this.food.x && head.y == this.food.y){
this.food.remove();
this.food = new Food();
this.food.render(this.map);
this.snake.growth(this.map);
}
}.bind(this),100)
};
Game.prototype.keyCode = function(){
document.addEventListener("keydown",function(e){
switch (e.keyCode){
case 37:
this.snake.direction = window.Direction.LEFT;
break;
case 38:
this.snake.direction = window.Direction.TOP;
break;
case 39:
this.snake.direction = window.Direction.RIGHT;
break;
case 40:
this.snake.direction = window.Direction.BOTTOM;
break;
}
}.bind(this),false)
};
window.Game = Game;
})(window,document);
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
