Forwarded from UNIVERS DESIGN
NOTRE NOUVEAU CANAL CINÉMA POUR VOUS. DÉCOUVREZ ET REGARDEZ TOUS VOS FILMS, SÉRIES ET ANIMATIONS EN HD FR ET GRATUITEMENT DÈS LEUR SORTIE 👇
https://t.me/+iKRQ2Nd7YDQyNjI0
https://t.me/+iKRQ2Nd7YDQyNjI0
Telegram
UNIVERS DU CINÉ ™
Canal officiel de l'univers du cinéma sur télégram.
Découvrez vos FILMS, SÉRIES et ANIMATIONS à volonté.
Lien du canal : https://t.me/+iKRQ2Nd7YDQyNjI0
Découvrez vos FILMS, SÉRIES et ANIMATIONS à volonté.
Lien du canal : https://t.me/+iKRQ2Nd7YDQyNjI0
À PARTIR D'OCTOBRE NOUS REPRENONS LES ACTIVITÉS ET NOUS PUBLIERONS RÉGULIÈREMENT.
MANIFESTEZ VOTRE SOUTIEN SVP🙏
MANIFESTEZ VOTRE SOUTIEN SVP🙏
👍2👏2
NOUS LANCERONS DES FORMATIONS GRATUITES POUR TOUS CES DERNIERS MOIS DE L'ANNÉE.
MANIFESTEZ VOTRE INTÉRÊT 👍
MANIFESTEZ VOTRE INTÉRÊT 👍
Qui est partant pour créer un jeu Snake avec HTML et JavaScript ? 👍
10 likes et on le fait
10 likes et on le fait
Il est important que vous soyez attentif pour pouvoir comprendre la suite.
le jeu sera créé en HTML et le script sera en JavaScript.
Les codes sources suffira de cliquer pour copier. Je vous fournirai le code complet à la fin. L'essentiel est de comprendre le processus.
le jeu sera créé en HTML et le script sera en JavaScript.
Les codes sources suffira de cliquer pour copier. Je vous fournirai le code complet à la fin. L'essentiel est de comprendre le processus.
Code HTML :
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Jeu du Serpent</title>
</head>
<body>
<canvas id="canvas" width="500" height="500">
<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous jour</p>
</canvas></body>
</html>CODE HTML :
<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous jour</p>
</canvas>
<!DOCTYPE html>
<html>
<head>
<title>Jeu du Serpent</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"><p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous jour</p>
</canvas>
</body>
</html>Pour lier la balise canvas au JavaScript il faut ajouter les lignes suivantes :
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');Ensuite il faut initialiser les variables que nous allons utiliser. (Vous pouvez utiliser d'autres noms pour vos variables)
var S=50, T=400, D='ArrowLeft', L=2,p=0;
var X=[5,6,7], Y=[5,5,5];
var x=rand(),y=rand();La case dorée devra prendre une position aléatoire à chaque fois que le serpent la touche. il nous faut donc une fonction pour générer un nombre aléatoire.
function rand(){
return Math.floor(Math.random()*10);
}
cette fonction va générer un nombre entier aléatoire entre 0 et 9Pour diriger le serpent la fonction sera :
window.addEventListener("keydown", function(event){
if(event.code=='ArrowUp'){
if(D=='ArrowDown'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
if(event.code=='ArrowDown'){
if(D=='ArrowUp'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
if(event.code=='ArrowLeft'){
if(D=='ArrowRight'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
if(event.code=='ArrowRight'){
if(D=='ArrowLeft'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
}, true);
Vous avez surement remarque la fonction back(). Elle intervient lorsque le serpent dois aller en sens inverse.
window.addEventListener("keydown", function(event){
if(event.code=='ArrowUp'){
if(D=='ArrowDown'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
if(event.code=='ArrowDown'){
if(D=='ArrowUp'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
if(event.code=='ArrowLeft'){
if(D=='ArrowRight'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
if(event.code=='ArrowRight'){
if(D=='ArrowLeft'){
if(X[L]-X[L-1]<0){D='ArrowLeft'}
if(X[L]-X[L-1]>0){D='ArrowRight'}
if(Y[L]-Y[L-1]<0){D='ArrowUp'}
if(Y[L]-Y[L-1]>0){D='ArrowDown'}
back();
}else{D=event.code;}
}
}, true);
Vous avez surement remarque la fonction back(). Elle intervient lorsque le serpent dois aller en sens inverse.