Partagez un jeu d'éclairage simple réalisé avec JQuery_jquery

Récemment, les diaosi sont obligés d'apprendre TypeScript (si vous ne l'apprenez pas, vous serez expulsé, 5555), vous devez donc d'abord apprendre JavaScript. C'est le bon moment. Vous devez comprendre toutes les choses liées au Web. , sinon vous ne pourrez pas tromper le BOSS.

J'ai appris JavaScript pendant un petit moment aujourd'hui. Ici, j'ai créé un jeu d'éclairage simple pour mettre en pratique mes compétences. JQuery est utilisé, sinon la liaison d'événements serait pénible.

En tant que Hello World de JavaScript, cette chose est la suivante. Voici une brève introduction à la méthode de mise en œuvre.

Rendu :

Définissez d'abord une feuille de style. N'oubliez pas d'ajouter des points avant les éléments personnalisés, sinon elle sera invalide (les novices ont été lésés par cette chose à plusieurs reprises) :
app.css

Copier le code Le code est le suivant :

corps
{
font-family : 'Segoe UI', sans empattement ;
>

durée {
style de police : italique
>

.darkButton {
Largeur : 70 px ;
Hauteur : 70px ;
couleur d'arrière-plan : vert ;
>

.lightButton {
Largeur : 70 px ;
Hauteur : 70px ;
couleur de fond:bleu clair;
>

.retour {
taille de police : petite ;
>

Ensuite, implémentons la mise en page globale, qui est ce qui est dans la balise body. C'est très simple, pas grand chose à dire :

.

Copier le code Le code est le suivant :

Éteignez toutes les ampoules si vous le pouvez !

Bonjour

           Horizontal :
           
           Vertical :
          
           Démarrer le jeu

Vous avez déplacé 0

Ensuite, effectuez d’abord une vérification très simple. Après avoir cliqué sur le bouton Démarrer, déterminez si la saisie de l’utilisateur est un nombre et si elle est comprise entre 4 et 9.

Copier le code Le code est le suivant :

$(document).ready(function () {
$(startButton).click(function () {
           if (étape > 0) {
If (confirm('Êtes-vous sûr de vouloir redémarrer le jeu ?') === false)
                  revenir ;
>

if (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('Vous pouvez saisir des nombres dans des cellules horizontales et verticales.');
             revenir ;
>
sinon si ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( )>= 10) {
                 alert('Le nombre de lignes horizontales et verticales ne peut pas être inférieur à 4 et ne peut pas être supérieur à 9.');
             revenir ;
>

startGame();
});  
});

$() est la bibliothèque JQuery utilisée. Fondamentalement, les sélecteurs utilisés ici incluent principalement : $("#xxx") le premier élément avec l'identifiant xxx $(".xxx") tous les éléments avec le style xxx.

step est une variable que j'ai définie et l'utilisateur enregistre combien de fois il appuie dessus.

Chaque fois que l'utilisateur appuie sur le bouton de démarrage, effacez le bouton initialement dessiné (le cas échéant). C'est facile à implémenter avec JQuery, utilisez simplement les styles correspondant :

Copier le code Le code est le suivant :

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

Ensuite, un tas de boutons sont générés. C'est très courant et ne nécessite aucune explication :

Copier le code Le code est le suivant :

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

pour (var i = 1; i <= x; i ) {
pour (var j = 1; j <= y; j ) {
        var bouton = createButton('bt' i j);

grid.appendChild(bouton);
>

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

grid.appendChild(ret);
>

createButton est une méthode utilisée pour générer et définir des éléments HTML. Le nom d'identification du bouton ici est le numéro de colonne du numéro de ligne, de sorte qu'il est facile de savoir sur quel bouton vous appuyez à l'avenir. Afin de faciliter la période, j'ai stipulé que le numéro de ligne et le numéro de colonne doivent être inférieurs à 10 (donc paresseux), vous pouvez donc simplement récupérer le premier ou le deuxième caractère du dernier pour connaître la valeur des coordonnées.

La logique la plus importante du programme : appuyer sur un bouton pour changer son statut et celui des boutons adjacents. Il suffit de retirer les coordonnées, puis de changer l'état des boutons haut, bas, gauche et droite (faites attention au jugement des situations hors limites), écrivez un jugement ici :

Copier le code Le code est le suivant :

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

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

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

Notez que ceci est défini dans JQuery. Ce n'est pas facile d'obtenir cela sans JQuery. Une chose à vous rappeler est le morceau de code suivant :

Copier le code Le code est le suivant :

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

Si vous n'analysez pas Int, JavaScript traitera 1 comme une chaîne et le concaténera avec le x suivant, donc l'identifiant sera erroné, alors convertissez simplement x en int et ajoutez-le (vous n'avez pas besoin de le faire ceci dans le cas de soustraction ci-dessus) ). C'est l'un des inconvénients des langages non typés, c'est pourquoi TypeScript apparaît (ce que Diaosi apprend récemment).

Maintenant que les parties importantes sont terminées, tous les codes du fichier htm sont collés ci-dessous.

Copier le code Le code est le suivant :

<script><br>            $(document).ready(function () {<br>                  $(startButton).click(function () {<br> Si (étape > 0) {<br> If (confirm('Êtes-vous sûr de vouloir redémarrer le jeu ?') === false)<br>                          revenir ;<br>                 }</p> <p> if (isNaN($(X).val()) || isNaN($(Y).val())) {<br> alert('Vous pouvez saisir des nombres dans des cellules horizontales et verticales.');<br>                     revenir ;<br>                 }<br> sinon si ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( )>= 10) {<br> alert('Le nombre de lignes horizontales et verticales ne peut être inférieur à 4 ni supérieur à 9.');<br>                     revenir ;<br>                 }</p> <p> startGame();<br>             });                                                });<br> </script>

<script><p>       var maxX, maxY;<br> </p> var pas = 0;<p> </p> fonction startGame() {<p>                maxX = $(X).val();<br>                maxY = $(Y).val();<br>               makeGrid(maxX, maxY);<br>             pas = 0 ;<br>                 document.getElementById("step").innerHTML = step;<br> ><br> </p> fonction makeGrid(x, y) {<p>                $(".darkButton").remove();<br>                $(".lightButton").remove();<br>                $(".return").remove();<br> </p> var grille = document.getElementById('content');<p> </p> pour (var i = 1; i <= x; i ) {<p> pour (var j = 1; j <= y; j ) {<br />                   var bouton = createButton('bt' i j);<br /> </p> grid.appendChild(bouton);<p>                 }<br /><p>                var ret = document.createElement('br');<br />                 ret.className = "retour";</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>                si (x - 1 > 0) {<br>                     changeButton('bt' (x - 1) y);<br>                 ><br>                 si (y - 1 > 0) {<br>                     changeButton('bt' x (y - 1));<br>                 > <p>                var newX = 1 parseInt(x);<br>                 si (x 1 <= maxX) {<br>                     changeButton('bt' newX y);<br>                 ><br>                 var newY = 1 parseInt(y);<br>                 si (y 1 <= maxY) {<br>                     changeButton('bt' x newY);<br>                 ></p> <p>                étape ;</p> <p>               document.getElementById("step").innerHTML = step;<br>             });<br>         ></p> <p>        fonction changeButton(id) {<br>             var bouton = document.getElementById(id);</p> <p>            if (button.className === "darkButton") {<br>                 bouton.className = "lightButton";<br>             ><br>             sinon {<br>                 bouton.className = "darkButton";<br>             ><br>         ></p> <p>        function createButton(id) {<br>             var bouton = document.createElement('button');<br>             bouton.id = id;<br>             bouton.className = "darkButton";<br>             bouton de retour ;<br>         ><br>     </script>

Éteignez toutes les ampoules si vous le pouvez !

Bonjour

           Horizontal :
           
           Vertical :
          
           Démarrer le jeu

Vous avez déplacé 0

Si vous souhaitez exécuter le code, il vous suffit de sauvegarder la feuille de style initiale sous app.css, puis de sauvegarder ce code complet sous default.htm, puis de le placer dans le même dossier et d'ouvrir le fichier htm avec un navigateur. C'est tout (IE doit activer ActiveX).

Il convient de noter que cette chose a beaucoup à voir avec la compatibilité des navigateurs, il n'est donc pas garanti qu'elle fonctionne normalement sur tous les navigateurs (et n'importe quelle version). . .

Au fait, permettez-moi d'en dire un peu plus à la fin. Vous pouvez utiliser Visual Studio 2012 pour éditer du HTML et du JavaScript, il aura Intellisense et vous pourrez directement ajouter des points d'arrêt pour le débogage, ce qui est très pratique.