本次练习主要是练习javaScript的面对对象思想
话不多说，先看看效果图
功能描述：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束
2.通过上、下、左、右四个按键，控制小蛇运动的方向
3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物
4.统计分数，每吃一个食物就加一分
具体封装如下
1.食物对象(食物的横纵坐标,宽和高,背景颜色)
*
* 食物需要画出来---渲染出来--画,随机的画,在画食物的时候要先删除原来的食物
*
2 .小蛇对象(宽，高,方向)
* 蛇需要画出来---渲染出来--画,每走一次,需要把前一次的小蛇删除
* 蛇走的时候,需要方向,是否吃到了食物
* 小蛇移动的时候,是否吃了食物(吃了就要把小蛇的后面加一个食物的宽和高，颜色,无非就是把原来的蛇尾复制了一个加入到 body中,------>把蛇尾拿出来再次加入到蛇尾的后面)
3. 游戏对象(初始化食物,初始化小蛇,自动移动小蛇,判断按键)
* 自动的设置小蛇移动,判断小蛇是否撞墙,用户按下了什么方向键
具体实现代码如下：
1.html部分，html部分比较简单，主要是显示一个地图，设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
h1{
text-align: center;
}
.map{
width: 800px;
height: 600px;
/*background-color: #ccc;*/
background-image:url("bg.jpg");
position: relative;
/*子绝父相*/
margin: 10px auto;
}
.score{
width: 100px;
height: 50px;
background-color: #cccfff;
position: absolute;
right: -105px;
font-size: 20px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<!--创建地图，设置地图样式-->
<h1>贪吃蛇</h1>
<div class="map">
<div class="score"id="scroe">0分</div>
</div>
</body>
</html>2.js部分的代码
<script>
// 自调用函数---食物
(function(){
//定义一个数组，存储产生的div
var element=[];
//自定义构造函数，创建食物对象
function Food(width,height,color,x,y,) {
this.width=width||20;
this.height=height||20;
this.color=color||"red";
this.x=x||0;
this.y=y||0;
}
//初始化食物,因为需要在地图上生成，故需传入参数map
Food.prototype.init=function (map) {
remove();
var div=document.createElement("div");
map.appendChild(div);
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
div.style.position="absolute";
//产生随机坐标
this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
div.style.left=this.x+"px";
div.style.top=this.y+"px";
element.push(div);
};
//删除食物函数
function remove(){
for(var i=0;i<element.length;i++){
var ele=element[i];
ele.parentNode.removeChild(ele);//通过食物找到其父元素，再将食物删除
//在数组中将其删除
element.splice(i,1);
}
}
//将Food暴露给window
window.Food=Food;
}());
//自调用函数---小蛇
(function(){
//构造函数，创建小蛇
var scroe=0; //统计分数
var element=[];//创建数组，存放小蛇
function Snake(width,height,direction) {
//小蛇每部分的宽
this.width=width||20;
this.height=height||20;
this.direction=direction||"right";
this.body=[
{x:3,y:2,color:"yellow"},//头
{x:2,y:2,color:"green"},
{x:1,y:2,color:"green"}//尾部
]
}
//小蛇的初始化
Snake.prototype.init=function (map) {
remove();
for(var i=0;i<this.body.length;i++){
var obj=this.body[i];
var div=document.createElement("div");
map.appendChild(div);
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=obj.color;
div.style.position="absolute";
div.style.left=obj.x*this.width+"px";
div.style.top=obj.y*this.height+"px";
element.push(div);
}
};
//为原型添加函数---让小蛇动起来
Snake.prototype.move=function(food,map){
var i=this.body.length-1; //让蛇的身体动起来
for(;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
switch (this.direction){
case "right":this.body[0].x+=1;break;
case "left":this.body[0].x-=1;break;
case "top":this.body[0].y-=1;break;
case "bottom":this.body[0].y+=1;break;
}
//判断小蛇是否碰到食物
var headX=this.body[0].x*this.width;
var headY=this.body[0].y*this.height;
if (headX==food.x&&headY==food.y){
var last=this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
});
scroe++;
document.getElementById("scroe").innerText=scroe+"分";
console.log(scroe);
food.init(map);//删掉现有的食物，重新产生食物
}
};
//s删除小蛇函数
function remove(){
var i=element.length-1;
for(;i>=0;i--){
var ele=element[i];
ele.parentNode.removeChild(ele);
element.splice(i,1);
}
}
window.Snake=Snake;
}());
// //自调用函数--计分器
// (function(){
//
// }())
//自调用函数---游戏
(function () {
function Game(map){
this.food=new Food();
this.snake=new Snake();
this.map=map;
that=this;
}
//初始化游戏，显示小蛇和食物
Game.prototype.init=function () {
this.food.init(this.map);
this.snake.init(this.map);
this.runSnake(this.food,this.map);
this.bindkey();
};
//让蛇跑起来
Game.prototype.runSnake=function(food,map){
var timeId=setInterval(function () {
this.snake.move(food,map);
this.snake.init(map);//这两次调用，就能让蛇跑起来了
//下面判断蛇是否碰到墙
var MaxX=this.map.offsetWidth/this.snake.width;
var MaxY=this.map.offsetHeight/this.snake.height;
var headX=this.snake.body[0].x;
var headY=this.snake.body[0].y;
if (headY<0||headY>=MaxY){
clearInterval(timeId);
alert("游戏结束");
}
if(headX<0||headX>=MaxX){
clearInterval(timeId);
alert("游戏结束");
}
}.bind(that),150);
};
//添加原型对象---改变蛇运动的方向
Game.prototype.bindkey=function(){
document.addEventListener("keydown",function (e) {
switch (e.keyCode){
case 37:this.snake.direction="left";break;
case 38:this.snake.direction="top";break;
case 39:this.snake.direction="right";break;
case 40:this.snake.direction="bottom";break;
}
}.bind(that),false);
};
window.Game=Game;
}());
//测试
var game=new Game(document.querySelector(".map"));
game.init();
</script>背景图：bg.jpg
