Die Vollversion von JavaScript Snake ist vollständig annotiert und objektorientiert
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<title>Snake v2.4</title>
<Stil>
Körper{
Schriftgröße:9pt;
}
Tisch{
border-collapse: Zusammenbruch;
Grenze:solid #333 1px;
}
td{
Höhe: 10px;
Breite: 10px;
Schriftgröße: 0px;
}
.gefüllt{
Hintergrundfarbe:blau;
}
</style>
</head>
<Skript>
Funktion $(id){return document.getElementById(id);}
/***************************************************** ***** ***************
* Javascript Snake v2.4 <br />
* In Version 2.4 wurde die Körperfarbe der Schlange korrigiert, sodass sie sich mit der Vorwärtsbewegung der Schlange bewegt
************************************************** * ************/
//Gierige Schlangen
var Schlange = {
Tabelle: null,
/**
* Körper: Schlangenkörper, jeder Abschnitt der Schlange wird im Array platziert,
* Datenstruktur {x:x0, y:y0, color:color0},
* x, y repräsentiert Koordinaten, Farbe repräsentiert Farbe
**/
Körper: [],
//Die aktuelle Bewegungsrichtung, die Werte 0, 1, 2, 3 repräsentieren jeweils oben, rechts, unten, links. Drücken Sie die Richtungstasten der Tastatur, um sie zu ändern
Richtung: 0,
// Timer
Timer: null,
//Geschwindigkeit
Geschwindigkeit: 250,
//Ob es pausiert wurde
pausiert: wahr,
//Anzahl der Zeilen
Zeilenanzahl: 30,
//Anzahl der Spalten
colCount: 30,
//Initialisierung
init: function(){
var farben = ['rot','orange','gelb','grün','blau','lila','#ccc'];
this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//Erzeuge die anfängliche Bewegungsrichtung
this.direction = Math.floor(Math.random()*4);
//Tabelle erstellen
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);
}
}
//Generiere 20 lose Knoten
for(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);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = farben[colorIndex];
}
}
//Schlangenkopf erzeugen
while(true){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
brechen;
}
}
this.paused = true;
//Tastaturereignis hinzufügen
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
Fall 13: {
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
anders{
//Wenn es keine Pause gibt, höre auf, dich zu bewegen
Snake.pause();
Snake.paused = true;
}
brechen;
}
Fall 37:{//links
//Halte die Schlange davon ab, rückwärts zu laufen
if(Snake.direction==1){
brechen;
}
Snake.direction = 3;
brechen;
}
Fall 38:{//up
//Tastenkombinationen funktionieren hier
if(event.ctrlKey){
Snake.speedUp(-20);
brechen;
}
if(Snake.direction==2){// Verhindern Sie, dass die Schlange rückwärts läuft
brechen;
}
Snake.direction = 0;
brechen;
}
Fall 39:{//richtig
if(Snake.direction==3){// Verhindern Sie, dass die Schlange rückwärts läuft
brechen;
}
Snake.direction = 1;
brechen;
}
Fall 40:{//down
if(event.ctrlKey){
Snake.speedUp(20);
brechen;
}
if(Snake.direction==0){// Verhindern Sie, dass die Schlange rückwärts läuft
brechen;
}
Snake.direction = 2;
brechen;
}
}
}
},
//bewegen
move: function(){
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
//Bewege einen Teil des Körpers
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alarm("Spiel vorbei!/nDrücken Sie Neustart, um fortzufahren.");
zurückkehren;
}
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});
//Weil ein Lebensmittel gegessen wird, entsteht ein anderes Lebensmittel
this.generateDood();
zurückkehren;
}
//window.status = this.toString();
var point = this.getNextPos();
//Behalten Sie die Farbe des ersten Abschnitts bei
var color = this.body[0].color;
//Farbe bewegt sich vorwärts
for(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//Ziehe einen Abschnitt vom Schwanz der Schlange ab und füge einen Abschnitt zum Schwanz der Schlange hinzu, um den Effekt der Vorwärtsbewegung der Schlange zu zeigen.
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//Erkunden Sie, wohin Sie als Nächstes gehen sollen
Pause: Funktion(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: function(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//hoch
if(this.direction==0){
y--;
}
//Nach rechts
sonst if(this.direction==1){
x++;
}
//runter
sonst if(this.direction==2){
y++;
}
//links
anders{
X--;
}
//Eine Koordinate zurückgeben
return {x:x,y:y};
},
//Überprüfen Sie, zu welchem Schritt Sie als Nächstes wechseln möchten
checkNextStep: function(){
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;//Wenn die Grenze berührt wird, endet das Spiel
}
for(var i=0; i<this.body.length; i++){
if(this.body[i].x==x&&this.body[i].y==y){
return -1;//Wenn es deinen eigenen Körper berührt, endet das Spiel
}
}
if(this.isCellFilled(x,y)){
return 1;//Da ist etwas
}
return 0;//offener Raum
},
//Löschen Sie den Schlangenkörper
löschen: function(){
for(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//Zeichne den Schlangenkörper
paint: function(){
for(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//Einen Abschnitt löschen
eraseDot: function(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: function(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
//Erhalte die Farbe an einer Koordinate
getColor: function(x,y){
return this.tbl.rows[y].cells[x].style.backgroundColor;
},
//zum Debuggen
toString: function(){
var str = "";
for(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;
},
//Überprüfen Sie, ob ein Koordinatenpunkt gefüllt ist
isCellFilled: function(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
return false;
}
return true;
},
//Neustart
neu starten: function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
},
//beschleunigen
speedUp: Funktion(Zeit){
if(!this.paused){
if(this.speed+time<10||this.speed+time>2000){
zurückkehren;
}
this.speed +=time;
this.pause();
this.move();
}
},
//Essen produzieren.
generierenDood: function(){
var farben = ['rot','orange','gelb','grün','blau','lila','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = farben[colorIndex];
}
}
};
</script>
<body onload="Snake.init();">
/***************************************************** ***** ************<br />
* Javascript Snake v2.4<br />
************************************************** * ************/<br />
<table id="main" cellpacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="Start/Pause" />Klicken Sie auf die linke Schaltfläche oder drücken Sie die Eingabetaste, um das Spiel zu starten/anzuhalten<br />
<input type="button" id="reset" value="Von vorne beginnen" /><br />
<input type="button" id="upSpeed" value="Accelerate" />Klicken Sie auf die linke Schaltfläche oder drücken Sie Strg + ↑, um zu beschleunigen<br />
<input type="button" id="downSpeed" value="Slow down" />Klicken Sie auf die linke Schaltfläche oder drücken Sie Strg + ↓, um langsamer zu werden
<Skript>
$('btn').onclick = function(){
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
anders{
Snake.pause();
Snake.paused = true;
}
};
$("reset").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
</script>
</body>
</html>