Maison > interface Web > js tutoriel > Comment développer et implémenter un jeu de serpent simple en utilisant js

Comment développer et implémenter un jeu de serpent simple en utilisant js

一个新手
Libérer: 2017-09-26 10:23:56
original
1967 Les gens l'ont consulté

Dans le passé, Snake de Nokia faisait fureur. À une époque où les jeux étaient rares, il était trop difficile à mettre en œuvre en utilisant Java. Vous pouvez désormais créer une démo simple avec seulement 20 lignes de code pour créer une page Web. Les temps avancent


  1. <!doctype html>  
    <html>  
    <body>  
        <canvas id="can" width="400" height="400" style="background: Black"></canvas>  
        <script>  
            var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");  
            function draw(t, c) {  
                ctx.fillStyle = c;  
                ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);  
            }  
            document.onkeydown = function(e) {  
                fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n  
            };  
            !function() {  
                sn.unshift(n = sn[0] + fx);  
                if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)  
                    return alert("GAME OVER");  
                draw(n, "Lime");  
                if (n == dz) {  
                    while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);  
                    draw(dz, "Yellow");  
                } else  
                    draw(sn.pop(), "Black");  
                    setTimeout(arguments.callee, 130);  
            }();  
        </script>  
    </body>  
    </html>
    Copier après la connexion

C'est le début du jeu :

Comment développer et implémenter un jeu de serpent simple en utilisant js

C'est la fin du jeu :

Comment développer et implémenter un jeu de serpent simple en utilisant js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal