La version complète de JavaScript Snake est entièrement annotée et orientée objet
Copiez le code comme suit :
<html>
<tête>
<title>Serpent v2.4</title>
<style>
corps{
taille de police : 9 pt ;
}
tableau{
border-collapse : effondrement ;
bordure : solide #333 1px ;
}
td{
hauteur : 10px ;
largeur : 10px ;
taille de police : 0px ;
}
.rempli{
couleur d'arrière-plan : bleu ;
}
</style>
</tête>
<script>
function $(id){return document.getElementById(id);}
/*************************************************** ***** *************
* serpent javascript v2.4 <br />
* La version 2.4 a corrigé la couleur du corps du serpent pour qu'il bouge à mesure que le serpent avance.
************************************************** * ************/
//Serpents gourmands
var Serpent = {
tbl : nul,
/**
* corps : corps du serpent, chaque section du serpent est placée dans le tableau,
* Structure des données {x:x0, y:y0, color:color0},
* x, y représente les coordonnées, la couleur représente la couleur
**/
corps: [],
//La direction actuelle du mouvement, les valeurs 0, 1, 2, 3, représentent respectivement haut, droite, bas, gauche, appuyez sur les touches de direction du clavier pour la changer
direction: 0,
// minuterie
minuterie : nulle,
//vitesse
vitesse : 250,
//S'il a été mis en pause
en pause : vrai,
//nombre de lignes
nombre de lignes : 30,
//Nombre de colonnes
nombre de cols : 30,
//initialisation
init : fonction(){
var couleurs = ['rouge','orange','jaune','vert','bleu','violet','#ccc'];
this.tbl = $("main");
variable x = 0 ;
var y = 0;
var indexcouleur = 0;
//Générer la direction initiale du mouvement
this.direction = Math.floor(Math.random()*4);
//Construire une table
for(var row=0;row<this.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//Générer 20 nœuds libres
pour(var i=0; i<10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
si(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = couleurs[colorIndex];
}
}
//générer une tête de serpent
tandis que(vrai){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
si(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "noir";
this.body.push({x:x,y:y,color:'black'});
casser;
}
}
this.paused = vrai ;
//Ajouter un événement clavier
document.onkeydown= fonction(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
cas 13 : {
if(Snake.paused){
Serpent.move();
Snake.paused = faux ;
}
autre{
// S'il n'y a pas de pause, arrêtez de bouger
Serpent.pause();
Snake.paused = vrai ;
}
casser;
}
cas 37 :{//gauche
//Empêche le serpent de marcher à reculons
si(Snake.direction==1){
casser;
}
Serpent.direction = 3 ;
casser;
}
cas 38 :{//vers le haut
//Les touches de raccourci fonctionnent ici
si(événement.ctrlKey){
Serpent.speedUp(-20);
casser;
}
if(Snake.direction==2){//Empêcher le serpent de marcher à reculons
casser;
}
Serpent.direction = 0 ;
casser;
}
cas 39 :{//à droite
if(Snake.direction==3){//Empêcher le serpent de marcher à reculons
casser;
}
Serpent.direction = 1 ;
casser;
}
cas 40 :{//vers le bas
si(événement.ctrlKey){
Serpent.speedUp(20);
casser;
}
if(Snake.direction==0){//Empêcher le serpent de marcher à reculons
casser;
}
Serpent.direction = 2 ;
casser;
}
}
}
},
//se déplacer
déplacer : fonction(){
this.timer = setInterval(function(){
Serpent.erase();
Snake.moveOneStep();
Serpent.paint();
}, cette.vitesse);
},
//Déplacer une section du corps
moveOneStep : fonction(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Game over!/nAppuyez sur Redémarrer pour continuer.");
retour;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//Parce qu'un aliment est mangé, un autre aliment est généré
this.generateDood();
retour;
}
//window.status = this.toString();
var point = this.getNextPos();
//Garder la couleur de la première section
var color = this.body[0].color;
//La couleur avance
pour(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//Soustrayez une section de la queue du serpent et ajoutez une section à la queue du serpent pour montrer l'effet du déplacement du serpent vers l'avant.
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//Découvrez où aller ensuite
pause : fonction(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos : fonction(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//en haut
si(this.direction==0){
oui--;
}
//À droite
sinon if(this.direction==1){
x++;
}
//vers le bas
sinon if(this.direction==2){
y++;
}
//gauche
autre{
x--;
}
//Renvoie une coordonnée
retourner {x:x,y:y} ;
},
// Vérifiez quelle est la prochaine étape vers laquelle passer
checkNextStep : fonction(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//Lorsque la limite est touchée, le jeu se termine
}
pour(var i=0; i<this.body.length; i++){
si(this.body[i].x==x&&this.body[i].y==y){
return -1;//Quand il touche votre propre corps, le jeu se termine
}
}
si(this.isCellFilled(x,y)){
return 1;//Il y a quelque chose
}
renvoie 0 ;//espace ouvert
},
//Effacer le corps du serpent
effacer : fonction(){
pour(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//Dessine le corps du serpent
peindre : fonction(){
pour(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//Effacer une section
effacerDot : fonction (x, y) {
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot : fonction (x, y, couleur) {
this.tbl.rows[y].cells[x].style.backgroundColor = couleur;
},
//Obtenir la couleur à une coordonnée
getColor : fonction (x, y) {
renvoie this.tbl.rows[y].cells[x].style.backgroundColor;
},
//pour le débogage
toString : fonction(){
var str = "";
pour(var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
return str;
},
//Vérifie si un point de coordonnées est rempli
isCellFilled : fonction (x, y) {
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
renvoie faux ;
}
renvoie vrai ;
},
//redémarrage
redémarrer : fonction(){
si(ce.timer){
clearInterval(this.timer);
}
pour(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
cette.vitesse = 250 ;
},
//accélérer
speedUp : fonction (temps) {
if(!this.paused){
si(this.speed+time<10||this.speed+time>2000){
retour;
}
this.speed + = temps ;
this.pause();
this.move();
}
},
//Produire de la nourriture.
generateDood : fonction(){
var couleurs = ['rouge','orange','jaune','vert','bleu','violet','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
si(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = couleurs[colorIndex];
}
}
} ;
</script>
<body onload="Snake.init();">
/*************************************************** ***** *************<br />
* serpent javascript v2.4<br />
************************************************** * ************/<br />
<table id="main" cellpacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="Démarrer/Pause" />Cliquez sur le bouton gauche ou appuyez sur Entrée pour démarrer/mettre en pause le jeu<br />
<input type="button" id="reset" value="Recommencer" /><br />
<input type="button" id="upSpeed" value="Accélération" />Cliquez sur le bouton gauche ou appuyez sur Ctrl + ↑ pour accélérer<br />
<input type="button" id="downSpeed" value="Ralentir" />Cliquez sur le bouton gauche ou appuyez sur Ctrl + ↓ pour ralentir
<script>
$('btn').onclick = fonction(){
if(Snake.paused){
Serpent.move();
Snake.paused = faux ;
}
autre{
Serpent.pause();
Snake.paused = vrai ;
}
} ;
$("reset").onclick = fonction(){
Serpent.restart();
this.blur();
} ;
$("upSpeed").onclick = function(){
Serpent.speedUp(-20);
} ;
$("downSpeed").onclick = function(){
Serpent.speedUp(20);
} ;
</script>
</corps>
</html>