Code du jeu Web Snake
Code du jeu Web Snake
<style>
::sélection {
couleur:#FFFFFF;
fond:transparent;
}
::-moz-sélection {
couleur:#FFFFFF;
fond:transparent;
}
*{
marge:0;
remplissage :0 ;
famille de polices : "VT323" ;
}
corps {
couleur d'arrière-plan :#000000;
}
.wrap {
marge-gauche:auto;
marge droite:auto;
}
en-tête {
largeur:340px;
taille de police:0;
}
toile {
affichage : aucun ;
style de bordure:solide;
largeur de bordure : 10 px ;
couleur de la bordure :#FFFFFF;
}
toile: focus {
contour :aucun ;
}
/* Meilleurs styles */
h1 {
display:bloc-en-ligne;
largeur:100px;
taille de police : 32px ;
couleur:#FFFFFF;
}
.score {
display:bloc-en-ligne;
largeur:240px;
taille de police : 20px ;
couleur:#FFFFFF;
aligner le texte : droit ;
}
.score_value {
taille de police: hériter;
}
/* Style de tous les écrans */
#gameover a,#setting a,#menu a {
affichage:bloc;
}
#gameover a,#setting a:hover,#menu a:hover {
curseur:pointeur;
}
#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {
contenu :">";
marge droite : 10px ;
}
/* Style d'écran de menu */
#menu {
affichage:bloc;
largeur:340px;
rembourrage supérieur : 95 px ;
padding-bottom:95px;
taille de police : 40px ;
marge-gauche:auto;
marge droite:auto;
texte-align:center;
couleur:#FFF;
}
#menuh2 {
-webkit-animation:logo-ani 1000ms linéaire infini ;
animation:logo-ani 1000ms linéaire infini ;
marge inférieure : 30px ;
}
#menua {
taille de police : 30px ;
}
@-webkit-keyframes logo-ani {
50 % {
-webkit-transform:scale(1.3,1.3);
}
100% {
-webkit-transform:scale(1.0,1.0);
}
}@keyframes logo-ani {
50 % {
transformer:scale(1.3,1.3);
}
100% {
transformer:scale(1.0,1.0);
}
}/* Style de jeu sur écran */
#gameover {
affichage : aucun ;
largeur:340px;
rembourrage supérieur : 95 px ;
padding-bottom:95px;
marge-gauche:auto;
marge droite:auto;
texte-align:center;
taille de police : 30px ;
couleur:#FFF;
}
#gameover p {
marge supérieure : 25 px ;
taille de police : 20px ;
}
/* Style d'écran des paramètres */
#paramètre {
affichage : aucun ;
largeur:340px;
marge-gauche:auto;
marge droite:auto;
rembourrage-top : 85px ;
padding-bottom:85px;
taille de police : 30px ;
couleur:#FFF;
texte-align:center;
}
#réglage h2 {
marge inférieure : 15px ;
}
#réglage p {
marge supérieure : 10 px ;
}
#paramètre d'entrée {
affichage : aucun ;
}
#setting label {
curseur:pointeur;
}
#setting input : coché + étiquette {
couleur d'arrière-plan :#FFF;
couleur:#000;
}
</style>
</tête>
<body><script src="/demos/googlegg.js"></script>
<header class="wrap">
<h1>Serpent</h1>
<p class="score">Score : <span id="score_value">0</span></p>
</en-tête>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>
<!-- Jeu sur écran -->
<div id="gameover">
<h2>Game Over</h2>
<p>appuyez sur <span style="background-color: #FFFFFF; color: #000000">space</span> pour commencer un</p>
<a id="newgame_gameover">nouveau jeu</a>
<a id="setting_gameover">settings</a>
</div>
<!-- Écran de réglage -->
<div id="setting">
<h2>Paramètres</h2>
<a id="newgame_setting">nouveau jeu</a>
<p>Vitesse :
<input id="speed1" type="radio" name="speed" value="120" vérifié/>
<label for="speed1">Lent</label>
<input id="speed2" type="radio" name="speed" value="75" />
<label for="speed2">Normal</label>
<input id="speed3" type="radio" name="speed" value="35" />
<label for="speed3">Rapide</label>
</p>
贪吃蛇网页小游戏代码是一款简单黑白风格好玩的在线网页小游戏特效。
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe
Organisation d'effets spéciaux courants sur des pages Web : Avancé
23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Chapitre avancé 1. différentes périodes
Organiser des effets spéciaux courants sur des pages Web : niveau élémentaire
23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Niveau élémentaire 1. Laisse les mots continuer
Organiser des effets spéciaux courants sur des pages Web : niveau intermédiaire
23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Niveau intermédiaire 1. compte à rebours des vacances
Gdévelopper les fonctionnalités du moteur de jeu o code.
15 Nov 2024
Le développement de jeux devient désormais facile si l’échelle de votre projet n’est pas si grande. J'utilisais le moteur de jeu Unity pour développer les jeux mais j'en avais marre d'écrire ou de générer des codes pour les fichiers de scripts. J'étais passé par le moteur de jeu Gdevelop 5. Il faut
Du concept au code : créer un jeu simple Endless Runner
07 Nov 2024
Créer un jeu de course sans fin est une façon amusante de se plonger dans le développement de jeux. Ces jeux sont simples, addictifs et permettent de nombreux ajustements créatifs. Pensez-y : avec seulement quelques mécanismes simples (courir, sauter, esquiver) vous pouvez réaliser des s
Introduction graphique complète du code du jeu de puzzle HTML5 en 2 heures
04 Mar 2017
Lorsque j'ai appris lufylegend.js, j'ai utilisé lufylegend.js pour développer le premier mini-jeu HTML5 - un puzzle. J'ai également écrit un article de blog pour le montrer : le mini-jeu HTML5 "Intelligence Puzzle" a été publié pour défier votre. pensée. Cependant, j'étais nouveau dans le développement de jeux à cette époque et j'avais peu d'expérience, donc je n'ai pas étudié les défauts d'algorithme et de code du jeu, ce qui a entraîné de nombreux bugs dans le jeu, et il était même possible que les énigmes ne puissent pas être résolues. restauré après avoir été perturbé. Récemment, des amis me posent souvent des questions sur ce jeu. Ils espèrent que je pourrai corriger les bugs du code pour faciliter l'apprentissage des débutants. D'ailleurs, j'ai également l'intention de tester ma vitesse d'écriture d'un si petit jeu, donc... .
Plug-in d'effets spéciaux de feux d'artifice réalistes basé sur un canevas HTML5
18 Jan 2017
jquery-fireworks est un plug-in jQuery pour des effets spéciaux de feux d'artifice réalistes basés sur HTML5 Canvas. Le plugin est simple à utiliser et librement configurable. Il peut générer des effets de feux d'artifice réalistes dans un conteneur div.
Comment accéder aux propriétés d'objet avec des caractères spéciaux en JavaScript ?
01 Jan 2025
Accès aux propriétés d'objet avec des caractères spéciauxAccès aux propriétés d'objet avec des caractères spéciaux, tels que des points ou autres...
Code de jeu de backgammon Java implémenté sur la base du swing
24 Dec 2016
Cet article présente principalement le code du jeu de backgammon implémenté en Java basé sur le swing. Il implique principalement l'utilisation d'une interface graphique et de tableaux. Il a une bonne valeur de référence. Les amis qui en ont besoin peuvent s'y référer.
Outils chauds Tags
Hot Tools
jQuery+Html5 réalise un magnifique code d'animation de confession
jQuery+Html5 implémente un magnifique code d'animation de confession, l'effet d'animation est génial, un incontournable pour que les programmeurs se confessent !
Code d'effets spéciaux js pour la confession romantique d'un couple
Code d'effets spéciaux JS pour la confession romantique des couples. De tels effets spéciaux peuvent être utilisés sur des sites Web de photographie de mariage ou placés sur des sites Web personnels. C'est également un bon effet spécial que le site Web chinois PHP recommande de télécharger !
Simple js aime l'artefact de confession
Artefact de confession d'amour simple en js natif
Effets expressifs d'animation de particules HTML5 de Bunker
Code d'effets spéciaux d'expression d'animation de particules HTML5 de Bunker, le texte des effets spéciaux d'animation peut être modifié dans le code, vous pouvez créer une page, vous pouvez personnaliser la saisie de texte, il devrait être très populaire, cet effet spécial HTML5 est très beau.
Modèle d'interface de connexion en arrière-plan réactif jQuery
Code source HTML du modèle d'interface de connexion backend réactif jQuery. La page de connexion utilise jquery pour vérifier le formulaire et déterminer si le nom d'utilisateur et le mot de passe répondent aux exigences. Habituellement, la page de connexion est une page qui doit être utilisée sur les sites Web d'entreprise ou les sites Web réactifs des centres commerciaux. pages, lorsque le navigateur effectue un zoom avant ou arrière, l'arrière-plan redimensionnera l'image en fonction du navigateur ! Le site Web chinois PHP recommande le téléchargement !