Commentaire: Eating Snake, les principales fonctions: 1. Le mouvement du serpent 2. Changez la direction du serpent 3. Placez la nourriture 4. Augmentez le sacrifice de soi 5. Comment l'accrocher, l'implémentation spécifique est la suivante. Il est simple et pratique en 60 lignes. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
J'ai rarement prêté attention à HTML5 dans le passé. Je pense que le choix du HTML est devenu progressivement une tendance, donc je veux le savoir. J'ai trouvé un jeu pour l'apprendre. Après avoir écrit ce jeu, je sentais que HTML5 et JS étaient très étroitement intégrés, si JS n'était pas particulièrement bon. Je suppose que j'ai besoin de prendre un tutorat JS en premier. Ce n'est que mon conseil personnel et peut ne pas être exact. Une autre chose est que vous devriez être particulièrement clair sur votre pensée et votre logique, sinon l'écriture de jeux peut être douloureuse.Les fonctions principales des serpents gourmands: 1. Le serpent se déplace 2. Changez la direction du serpent 3. Placez la nourriture 4. Augmenter le sacrifice 5. Comment l'accrocher.
La première fois que j'ai écrit un jeu, la première fois que j'ai écrit HTML5, c'était très difficile. J'ai fini d'écrire et je vais le partager avec vous. Communication entre eux ... Si vous ne comprenez pas ou si vous n'avez pas de suggestions, laissez-moi un message. . . Le code est très court, seulement 60 lignes.
Mais c'est un produit semi-fini, et c'est terminé. Mettre à jour à nouveau
<! Doctype html>
<html>
<body>
<lebvas> </ canvas>
<script type = "text / javascript">
var c = document.getElementById ("myCanvas");
Var Time = 160; // vitesse de Snake
var cxt = c.getContext ("2d");
var x = y = 8;
var a = 0; // coordonnées alimentaires
var t = 20; // sacrifie votre vie
var map = []; // Enregistrez le chemin de course de serpent
Var Size = 8; // Taille de l'unité du corps de serpent
Var Direction = 2; // 1 en haut 2 à droite 0 gauche 3 vers le bas
interval = window.setinterval (set_game_speed, time); // déplacer le serpent
fonction set_game_speed () {// déplacer le serpent
commutateur (direction) {
Cas 1: Y =-Size; Break;
Cas 2: x = x + taille; pause;
cas 0: x = x-size; pause;
Cas 3: Y = Y + Taille; Break;
}
if (x> 400 || y> 400 || x <0 || y <0) {
Alert ("Vous êtes mort, continuez à travailler dur! Raison de l'échec: je frappe un mur ..."); window.location.reload ();
}
pour (var i = 0; i <map.length; i ++) {
if (parseInt (map [i] .x) == x && parseInt (map [i] .y) == y) {
Alert ("Vous êtes mort, continuez à travailler dur! La raison de l'échec: je suis tombé sur moi-même ..."); window.location.reload ();
}
}
if (map.length> t) {// gardez votre longueur sacrificielle
var cl = map.shift (); // Supprimer le premier élément du tableau et renvoyer l'élément d'origine
cxt.clearrect (cl ['x'], cl ['y'], taille, taille);
};
map.push ({'x': x, 'y': y}); // ajouter des données à la fin du tableau d'origine
cxt.fillStyle = "# 006699"; // Couleur de remplissage interne
cxt.strokestyle = "# 006699"; // Couleur de bordure
cxt.fillrect (x, y, taille, taille); // dessiner un rectangle
if ((a * 8) == x && (a * 8) == y) {// manger de la nourriture
rand_frog (); t ++;
}
}
document.onkeydown = fonction (e) {// modifie la direction du serpent
var code = e.KeyCode - 37;
commutateur (code) {
cas 1: direction = 1; pause; // sur
Cas 2: Direction = 2; pause; // à droite
Cas 3: Direction = 3; Break; // Suivant
cas 0: direction = 0; pause; // gauche
}
}
// place au hasard de la nourriture
fonction rand_frog () {
a = math.ceil (math.random () * 50);
cxt.fillStyle = "# 00000"; // Couleur de remplissage interne
cxt.strokestyle = "# 00000"; // Couleur de bordure
cxt.fillrect (a * 8, a * 8, 8, 8); // dessiner le rectangle
}
// place au hasard de la nourriture
rand_frog ();
</cript>
</docy>
</html>