How to develop and implement a simple snake game using js-JS Tutorial-php.cn

How to develop and implement a simple snake game using js

一个新手

Release： 2017-09-26 10:23:56

Original

1913 people have browsed it

In the past, Nokia’s Snake was all the rage. In an era when games were scarce, it was too difficult to implement using Java. Now, you can create a simple demo with just 20 lines of code to create a web page. Times are progressing

<!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>

Copy after login

This is the start of the game:

How to develop and implement a simple snake game using js

This is the end of the game:

How to develop and implement a simple snake game using js

The above is the detailed content of How to develop and implement a simple snake game using js. For more information, please follow other related articles on the PHP Chinese website!