Serpent nous avons tous joué, mais vous fera chose? On dirait regard dur, en fait très simple homme de peu de mots dit, directement sur le code que
nous écrivons première structure dom
<div id = "content">
<div id = "serpent">
<div class = "caisse de tête"> </ div>
<div class = "box"> </ div>
</div>
</div>Ce qui, du contenu pour la mise en page entière de la grande boîte, le serpent est un serpent à l'intérieur de la boîte est son corps, afin de distinguer la tête de la première case, nous avons ajouté un nom pour distinguer la tête, puis nous allons ajouter css
<style>
.box {
width: 60px;
hauteur: 60px;
background-color: red;
position: absolute;
gauche: 0;
top: 0;
line-height: 60px;
}
.Head {
background-color: YellowGreen;
}
</ Style>
Nous chaque section à l'ensemble de la largeur de serpent et de la hauteur à 60 pixels, et a donné une position, parce que si nous ne situons pas, ne pouvait pas le faire sortir du flux de documents (flottant dans la page), et le suivi ne peut pas passer par la gauche et le haut juger ses coordonnées.
Bon donc nous avons eu un beau serpent (oie naturelle ne voit pas où belle - -). Quoi? Vous me demandez qui est allé à sa tête, très simple, en plus de l'élément après le positionnement des éléments derrière écrasera l'élément précédent, de sorte que la tête et le corps se chevauchent , vous ne pouvez pas le voir.
Ensuite , nous devons laisser le mouvement serpent droite, stock code requête www.gendan5.com/topic/lcSearch.html Alors , comment pouvons-nous le laisser déplacer? Le principe est très simple, on peut régler une minuterie à chaque fois que le laisser se déplacer, et comment lui laisser le déplacer, il suffit de définir une valeur, de sorte que la valeur de chaque mouvement sur + = 60, puis vers le haut et vers le bas par le juge se déplacer ou se déplacer vers la gauche pour les éléments et l' attribution haut. Nous écrivons la logique de code, est sorti le code suivant
<script>
var = boxs document.querySelectorAll ( "boîte".);
var snake_x = 0;
var snake_y = 0;
tour var = "right";
setInterval (function () {
snakeMove ();
}, 100)
fonction snakeMove () {
commutateur (tour) {
case "droite": snake_x + = 60; break;
cas "gauche": snake_x - = 60; pause;
cas "top": snake_y - = 60; pause;
cas "bottom": snake_y + = 60; break;
}
for(var i = boxs.length - 1; i > 0 ; i --){
boxs[i].style.left = boxs[i - 1].style.left;
boxs[i].style.top = boxs[i - 1].style.top;
}
boxs[i].style.left = snake_x + "px";
boxs[i].style.top = snake_y + "px";
}document.onkeydown = function (evt) {
var e = evt || un événement;
var keyCode = e.keyCode || e.which;
interrupteur (codeTouche) {
cas 37: tour = "left"; break;
cas 38: tour = "top"; rupture;
cas 39: tour = "right"; break;
cas 40: tour = "bas"; break;
}
}
</ Script>
Le code ci-dessus, nous donnons les coordonnées x et y de la position initiale du serpent sont à 0, et la valeur par défaut initial tout de suite, en saisissant les touches de direction du clavier pour changer sa direction. Parmi eux, les mensonges de difficulté
for (var i = boxs.length - 1; i> 0; i -) {
boxs [i] = .style.left boxs [i - 1] .style.left;
boxs [i] = .style.top boxs [i - 1] .style.top;
}
boxs[i].style.left = snake_x + "px";
boxs[i].style.top = snake_y + "px";Ce bloc de code, le but de ce code est de suivre les éléments derrière la marche avant, il est de laisser chaque morceau du corps d'un serpent et a continué à un mouvement, les livres de paie non agricoles, puis enfin donner de la tête à snake_x et snake_y les valeurs de courant peut, en formant ainsi une première (tête) est la coordonnée valeur snake_x, les changements de snake_y en temps réel, la valeur du second bloc avant le premier bloc, le troisième bloc vers le second bloc avant de la valeur. . . Donc obtenir un corps de tête pour aller de pair avec l'effet de
Mais quand vous perdez le code dans un cours d'exécution, vous verrez que ce serpent était trop méchant, mais aller aussi illimité avant après qui est allé à la frontière, et qu'il ne ferait pas ah, ne peut pas laisser le serpent est pas courir, vous devez plus une frontière de serpent
var snake_x_max = document.documentElement.clientWidth ;
var snake_y_max = document.documentElement.clientHeight;if (snake_x> snake_x_max) {
snake_x = 0;
}
If (snake_x <0) {
snake_x = snake_x_max;
}
If (snake_y> snake_y_max) {
snake_y = 0;
}
If (snake_y <0) {
snake_y = snake_y_max;
}
Ici, nous fixons x maximum et y pour la largeur de la fenêtre actuelle et la hauteur, et détermine ensuite si la déclaration, si la coordonnée actuelle est supérieure au maximum, les coordonnées talk courant normalisé 0, 0 est inférieure à ce qu'elle (à savoir à la frontière gauche a ), stocke le courant de coordonnées fixé au maximum, afin qu'il puisse obtenir une limite
Pensez-vous que cette façon de sortir il? nonono, pas de nourriture à manger des serpents, comment peut-il être appelé serpent, il n'y a pas d'âme tintamarre. Ici, nous commençons à faire de la nourriture (ne peut pas laisser le serpent à droite faim).
<Div id = "nourriture">
</div>Puis donnez-lui un autocommutateur
#food {
largeur: 60px;
hauteur: 60px;
position: absolute;
fond: GreenYellow;
}
Alors quels sont les éléments et liant sa valeur gauche et en haut est réglé dans une plage de nombres aléatoires, ce qui peut être fait pour générer une position aléatoire
var fd = document.getElementById ( "food");
fd.style.left = Math.random () snake_x_max + "px";
fd.style.top = Math.random () snake_y_max + "px";
La nourriture est bonne si nous obtenons un généré au hasard
Mais notre nourriture et le serpent semblait avoir peu d'intérêt, après avoir passé et ne mangent pas, donc nous devons lui donner une détection de collision droite, la logique de détection de collision est très simple, il suffit de faire la gauche et la valeur de la tête de la nourriture la valeur absolue de la valeur de soustraction de la gauche <= taille de la nourriture, et la partie supérieure de la tête de la nourriture de la valeur supérieure et la valeur de la soustraction de la valeur absolue de <= taille des aliments, et analogues est prévue de manière moins égale à juger si l'utilisation directe, il faut deux éléments se chevauchent complètement le travail, ce que nous avons besoin est satisfait, même si le bord de la fin, de sorte que cette phase est réduite à une valeur égale à deux à faire. Et puis déterminer quand la tête se retrouve en conflit avec la nourriture, les parties du corps du serpent dans un corps cloné de l'intérieur du serpent, et que la position de la nourriture pour rafraîchir (applicable pour la méthode de clonage paresseuse, cette méthode applique que lorsque le début de serpent paresseux quand un corps est, ne vient pas commencer si le corps de serpent, on ne peut pas cloner un organisme existant, pour créer un nouveau corps par createElement bloquer et ajoutés className ensuite ajouté à l'élément parent au travail). nous mettons ici la logique dans le code
var dl = snake_x;
var dt = snake_y;
var fl = fd.style.left;
var ft = fd.style.top;
var = dv document.querySelectorAll ( "# serpent div");
var sk = document.getElementById ( "serpent");
var a2 = Nombre (fl.substring (0, fl.indexOf ( "px")));
var b2 = Nombre (ft.substring (0, ft.indexOf ( "px")));
if (Math.abs (dl-a2) <= 60 && Math.abs (dt-b2) <= 60) {
fd.style.left = Math.random () 1000 "px";
fd.style.top = Math.random () 800+ "px";
sk.appendChild (dv [1] .cloneNode ());
boxs = document.querySelectorAll ( "boîte.");
}Une méthode dans laquelle une liste de sous-chaîne est parce que le format de la valeur acquise est, par exemple, gauche et en haut « 200px » Un tel tableau ne peut pas être des opérations mathématiques, il devrait Px de couper, et les caractères restants chaîne « 200 » dans un type de nombre peut effectuer des opérations mathématiques.