Teilen Sie ein einfaches Beleuchtungsspiel, das mit JQuery_jquery erstellt wurde

In letzter Zeit sind Diaosi gezwungen, TypeScript zu lernen (wenn Sie es nicht lernen, werden Sie ausgeschlossen, 5555), also müssen Sie zuerst JavaScript lernen. Sie müssen alle webbezogenen Dinge verstehen , sonst können Sie den BOSS nicht täuschen.

Ich habe heute eine Weile JavaScript gelernt. Hier habe ich ein einfaches Leuchtspiel gemacht, um meine Fähigkeiten zu üben. Es wird JQuery verwendet, sonst wäre die Ereignisbindung mühsam.

Als Hallo Welt von JavaScript ist dieses Ding das Folgende. Hier finden Sie eine kurze Einführung in die Implementierungsmethode.

Rendering:

Vergessen Sie nicht, vor benutzerdefinierten Elementen Punkte einzufügen, da es sonst ungültig wird (Neulinge haben durch dieses Ding schon oft Schaden genommen):
app.css

Code kopieren Der Code lautet wie folgt:

Körper
{
Schriftfamilie: 'Segoe UI', serifenlos;
}

spanne {
Schriftstil: kursiv
}

.darkButton {
Breite:70px;
Höhe:70px;
Hintergrundfarbe:grün;
}

.lightButton {
Breite:70px;
Höhe:70px;
Hintergrundfarbe:hellblau;
}

.return {
Schriftgröße:klein;
}

Als nächstes implementieren wir das Gesamtlayout, das im Body-Tag enthalten ist. Das ist sehr einfach, es gibt nicht viel zu sagen:

Code kopieren Der Code lautet wie folgt:

Schalten Sie alle Glühbirnen ein, wenn Sie können!

Hallo

           Horizontal:
           
           Vertikal:
          
           Spiel starten

Sie haben 0 Schritte verschoben.

Führen Sie dann zunächst eine sehr einfache Überprüfung durch. Stellen Sie nach dem Klicken auf die Schaltfläche „Start“ fest, ob es sich bei der Benutzereingabe um eine Zahl handelt und ob sie im Bereich von 4 bis 9 liegt.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function () {
$(startButton).click(function () {
           if (Schritt > 0) {
If (confirm('Sind Sie sicher, dass Sie das Spiel neu starten möchten?') === false)
                  zurück;
}

if (isNaN($(X).val()) || isNaN($(Y).val())) {
Alert('Sie können Zahlen in horizontale und vertikale Zellen eingeben.');
             zurück;
}
else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( ) >= 10) {
                 warning('Die Anzahl der horizontalen und vertikalen Linien darf nicht kleiner als 4 und nicht größer als 9 sein.');
             zurück;
}

startGame();
});  
});

$() ist die verwendete JQuery-Bibliothek. Grundsätzlich umfassen die hier verwendeten Selektoren hauptsächlich: $("#xxx") das erste Element mit der ID xxx; $(".xxx") alle Elemente mit dem Stil xxx.

step ist eine Variable, die ich definiert habe, und der Benutzer zeichnet auf, wie oft der Benutzer sie drückt.

Jedes Mal, wenn der Benutzer die Starttaste drückt, löschen Sie die ursprünglich gezeichnete Schaltfläche (falls vorhanden). Die Implementierung mit JQuery ist einfach. Verwenden Sie einfach die passenden Stile:

Code kopieren Der Code lautet wie folgt:

$(".darkButton").remove();
$(".lightButton").remove();
$(".return").remove();

Dann werden eine Reihe von Schaltflächen generiert. Dies kommt sehr häufig vor und bedarf keiner Erklärung:

Code kopieren Der Code lautet wie folgt:

var grid = document.getElementById('content');

für (var i = 1; i <= x; i ) {
für (var j = 1; j <= y; j ) {
        var button = createButton('bt' i j);

grid.appendChild(button);
}

var ret = document.createElement('br');
ret.className = "return";

grid.appendChild(ret);
}

createButton ist eine Methode zum Generieren und Festlegen von HTML-Elementen. Die ID-Benennung der Schaltfläche lautet hier BT-Zeilennummer, Spaltennummer, sodass Sie in Zukunft leicht erkennen können, welche Schaltfläche gedrückt wird. Um den Zeitraum zu vereinfachen, habe ich festgelegt, dass die Zeilennummer und die Spaltennummer kleiner als 10 sein müssen (so faul), sodass Sie einfach das erste oder zweite Zeichen vom letzten erhalten können, um den Koordinatenwert zu ermitteln.

Die wichtigste Logik des Programms: Drücken Sie eine Taste, um den Status von sich selbst und benachbarten Tasten zu ändern. Wir müssen nur die Koordinaten herausnehmen und dann den Status der Auf-, Ab-, Links- und Rechts-Tasten ändern (achten Sie auf die Beurteilung von Situationen außerhalb der Grenzen). Schreiben Sie hier eine Beurteilung:

Code kopieren Der Code lautet wie folgt:

$(".darkButton").click(function () {
ChangeButton(this.id);

var x = this.id.charAt(2);
var y = this.id.charAt(3);

if (x - 1 > 0) {
         changeButton('bt' (x - 1) y);
}

Beachten Sie, dass dies in JQuery definiert ist. Ohne JQuery ist es nicht einfach, dies zu erreichen. Eine Sache, die Sie daran erinnern sollte, ist der folgende Code:

Code kopieren Der Code lautet wie folgt:

var newX = 1 parseInt(x);
if (x 1 <= maxX) {
​ changeButton('bt' newX y);
}

Wenn Sie „parseInt“ nicht verwenden, behandelt JavaScript 1 als Zeichenfolge und verkettet sie mit dem folgenden x, sodass die ID falsch ist. Konvertieren Sie also einfach x in int und addieren Sie es (das ist nicht erforderlich). dies im obigen Subtraktionsfall) ). Dies ist einer der Nachteile untypisierter Sprachen, weshalb TypeScript erscheint (was Diaosi kürzlich lernt).

Da nun die wichtigen Teile fertig sind, werden alle Codes der HTM-Datei unten eingefügt.

Code kopieren Der Code lautet wie folgt:

<script><br>            $(document).ready(function () {<br>                  $(startButton).click(function () {<br> Wenn (Schritt > 0) {<br> If (confirm('Sind Sie sicher, dass Sie das Spiel neu starten möchten?') === false)<br>                          zurück;<br>                 }</p> <p> if (isNaN($(X).val()) || isNaN($(Y).val())) {<br> Alert('Sie können Zahlen in horizontale und vertikale Zellen eingeben.');<br>                     zurück;<br>                 }<br> else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( ) >= 10) {<br> warning('Die Anzahl der horizontalen und vertikalen Linien darf nicht kleiner als 4 und nicht größer als 9 sein.');<br>                     zurück;<br>                 }</p> <p> startGame();<br>             });                                                });<br> </script>

<script><p>       var maxX, maxY;<br> </p> var step = 0;<p> </p> Funktion startGame() {<p>                maxX = $(X).val();<br>                maxY = $(Y).val();<br>               makeGrid(maxX, maxY);<br>             Schritt = 0;<br>                 document.getElementById("step").innerHTML = step;<br> }<br> </p> Funktion makeGrid(x, y) {<p>                $(".darkButton").remove();<br>                $(".lightButton").remove();<br>                $(".return").remove();<br> </p> var grid = document.getElementById('content');<p> </p> für (var i = 1; i <= x; i ) {<p> für (var j = 1; j <= y; j ) {<br />                   var button = createButton('bt' i j);<br /> </p> grid.appendChild(button);<p>                 }<br /><p>                var ret = document.createElement('br');<br />                 ret.className = "return";</p> <p>                grid.appendChild(ret);<br />             }</p> <p>            $(".darkButton").click(function () {<br />                 changeButton(this.id);</p> <p>                var x = this.id.charAt(2);<br />                 var y = this.id.charAt(3);</p> <p>                if (x - 1 > 0) {<br>                     changeButton('bt' (x - 1) y);<br>                 }<br>                 if (y - 1 > 0) {<br>                     changeButton('bt' x (y - 1));<br>                 } <p>                var newX = 1 parseInt(x);<br>                 if (x 1 <= maxX) {<br>                     changeButton('bt' newX y);<br>                 }<br>                 var newY = 1 parseInt(y);<br>                 if (y 1 <= maxY) {<br>                     changeButton('bt' x newY);<br>                 }</p> <p>                Schritt ;</p> <p>                document.getElementById("step").innerHTML = step;<br>             });<br>         }</p> <p>        Funktion changeButton(id) {<br>             var button = document.getElementById(id);</p> <p>            if (button.className === "darkButton") {<br>                 button.className = "lightButton";<br>             }<br>             sonst {<br>                 button.className = "darkButton";<br>             }<br>         }</p> <p>        Funktion createButton(id) {<br>             var button = document.createElement('button');<br>             button.id = id;<br>             button.className = "darkButton";<br>             Zurück-Taste;<br>         }<br>     </script>

Schalten Sie alle Glühbirnen ein, wenn Sie können!

Hallo

           Horizontal:
           
           Vertikal:
          
           Spiel starten

Sie haben 0 Schritte verschoben.

Wenn Sie den Code ausführen möchten, müssen Sie nur das ursprüngliche Stylesheet als app.css speichern, dann diesen vollständigen Code als default.htm speichern, ihn dann im selben Ordner ablegen und die HTM-Datei mit einem Browser öffnen Das war's (IE muss ActiveX aktivieren).

Es sollte beachtet werden, dass dieses Ding viel mit der Browserkompatibilität zu tun hat, sodass nicht garantiert werden kann, dass es auf allen Browsern (und jeder Version) normal läuft. . .

Lassen Sie mich übrigens zum Schluss noch etwas sagen. Sie können Visual Studio 2012 zum Bearbeiten von HTML und JavaScript verwenden, es verfügt über Intellisense und Sie können Haltepunkte zum Debuggen direkt hinzufügen, was sehr praktisch ist.