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>
貪吃蛇網(wǎng)頁(yè)小游戲代碼是一款簡(jiǎn)單黑白風(fēng)格好玩的在線網(wǎng)頁(yè)小游戲特效。
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
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
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...
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
Kingdom Come: Deliverance 2 - Comment brasser Aqua Vitalis
02 Mar 2025
Dans Kingdom Come: Deliverance 2, l'alchimie est la clé de la survie. Craquez des potions puissantes pour la guérison, les buffs et les effets spéciaux en rassemblant des ingrédients et en suivant des recettes précises. Le timing est crucial; étapes prudentes assurent la qualité des potions et les effets
Comment réaliser un effet exceptionnel au milieu de la barre de progrès à travers le CSS?
05 Apr 2025
Méthodes Pour réaliser des effets exceptionnels intermédiaires dans le CSS dans le développement quotidien frontal, nous rencontrons souvent des besoins de conception spéciaux, tels que comment être au milieu de la barre de progrès ...
Comment utiliser des CSS purs pour obtenir l'effet des couleurs des éléments alternés par n% 3?
05 Apr 2025
La technique d'utilisation de CSS pure pour réaliser l'effet alternatif des couleurs des éléments par n% 3. Dans le développement frontal, nous devons parfois mettre en ?uvre des effets visuels spéciaux, comme sur la base des éléments ...
Dragon Ball: Sparking Zero - Guide de personnage Piccolo (Super Hero)
24 Jan 2025
Ce guide complet explore le gameplay diversifié de Piccolo (Super Héros) dans Dragon Ball : Sparking Zero, couvrant ses trois formes : base, éveillé et Orange Piccolo, y compris sa forme géante. Nous examinerons ses combos uniques, ses compétences, ses effets spéciaux
Comment corriger le code d'erreur PS4 CE-34878-0 (Erreur de crash du jeu)
05 Aug 2025
Restartyourps4properly par maintien de la puissance de la prestation de choses
CSGO Effets spéciaux Blocsbuster Films HD Voir l'entrée pour regarder les films Blocsbuster à effet spécial à haute définition CSGO directement
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) est un tireur à la première personne aimé des joueurs du monde entier. Ses compétitions passionnantes et ses vidéos d'effets spéciaux de haute qualité ont toujours été des sujets pour parler des joueurs. Qu'il s'agisse des ligues professionnelles passionnantes ou du match amical entre les joueurs ordinaires, cela peut montrer des effets et des stratégies spéciaux incroyables dans le jeu. Cet article vous présentera en détail comment trouver et regarder les blockbusters d'effets spéciaux CSGO en détail pour vous assurer que vous pouvez vivre le meilleur plaisir visuel.
Outils chauds Tags
Outils chauds
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?!