La primera cosa que un juego de la serpiente js Nuestro primer paso es utilizar el enfoque orientado a objetos para el pensamiento

Orientada a Objetos

Aquí Insertar imagen Descripción
Serpiente juego que todos conocemos, tenemos que mirar los objetos abstractos serpiente.
En primer lugar, la serpiente en sí mismo puede ser visto como un único objeto de alimentos aparecen aleatoriamente en la pantalla, si se trata de las más primitivas aparece solamente una comida o una versión más amplia de alimentos aparece debe estar de acuerdo con ciertas reglas. Así que la comida aquí es también un objeto.

En primer lugar, el alimento no está asociado con otros objetos, primero determinamos objetos alimentos js.

establecer food.js

/* 食物对象需要的属性,位置x,y,大小,颜色 */
function Food(options){
	options=options||{}; 
	this.x=options.x||0;
	this.y=options.y||0;
	
	
	this.width=options.width||20;
	this.height=options.height||20;
	this.color=options.color||'green';
}
var position="absolute";
/* Food的原型对象
	render方法
	动态创建div */
Food.prototype.render =function(map){
	/* 创建div */
	var div = document.createElement('div');
	map.appendChild(div);
	/* 设置div的样式 */
	div.style.position=position;
	div.style.left=this.x+'px';
	div.style.top=this.y+'px';
	
	div.style.width=this.width+'px';
	div.style.height=this.height+'px';
	div.style.backgroundColor=this.color;
}

/* test */
var map=document.getElementById('map');
var food=new Food();
food.render(map);

Sobre perfecta index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="map"></div>
		
		<script src="js/food.js"></script>
		
		
	</body>
</html>

Aquí observamos que, después de la introducción de food.js a div se indique lo contrario, lo siguiente puede ocurrir o limitada a la siguiente pregunta.

报错: no detectada TypeError: la propiedad no se puede leer 'appendChild' de la indefinida

La razón de este problema no es encontrar el mapa div js módulo de identificación antes de la carga. Así que para recordar todos los js cargados en la declaración espalda div.

Establecer un css

#map {
	width: 800px;
	height: 600px;
	background-color: red;
	position: relative;/* 相对 */
}

bien, se ha demostrado que ser de color rojo con verde en el navegador de Google, si no hay problema
Aquí Insertar imagen Descripción
es tan caliente el ojo. alimentos aún no ha resuelto por completo, cómo hacer que los alimentos aparecen al azar?

conjunto aleatorio alimentos ubicación

Generar un número aleatorio en el valor máximo entre el mínimo

var Tools = {
  getRandom: function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) +  min;
  }
}

bien sólo nuestra posición xey es el valor predeterminado, por lo que se dedicó a X e Y en div sino a la (al azar).

Considere el problema de límites de números aleatorios : En esencia, somos coordenadas aleatorias, coordenadas aleatorias 0:00 es posible colocar los alimentos en el mapa, esto es más fácil que pensar. Max en la frontera de la misma, en primer lugar tiene su propio ancho de mapa y la altura de los primeros en venir a nosotros para obtener el ancho de x (altura e y empatía) define los alimentos en food.js 20 píxeles de anchura en
el ancho de 800px MAP se define en el css por la cantidad de lata el primero es el mapa de bloques discernir alimentos colocados horizontalmente visto, puede poner a 40
, pero puede ser igual a un máximo de 40 ella? La respuesta es no, porque igual a 40, porque estamos buscando las coordenadas, para ampliar la comida, de hecho, no pertenece al ámbito del mapa.
Por lo tanto max = 40-1 = 39

De este modo se obtiene una nueva representación de las coordenadas X e Y:

this.x=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width;
this.y=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height;

Aquí Insertar imagen Descripción
Ha sido al azar espectáculos, se encuentra una importante reglas del juego: comer la comida.
Así que después de comer a la pantalla al azar, antes del paso a paso la eliminación de los alimentos que hay

Eliminar los alimentos

var elements=[];//存储食物的元素

método aleatorio generación:

var div = document.createElement('div');
	map.appendChild(div);
	/* 记录到数组中 */
	elements.push(div);

function remove(){
	for(var i=elements.length-1;i>=0;i--){
		/* 删除div  调用父元素的removeChild方法删除*/
		elements[i].parentsNode.removeChild(elements[i]);
		/* 删除数组中的数据 
		第一个参数从哪个元素开始删除
		第二个参数删除几个*/
		elements.splice(i,1);
	}
}

Dado que la función de llamada mejorado

En primer lugar, ya que el propósito es llamar la función para crear un ámbito local, realizar llamadas de seguimiento, etc el mismo nombre no aparece

(function(){
})()

Antes de escribir el código en la función se puede
señalar aquí que un pequeño problema
método alimentaria en función del ámbito local, por lo menos llamadas externas

/* window下的函数全局可访问,创建自调用函数之后,局部作用域使得外部的测试代码无法调用food方法 */
	window.Food=Food;

Orientado a Objetos objeto de alimentos es casi completa

Construcción de objetos de serpiente

Rendering ideas y objetos de alimentos serpiente objetos Del mismo modo, la orientación del objeto que se prescribe serpiente y el cuerpo, el cuerpo con la matriz de almacenamiento predeterminada, cada elemento representa el cuerpo de una serpiente una sección serpiente.

(function(){
	var position ='absolute';
function Snake(options){
	options=options||{};
	/* 蛇节大小和行进方向 */
	this.width =options.width||20;
	this.height=options.height||20;
	this.derection=options.derection||'right';
	/* 蛇身体 */
	this.body=[
		{x:3,y:2,color:'red'},
		{x:2,y:2,color:'blue'},
		{x:1,y:2,color:'blue'}
	];
}	


Snake.prototype.render=function(){
	for(var i=0,len =this.body.length;i<len;i++){
		var object =this.body[i];
		var div=document.createElement('div');
		map.appendChild(div);
		/* 设置postion的目的是脱离文档流 在上面新建一个var postion*/
		div.style.position=position;
		/* 设置大小 */
		div.style.width=this.width+'px';
		div.style.height=this.height+'px';
		/* 设置坐标，颜色 */
		div.style.left=object.x*this.width+'px';
		div.style.top=object.y*this.height+'px';
		div.style.backgroundColor=object.color;
	}
}

window.Snake=Snake;
})()

Aquí Insertar imagen Descripción

js de inicio

Antes de añadir las pruebas después de un período de js código de prueba, para iniciar un js en lugar de crear un código de prueba independiente

(function(){
	function Game(map){
		/* 依赖于food和snake */
		this.food=new Food();
		this.snake=new Snake();
		this.map=map;
		
	}
	
	Game.prototype.start=function(){
		/* 把蛇和食物对象渲染到地图
		开始游戏的逻辑 */
		this.food.render(this.map);
		this.snake.render(this.map);
		
		
	}
	
	window.Game=Game;
	
})();

var map=document.getElementById('map');
var game =new Game(map);
game.start();

Game.js función es reemplazar el código de prueba anterior, por lo que en primer lugar depende de los dos primeros js alimentos y serpientes, a continuación, se puede representar de acuerdo con su método render. Como antes, el efecto de, no los dibujos.

Movimiento de serpiente de control

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;
		
	}
	/* 蛇头 */
	var head =this.body[0];
	switch(this.direction){
		case'right':
		head.x+=1;
		break;
		
		case'left':
		head.x-=1;
		break;
		
		case'top':
		head.y-=1;
		break;
		
		case'bottom':
		head.y+=1;
		break;
	}
}

Serpiente durante el traslado, la necesidad de eliminar la sección de serpiente antes de serpiente en movimiento.
Del mismo modo los alimentos:

/* 私有成员函数 删除参照food*/
function remove(){
	/* 从后往前删除 */
	for(var i=elements.length-1;i>=0;i--){
		/* 删除div */
		elements[i].parentNode.removeChild(elements[i]);
		elements.splice(i,1);
	}
}

Deje que la serpiente continúa moviéndose

 // 私有的函数  让蛇移动
   function runSnake() {
     var timerId = setInterval(function () {
       // 让蛇走一格
       // 在定时器的function中this是指向window对象的
       // this.snake
       // 要获取游戏对象中的蛇属性
       that.snake.move();
       that.snake.render(that.map);

        // 2.2  当蛇遇到边界游戏结束
        // 获取蛇头的坐标
        var maxX = that.map.offsetWidth / that.snake.width;
        var maxY = that.map.offsetHeight / that.snake.height;
        var headX = that.snake.body[0].x;
        var headY = that.snake.body[0].y;
        if (headX < 0 || headX >= maxX) {
          alert('Game Over');
          clearInterval(timerId);
        }

        if (headY < 0 || headY >= maxY) {
          alert('Game Over');
          clearInterval(timerId);
        }
     }, 150);
   }

Aquí utilizado que, en el var that; that = this;// 记录游戏对象ya definido anteriormente, para la obtención de este.

Mediante el control de la dirección del movimiento de la serpiente teclado

   // 通过键盘控制蛇移动的方向
  function bindKey() {
    // document.onkeydown = function () {};
    document.addEventListener('keydown', function (e) {
      // console.log(e.keyCode);
      // 37 - left
      // 38 - top
      // 39 - right
      // 40 - bottom
      switch (e.keyCode) {
        case 37: 
          that.snake.direction = 'left';
          break;
        case 38:
          that.snake.direction = 'top';
          break;
        case 39:
          that.snake.direction = 'right';
          break;
        case 40:
          that.snake.direction = 'bottom';
          break;
      }
    }, false);
  }

coma alimentos

/* 判断蛇头是否和食物坐标重合 需要food 和map 在move方法中添加两个参数，同时game也需要添加两个参数*/
	var headX=head.x*this.width;
	var headY=head.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
		})