Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript ist einfach und gierig, grundsätzlich objektorientiert

高洛峰
Freigeben： 2016-11-25 11:46:40
Original
1142 Leute haben es durchsucht

没有写博客的习惯,这篇算心血来潮,算篇近几天编写的小程序纪实.

      以编写此程序的方式结束Javascript的本阶段的学习.编写的目的在于熟悉javascript的编程方式,包括代码风格,面向对象的运用等.

      回到程序,说说Snake的移动的实现方法.其实很简单,向头部添加Unit,然后删除尾部.其他,参见注释.

 

程序包括一个html文件:snake.html和一个js文件:snake.js

 

     snake.html:

 

JavaScript简单贪吃蛇

   

snake.js:

/*

* JavaScript ist einfach und gierig

* Regeln:

* 1. Keine Wände, links und rechte Verbindung, obere und untere Verbindung.

* 2. Tod, wenn der Schlangenkopf mit sich selbst kollidiert.

* Kompatibilität:

* Unterstützt Firefox und Chrome vollständig

* Unterstützt grundsätzlich IE (mit Ausnahme des Debugging-Teils)

*

* Autor: pcenshao

* Bitte geben Sie die Quelle für den Nachdruck an:

* http: //blog.csdn.net/pywepe

* http://pcenshao.taobao.com

*/

(function(){

$s = function(){

if(arguments.length == 1){

if(typeof arguments[0] == "string "){

                        return document.getElementById(arguments[0]);                                             [ 0];

                                                                     .PANEL_WIDTH = 30; // Logische Breite

$s.PANEL_HEIGHT = 20; // Logische Höhe

$s.STEP = 250; // Zeit jedes Schritts

$s.HEAD_COLOR = "red"; // Schlangenkopffarbe

$s.BODY_COLOR = "black"; / / Schlangenkörperfarbe

* Lebensmittelfarbe

*/

$s.COLORS = ["blau", "grün", " #494e8f", "#905d1d", "#845538", "#77ac98", "#8552a1"];

 

 /*

 * Debugging-bezogen

* $s.DEBUG Schalter zur Anzeige von Debugging-Informationen

* $s.KEY_UP_DIR_ID Überwacht die Knoten-ID des Richtungsschlüssels. Wenn er nicht vorhanden ist, wird er nicht angezeigt.

* $s.HEAD_LOCATION_ID Überwacht die Knoten-ID der Schlangenkopfposition vorhanden ist, wird es nicht angezeigt $s.HEAD_LOCATION_ID = "headLocation";

$s.Dir = { // Stellt die Richtung dar, erzwungener Aufruf der Methode $s.Dir.UP, Parameterfehler vermeiden

OBEN : {},

UNTEN : {},

LINKS : {},

RECHTS : {},

KEINE : {}

};

$s.State = { // Stellt den Zustand dar

STOP : {},

RUNNGIN : {},

PAUSE : {}

};

$s.Unit = function(){ // Eine Zelle, angezeigt Aus Sicht von MVC ist Unit das Modell und UnitView die Ansicht

this.x = 0;

this.y = 0;

this.view = new $s.UnitView();

this.view.unit = this;

this.color = $s.BODY_COLOR;

};

$s.Unit.prototype.repaint = function(){

if(this.view != null){

this.view.repaint(); // Repaint benachrichtigen

}                                                         🎜>

};

$s.Snake.prototype.init = function(dir,count){

var x = 5;

var y = 5;

for(var i = 0 ; i < count ; i ++){

var u = new $s.Unit();

u.x = x ;

u.y = y ++;

this.units.push(u);

if(i == (count - 1 )){

u.color = $s.HEAD_COLOR ;

}

u.repaint();

}

};

$s. Snake.prototype.crash = function(x,y){ // Position des Kopfes übergeben, true zurückgeben, um Kollision mit sich selbst anzuzeigen

for(var i = this.units.length - 2; i >= 0 ; i --){ // Ohne den Header selbst

var u = this.units[i];

if(u.x == x && u.y == y) {

                                              ; 🎜>

$s.Snake.prototype.go = function(){

// Bestimmen Sie, ob Essen vor uns liegt

/ / Ob gegen die Wand gefahren werden soll

var _x = 0, _y = 0 ;

var head = this.units[this.units.length - 1];

_x = head.x;

_y = head.y;

var dir = $s.SnakeContext.dir;

$s.SnakeContext.stop();

                                                                         $s.

if(dir == $s.Dir. LINKS){

_x --;

}else if(dir == $ s.Dir.RIGHT){

_x ++;

}else if(dir == $s.Dir.UP){

_y --;

}else if (dir == $s.Dir.DOWN){

_y ++;

}

🎜>

if(_x >= $s.PANEL_WIDTH){

_x = 0;

}

if(_x < 0){

_x = $s .PANEL_WIDTH - 1;

}

if(_y >= $s.PANEL_HEIGHT){

_y = 0;

}

if(_y < 0){

_y = $s.PANEL_HEIGHT - 1;

}

         

var h = new $ s.Unit(); // Neuer Header

If($s.SnakeContext.hasFood(_x,_y)){ // Der nächste Schritt besteht darin, auf Essen zu stoßen

this.eat(_x,_y);

head = this .units[this.units.length - 1]; // Da die Eat-Methode den Kopf ändern kann, re-acquire

_x = head.x;

_y = head.y;

if (Dir == $ s.dir .right) {

_x ++;

} else if (Dir == $ s.dir.up) {

_y --;

                                                                                                                               COLOR;

head.repaint();

var oldHead = this.units[this.units.length - 2 ];

oldHead.color = $s.BODY_COLOR;

oldHead.repaint();

return;

}

var tail = this.units.shift() ;

$s.NodePool.releaseNode(tail);

This.units.push (h);

                                                                                                                                                                                                                                                                        . Units[i];

If(i == (this.units.length - 1)){ // Head

u.color = $s.HEAD_COLOR;

                                                                                                                                  🎜>

    var food = $s. SnakeContext.food;

if(food != null){

food.alive = false;

this.units .push(food.unit);

.                                                                                                                                                                                     ; 

                                                              > */

$s.Random = {

randomNumber: Funktion (unten, oben) { // Gibt eine Ganzzahl im Bereich [lower,upper] zurück

var choice = Upper - Lower + 1;

                return Math.floor(Math.random() *choices + Lower); // value = Math.floor(Math.random() * Anzahl möglicher Werte + erster möglicher Wert)

},

randomLocation : function(maxX,maxY){

var x = $s.Random.randomNumber(0,maxX);

var y = $ s. Random.randomNumber (0,maxY); 🎜>

This.unit = new $s.Unit();

this.unit.x = x;

this.unit. y = y;

var color = $s.COLORS[$s.Random.randomNumber(0,$s.COLORS. length - 1)];

this.unit.color = color;

this.alive = true;

this.unit.repaint( );

};

$s.Food.prototype.locateOn = function(x,y){

return this.unit.x == x && this.y == y;

};

/*

* HTML-Knotenpool, der Hauptzweck besteht darin, die Effizienz zu verbessern

* Da die Bewegung der Schlange durch das Löschen des Schwanzknotens und das Hinzufügen des Kopfknotens erreicht wird,

* In diesem Prozess wird eine große Anzahl von Knotenerstellungsvorgängen durchgeführt. Aus Gründen der Betriebseffizienz werden die Knoten gebündelt und verwaltet.

* Die Endknoten werden nicht gelöscht versteckt. Sie können wiederverwendet werden, wenn Knoten benötigt werden

*/

$s.NodePool = {

nodes : []

};

$s.NodePool._findHideNode = function(){ // Versteckte Div-Knoten finden

for(var i = 0 ; i < this.nodes.length ; i ++){

var n = this.nodes[i];

if(n.style.display == "none"){

return n; }

return null;

};

$s.NodePool.createNode = function(){

var pooledNode = this._findHideNode();

if(pooledNode != null){

return pooledNode;

}else{

var newNode = document.createElement("div");

this.nodes.push(newNode);

return newNode;

}

};

$s.NodePool. releaseNode = function(node){

if(node ​​​​!= undefiniert && node != null){

                                                                                                         out out out out out out out of (Knoteninstanz von $s. Einheit){         out >

var div = view.node;

div.style.display = "none";

.                                                                                     

        }   

    }

   

    $s.UnitView = function(){ // Unit的视图

        this.unit = null;

        this.node = null;

    };

    $s.UnitView.prototype.repaint = function(){

        if(this.node = = null){ // 初始化

            var tag = $s.NodePool.createNode();

            tag.style.width = $s.UNIT_WIDTH + "px";

            tag.style.height = $s.UNIT_HEIGHT + "px";

            tag.style.borderStyle = "dotted";

            tag.style.borderWidth = "1px";

            tag.style.borderColor = "white";       

            tag.style.margintLeft = "1px";

            tag.style.marginRight = "1px";

            tag.style.marginTop = "1px";

            tag.style.marginBottom = "1px";

            tag.style.backgroundColor =  this.unit.color; // 颜色由模型Unit指定

            tag.style.position = "absolute"; //容器的position指定为relative,孩子的position指定为absolute时,表示孩子相对容器绝对定位.

           

            tag.style.display = "block"; // 重要,因为从NodePool取现的结点是隐藏状态的

           

            var x = this.unit.x * $s.UNIT_WIDTH;

            var y = this.unit.y * $s.UNIT_HEIGHT;

            tag.style.top = y + "px";

            tag.style.left = x + "px";

           

            this.node = tag;

            $s.SnakeContext.panelView.append(this);

       . }else{

            var-Tag = this.node;

           

            var x = this.unit.x * $s.UNIT_WIDTH;

            var y = this.unit.y * $s.UNIT_HEIGHT ;

            tag.style.top = y + "px";

            tag.style.left = x + "px";

            tag.style.backgroundColor = this .unit.color;

        }

    };   

   

    $s.PanelView = function(){ // 整个游戏区域,包括按钮区

        var panel = document.createElement("div");

        panel.style.width = ($s.PANEL_WIDTH * $s.UNIT_WIDTH ) + "px";

        panel.style.height = ($s.PANEL_HEIGHT * $s.UNIT_HEIGHT ) + "px";

        panel.style.borderStyle = "dotted";

        panel.style.borderColor = "red";

        panel.style.borderWidth = "1px ";

        panel.style.marginLeft = "auto";

        panel.style.marginRight = "auto";

panel.style.marginTop = "50px";

panel.style.position = "relative"; // Wenn die Position des Containers als relativ angegeben ist und die Position des untergeordneten Elements angegeben ist als absolut bedeutet dies, dass das untergeordnete Element relativ zum Container ist. Absolute Positionierung.

panel.style.marginBottom = "auto";

this.node = panel;

document.body.appendChild(panel);

                                                                 🎜>

len.style.color = "gray";

len.style.fontSize = "12px";

len.innerHTML = "Length:";

document.body.appendChild(len);

$s.SnakeContext._len = len;

  

   var startBn = document.createElement("button");

    startBn.innerHTML = "Start";

    startBn.style.marginLeft = "10px";

startBn.onclick = function(){

$s.SnakeContext.run();

} ;

$s.SnakeContext._startBn = startB n ;

document.body.appendChild(startBn);

"Pause";

pauseBn. style.marginLeft = "10px";

pauseBn.onclick = function(){

$s.SnakeContext.pause();

$s.SnakeContext._pauseBn = pauseBn;

document.body.appendChild(pauseBn);

🎜> / *

var stopBn = document.createElement("button ");

stopBn.innerHTML = "Stop";

stopBn.style.marginLeft = "10px";

stopBn.onclick = function(){

$s.SnakeContext.stop();

};

$s.SnakeContext._stopBn = stopBn ; >

restartBn.innerHTML = "Restart";

restartBn.style.marginLeft = "10px";

restartBn.onclick = function(){

window .location.href = window.location.href;

};

}; $s.SnakeContext._restartBn = restartBn;

document.body.appendChild(restartBn);

                                                                                                                                                                             (Zeile);

                                                                                                                                                

        span.style.color = "gray";

        span.style.fontSize = "12px";

        span.innerHTML = "调试";

        Dokument .body.appendChild(span);

       

        var debug = document.createElement("input");

        debug.type = "checkbox";       

        debug.checked = $s.DEBUG;

        debug.onchange = function(){

            $s.SnakeContext.setDebug(debug.checked);

        };       

        document.body.appendChild(debug);

       

    };

    $s.PanelView.prototype.append = function(unitView){

        try{

            this.node.appendChild(unitView.node);

        }catch(e){

            Alert(e);   

        }       

    };

   

    /*

     * 全局环境类,代表应用       

     * 约定以_开头的成员为私有成员

     * 启动程序的方法:

     * window.onload = function(){

     *     $s.Sn akeContext.init() ;

     * }

     */

    $s.SnakeContext = {   

        dir : $s.Dir.NONE,

state : $s.State.STOP,

        goTimer : null,       

        run : function(){           

            if(this.state != $s.State.RUNNGIN ){

                this.state = $s.State.RUNNGIN;

               this.goTimer =. window.setInterval(function(){

                                      $s.SnakeContext.updateFood( );

                                                     

                                                },$s.STEP);

            }

           

        },

        stop : function(){

            this._setState($s.State.STOP);

        },

        pause : function(){

            this._setState($s.State.PAUSE);

        },

        _setState : function(s){

            if (this.state != s && this.goTimer != null){

                window.clearInterval(this.goTimer);

               this.goTimer = null;

               this.state =. s;

            }    

        } ,

        getFood : function(x,y){

            for(var f in this.foods){

                if(f.x == x && f.y == y) {

                    return f;   

                }   

            }   

            return null;

       . },

       init : function(){   

            this .panelView = new $s.PanelView();

            this.snake = new $s.Snake();

            this.dir = $s.Dir.DOWN;

            this.snake.init($s.Dir.UP,3);

            this._len.innerHTML = "长度:" +. 3;

           

            Dokument .body.onkeyup = function(e){

                var code = null;

               if(window.event){ // fuck的IE

                   window.event .keyCode;

                }else{

                    code =     e.keyCode;

         .                 var str = "";

                var oldDir = $s.SnakeContext.dir;

               switch(code){

                  case 37: // left

                     . if($s .SnakeContext.dir != $s .Dir.RIGHT){

                            $s.SnakeContext.dir = $s.Dir.LEFT;   

                        }   

                        str = "left";

                        break;

                    case 38 : // up

                        if($s. SnakeContext.dir != $s.Dir.DOWN){

                            $s.SnakeContext.dir = $s.Dir.UP;   

                        }           🎜>

                    case 39: // right

                        if($s.SnakeContext.dir != $s.Dir.LEFT){

                            $s.SnakeContext.dir = $s.Dir.RIGHT;   

                       }           ;

                    case 40: // down

                        if($s. SnakeContext.dir != $s.Dir.UP){

                            $s.SnakeContext.dir = $s.Dir.DOWN;   

                       }                   break;

                }

                if($s.SnakeContext.dir != oldDir){

                   if($s.DEBUG){

                      var v =. $s($s.KEY_UP_DIR_ID);

                        if(v){

                            v.innerHTML = "方向键:" + str;

                       }                       

                    }

                   

                   if($s.SnakeContext.goTimer != null){

                        window.clearInterval($s.SnakeContext.goTimer);

                       $s.SnakeContext.goTimer = null;           

                    }   

                    $s.SnakeContext.snake.go();

                   $s.SnakeContext.goTimer =. window.setInterval(function(){

                                                         $s.SnakeContext.updateFood();

                                                       $s.SnakeContext.snake.go();        

                                                   },$s.STEP);

                }           

            };

           

            var loc = $s.Random.randomLocation($s.PANEL_WIDTH - 1, $s.PANEL_HEIGHT - 1);

            this.food = new $s.Food(loc .x,loc.y);

           

        },

        Schlange: null,

        Lebensmittel: [],

        panelView : null,

        food : null,

        updateFood : function(){

            if(this.food.alive){ // 当前Food还存活

                zurück;   

            }

            var loc = null;

            do{

 

               // 随机产生一个点,直到不Snake重叠   

                loc = $s.Random.randomLocation($s.PANEL_WIDTH - 1,$s.PANEL_HEIGHT - 1);

            }while(this.overlap(loc));   

            this.food = new $s.Food(loc.x,loc.y);

           

        },

        Overlap : function(loc ){ // 检查是否与Snake重叠,当重叠时返回true

            var x = loc.x;

            var y = loc.y;

            for(var i = 0 ; i < this.snake.units.length ;

              var u = this.snake.units[i]; && u.y == y){

                    return true;   

                }

           ){

            if($s.DEBUG){

               var xt = $s($s.HEAD_LOCATION_ID);

               . if(xt){

                    xt.innerHTML = "头部位置:(" +  x + "," + y + ")";       

                }              >

        },

        setDebug : function( enable){

            if(enable != $s.DEBUG){

                $s.DEBUG = enable;

                if($s.DEBUG){ // 显示

                    var i = $s($s.KEY_UP_DIR_ID);

                 . $s.SnakeContext._show(i);

                  i = $s($s.HEAD_LOCATION_ID) ;

                    $s.SnakeContext._show(i);

                }else{ // 隐藏

                    var i = $s( $s.KEY_UP_DIR_ID);

                    $s.SnakeContext._hide(i);

                   i = $s($s.HEAD_LOCATION_ID);

                  akeContext._hide(i);

                }

            }   

        },

        _show : function(tag){

            if( Tag){

                Tag. style.display = "block";   

            }   

        },

        _hide : function(tag){

           . if(tag){

                tag.style.display = "keine";   

            }   

        },

        ondead : function(){ // Snake死亡时回调

            if(this._startBn) {

                this._startBn.disabled = true;

            }

            if(this._pauseBn){

                this._pauseBn. deaktiviert = wahr;   

            }

            if(this._stopBn){

                this._stopBn.disabled = true;   

            }

           Alert("hanged");                                                                                                                                                ,

_stopBn : null ,

_restartBn : null,

_len : null

};

})();

Verwandte Etiketten：
javascript
Quelle：php.cn
Vorheriger Artikel：JavaScript implementiert das Laden von Seitenscrollbildern Nächster Artikel：Stellen Sie die Breite prozentual ein
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
Aus 2024-04-06 15:35:24
0
1
274
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...
Aus 2024-04-06 12:53:11
0
1
376
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage