La première chose qu'un jeu de serpent Notre première étape consiste à utiliser l'approche orientée objet à la réflexion

Orienté objet

Insérer ici l'image Description
Snake jeu nous avons tous savoir, nous devons regarder les objets abstraits serpent.
Tout d' abord, le serpent lui - même peut être considéré comme un objet unique nourriture apparaissent de façon aléatoire sur l'écran, que ce soit le plus primitif apparaît seulement alimentaire ou une version plus étendue de nourriture apparaît doit être conforme à certaines règles. Donc , la nourriture est aussi un objet ici.

Tout d'abord, l'aliment n'est pas associé à d'autres objets, nous avons d'abord déterminer les objets alimentaires js.

établir 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);

A propos index.html parfait

<!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>

nous notons ici que, après l'introduction de food.js à div mention contraire, les éléments suivants peuvent se produire ou se limiter à la question suivante.

报错: Uncaught TypeError: Impossible de lire la propriété 'appendChild' undefined

La raison de ce problème est de ne pas trouver le module carte div id js avant le chargement. Donc, pour se souvenir de tous les js chargés sur la déclaration div arrière.

Mettre en place un autocommutateur

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

ok, il a été démontré que le rouge avec le vert sur le navigateur Google si aucun problème
Insérer ici l'image Description
est si chaud l'œil. nourriture pas encore été complètement résolu, comment faire de la nourriture apparaissent au hasard?

emplacement alimentaire ensemble au hasard

La génération d'un nombre aléatoire à la valeur maximale entre le minimum

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

ok seulement notre position x et y est la valeur par défaut, donc entrepris de x et y dans div mais à la (aléatoire).

Considérons le problème limite de nombres aléatoires : Nous sommes essentiellement des coordonnées aléatoires, 0:00 coordonnées aléatoires peuvent être placés la nourriture sur une carte, cela est plus facile de penser. Max à la frontière de celui - ci, d'abord ont leur propre largeur de la carte et la hauteur des premiers à venir à nous pour obtenir la largeur x (hauteur et empathie y) définit la nourriture dans food.js 20px largeur
la largeur 800px application définie dans le code CSS de combien peut l'ancien est le peut mettre 40 carte de bloc alimentaire vu horizontalement discernant placé,
mais peut être égale à maximum 40 il? La réponse est non, parce égale à 40, parce que nous cherchons les coordonnées, d'élargir la nourriture, en fait, ne pas appartenir à la portée de la carte.
Par conséquent , max = 40-1 = 39

Ainsi, nous obtenons une nouvelle représentation des coordonnées x et 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;

Insérer ici l'image Description
A été au hasard des spectacles, il y a un jeu de règles importantes: manger la nourriture.
Donc , après avoir mangé à l' affichage au hasard, avant l'étape par la suppression de l' étape de la nourriture là - bas

Supprimer la nourriture

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

méthode de génération aléatoire:

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);
	}
}

Étant donné que la fonction d'appel améliorée

Tout d'abord, puisque le but est d'appeler la fonction pour créer une portée locale, faire des appels de suivi, etc. le même nom ne semble pas

(function(){
})()

Avant d' écrire le code dans la fonction peut être
noté ici qu'un petit problème
méthode alimentaire en fonction de la portée locale, donc moins d' appels externes

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

Objet orienté objet sur la nourriture est presque complète

La construction de serpent objets

idées de rendu et des objets alimentaires de serpent objets De même, l'orientation de l'objet à serpent prescrit et le corps, le corps avec la matrice de stockage par défaut, chaque élément représente le corps d'un serpent, une section de serpent.

(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;
})()

Insérer ici l'image Description

js Démarrer

Avant les essais ont été ajoutés après une période de js de code de test, pour commencer un js créer à la place un code de test séparé

(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();

rôle Game.js est de remplacer le code de test précédent, donc d'abord de tout cela dépend des deux premiers la nourriture et les serpents, peuvent ensuite être rendus conformément à sa méthode render. Comme avant l'effet, non pas de dessins.

serpent de commande Mouvement

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;
	}
}

Serpent durant le déménagement, besoin d'enlever la section de serpent avant serpent en mouvement.
De même la nourriture:

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

Que le serpent continue à se déplacer

 // 私有的函数  让蛇移动
   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);
   }

Utilisé ici que, dans le var that; that = this;// 记录游戏对象déjà défini ci - dessus, pour obtenir cela.

En contrôlant la direction du mouvement du serpent du clavier

   // 通过键盘控制蛇移动的方向
  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);
  }

Mangez des aliments

/* 判断蛇头是否和食物坐标重合 需要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
		})