JS 经典案例：贪食蛇游戏
2019-08-27 本文已影响0人
璎珞纨澜
我们再来回顾一下面向对象的编程思想：
根据需求，抽象出相关的对象，总结对象的特征和行为，把特征变成属性，行为变成方法，然后定义（js）构造函数，实例化对象，通过对象调用属性和方法，完成相应的需求。
我们今天要利用面向对象的编程思想，利用 JS 写一个很熟悉的贪食蛇游戏：
贪食蛇游戏
分析案例：
地图：宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的，这里的小蛇和食物都是地图的子元素，随机位置显示，脱离文档流的，地图也需要脱离文档流。--- css需要设置：宽、高、背景颜色、脱标
食物 --- div元素
elements --- 存储 div 的数组（将来删除的食物 div 时候，先从 map 中删除 div，再从数组中移除 div）
食物：宽，高，背景颜色，横坐标，纵坐标
一个食物就是一个对象，这个对象有相应的属性，这个对象需要在地图上显示。最终要创建食物的对象，先有构造函数，并且把相应的值作为参数传入到构造函数中。
食物要想显示在地图上，食物的初始化就是一个行为
- 食物的构造函数 -> 创建食物对象
- 食物显示的方法 -? 通过对象调用方法，显示食物，设置相应的样式
2.1.1 因为食物要被小蛇吃掉，吃掉后应该再次出现食物，原来的食物就删除了
2.1.2 每一次初始化食物的时候先删除原来的食物，然后重新的初始化食物
2.1.3 通过一个私有的函数删除地图上的食物，同时最开始的时候食物也相应的保存到一个数组中，再从这个数组中把食物删除
最后，把食物的构造函数给 window 的属性，这样外部就可以直接使用这个食物的构造函数了局部变量变成全局变量。
小蛇：每个身体都有宽，高，方向，身体分三个部分，每个部分都是一个对象，每个部分都有横纵坐标，背景颜色。
小蛇要想显示在地图上，先删除之前的小蛇，然后再初始化小蛇
小蛇要移动：
把小蛇的头的坐标给小蛇的第一部分的身体，第一部分的身体的做标给下一个部分的身体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.map{
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
<script>
// 自调用函数 --- 食物的
;(function(){
var elements = [] //用来保存每个小方块食物的
function Food(x,y,width,height,color){
this.x = x || 0
this.y = y || 0
this.width = width || 20
this.height = width || 20
this.color = color || "green"
}
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"
elements.push(div)
}
function remove(){
for(i=0;i<elements.length;i++){
var ele = elements[i]
ele.parentNode.removeChild(ele)
elements.splice(i,1)
}
}
window.Food = Food // 向外暴露食物构造函数
}());
//自调用函数 --- 小蛇
;(function(){
var elements = [] //用来存放小蛇的每个身体部分
function Snake(width, height,direction){
this.width = width || 20
this.height = height || 20
this.body = [
{x:3,y:2,color:"red"},
{x:2,y:2,color:"orange"},
{x:1,y:2,color:"orange"}
]
this.direction = direction || "right"
}
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.position="absolute"
div.style.width=this.width+"px"
div.style.height=this.height +"px"
div.style.left=obj.x*this.width+"px"
div.style.top=obj.y*this.height+"px"
div.style.backgroundColor=obj.color
elements.push(div)
}
}
Snake.prototype.move = function(food, map){
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.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
})
// 把食物删除，重新初始化食物
food.init(map)
}
}
//删除蛇身体
function remove(){
for(var i = elements.length-1;i>=0;i--){
var ele = elements[i]
ele.parentNode.removeChild(ele) //从map地图上删除子元素
elements.splice(i,1)
}
}
window.Snake=Snake
}())
//自调用游戏对象
;(function(){
var that = null
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 timerId = setInterval(function(){
this.snake.move(food, map)//这里不能用 this，因为定时器里的this不是Game对象，而是window对象
this.snake.init(map)
var maxX = map.offsetWidth/this.snake.width
var maxY = map.offsetHeight/this.snake.height
var headX = this.snake.body[0].x
var headY = this.snake.body[0].y
if(headX<0 || headX>=maxX){
clearInterval(timerId)
alert("撞墙啦，游戏结束~~~")
}
if(headY<0 || headY>=maxY){
clearInterval(timerId)
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 = "bottom"
break
case 39:
this.snake.direction = "right"
break
case 40:
this.snake.direction = "top"
break
}
}.bind(that), false)
}
window.Game = Game
}())
var gm = new Game(document.querySelector(".map"))
gm.init()
</script>
</body>
</html>
一般来说，我们会将 script 中不同的功能：食物、小蛇、游戏的自定义函数分别定义到不同的 js 文件中，然后在页面中引用这个 js 文件，从而让代码更为清晰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.map{
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
<script src="food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>
var gm = new Game(document.querySelector(".map"))
gm.init()
</script>
</body>
</html>
