在前面三篇文章里,我们讲了三个不同的JS文件来一起实现最终的效果,但是在网页加载的时候,每一次都要下载三个JS文件 ,怎样耗费性能,所以我们利用沙箱的隔断作用域的原理,将三个文件放到一起来:最后在HTML结构中只调用一个文件就可以了.
JS实现完整的功能:并且加上了如果贪吃蛇的蛇头与蛇身体的某一个部位接触之后,游戏结束的功能.
这个功能的需求分析:
当贪吃蛇的蛇头与蛇身体的某一个部位接触那么游戏结束.
思路分析:
1.我们先获取蛇头的位置.然后再判断蛇头与蛇身体的部位之间的位置关系是否重叠,如果重叠的话,那么游戏结束,如果不重叠,游戏继续.(游戏继续就是什么都不做,也就是说我们只需要利用不带else的if语句来做一种条件的判断)
ps: if 一种条件判断
if-else 两种互斥条件的判断
if-else-if: 多种条件的判断
JS代码实现:
/*
** Create by Alex on 2018/8/5
*/
(function ( window ) {
var that = null;
//创建游戏对象
function Game ( map ) {
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
//游戏开始
Game.prototype.start = function ( ) {
this.food.render(this.map);
this.snake.render(this.map);
blindKey();
snakeAtuoMove();
}
//让蛇一直动起来
function snakeAtuoMove () {
var timeID = setInterval(function ( ) {
this.snake.snakeMove(this.food,this.map);
this.snake.render(this.map);
//----------------------------蛇的身体如果有重复游戏结束------------------------------
var thisBody = this.snake.body[0];
//为什么从一开始,因为0下标就是蛇头,是去判断蛇头与其他蛇身体的位置的关系
for(var j = 1;j<this.snake.body.length;j++){
if(thisBody.x == this.snake.body[j].x && thisBody.y == this.snake.body[j].y) {
alert('Game over');
clearInterval(timeID);
}
}
//-----------------边界检测--------------------
var snakeHeaderX = this.snake.body[0].x * this.snake.width;
var snakeHeaderY = this.snake.body[0].y * this.snake.height;
if(snakeHeaderX <=0 || snakeHeaderY <=0 || snakeHeaderX >= this.map.offsetWidth || snakeHeaderY >= this.map.offsetHeight ) {
alert('Game over');
clearInterval(timeID);
}
}.bind(that),300);
}
//4 添加按键改变蛇的方向
function blindKey() {
window.onkeydown = function(e) {
//兼容性处理
e = e || window.event;
switch (e.keyCode) {
case 37:
//改变蛇的方向为左.
if(this.snake.direction != "right"){
this.snake.direction = "left";
}
break;
case 38:
//改变蛇的方向为上.
if(this.snake.direction != "bottom"){
this.snake.direction = "top";
}
break;
case 39:
//改变蛇的方向为右.
if(this.snake.direction != "left"){
this.snake.direction = "right";
}
break;
case 40:
//改变蛇的方向为下.
if(this.snake.direction != 'top'){
this.snake.direction = "bottom";
}
break;
}
}.bind(that)
}
window.Game = Game;
}(window));
//原来的Snake.js
(function ( window ) {
var list = [];
//创建蛇的对象
function Snake ( width,height,dir ) {
this.width = width || 20;
this.height = height || 20;
this.direction = dir || 'right';
this.body = [
{x : 3,y : 1,bgColor : 'red'},
{x : 2,y : 1,bgColor : 'yellow'},
{x : 1,y : 1,bgColor : 'purple'},
]
}
//渲染蛇到页面上
Snake.prototype.render = function ( map ) {
removeSnake(map);
for(var i = 0;i<this.body.length;i++){
var div1 = document.createElement('div');
div1.style.width = this.width + 'px';
div1.style.height = this.height + 'px';
div1.style.backgroundColor = this.body[i].bgColor;
div1.style.position = 'absolute';
div1.style.left = this.body[i].x * this.width + 'px';
div1.style.top = this.body[i].y * this.height + 'px';
map.appendChild(div1);
list.push(div1);
}
}
//删除前面的蛇的函数
function removeSnake (map) {
for(var i = 0;i< list.length;i++) {
map.removeChild(list[i]);
}
list.length = 0;
}
//蛇移动的函数
Snake.prototype.snakeMove = 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++; break;
case 'left' : this.body[0].x--; break;
case 'top' : this.body[0].y--; break;
case 'bottom' : this.body[0].y++; break;
}
//---------------------吃食物长身体-------------------------------
var snakeHeaderX = this.body[0].x * this.width;
var snakeHeaderY = this.body[0].y * this.height;
var foodX = food.x;
var foodY = food.y;
if(snakeHeaderX == food.x && snakeHeaderY == food.y) {
this.body.push({
x : this.body[this.body.length - 1].x,
y : this.body[this.body.length - 1].y,
bgColor : getColorForRandom()
})
food.render(map);
}
}
//随机产生一个十六进制的颜色的函数.
function getColorForRandom(){
var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; //下标0-15
var str = "#";
//循环产生 6个 0-15的数.
for(var i = 0 ; i < 6; i++){
var num = Math.floor(Math.random()*16);
//根据这个随机数,在arr数组中去取值.
str += arr[num];
}
return str; //"#985700"
}
window.Snake = Snake;
}(window))
//原来Food.js的代码
(function ( w ) {
//定义一个空数组用来装生成的食物元素
var list = [];
//1.创建一个食物对象
function Food ( width,height,bgColor ) {
this.width = width || 20;
this.height = height || 20;
this.bgColor = bgColor || 'green';
}
//2.在构造函数的原型对象里添加一个在页面上渲染食物的方法
Food.prototype.render = function ( map ) {
//进入移动就清空前面的元素
removeFood(map);
//计算食物在页面该显示的位置
this.x = Math.floor(Math.random()* map.offsetWidth / this.width) * this.width;
this.y = Math.floor(Math.random()* map.offsetHeight / this.height) * this.height;
//创建一个div将食物的属性包起来
var div1 = document.createElement('div');
div1.style.backgroundColor = this.bgColor;
div1.style.width = this.width + 'px';
div1.style.height = this.height + 'px';
div1.style.position = 'absolute';
div1.style.left = this.x + 'px';
div1.style.top = this.y + 'px';
//将这个创建好的div显示到页面上
map.appendChild(div1);
//将创建的每一个div存入数组
list.push(div1);
}
//3. 删除老食物的元素
function removeFood (map) {
for(var i = 0;i<list.length;i++) {
map.removeChild(list[i]);
}
//清空数组
list.length = 0;
}
//4.因为函数的作用域问题,现在需要将接口暴露出来
//将给window对象添加一个food方法,这个方法的名字就是构造函数food
w.Food = Food;
}(window))
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="map" id="map"></div>
<script src="Game.js"></script>
<script>
var map = document.getElementById('map');
var game = new Game(map);
game.start();
</script>
</body>
</html>
贪吃蛇的案例在前端开发中基本不用,但是对于熟悉js语法,Dom操作,以及编程思路最重要的面向对象编程:找一个专门的人来实现这个功能,而这个是就是一个对象,有属性有方法来实现我们的功能.这个案例可以极大的促进面向对象编程的思路.