cari

Rumah >hujung hadapan web >tutorial js >如何用js开发实现简单贪吃蛇游戏

如何用js开发实现简单贪吃蛇游戏

一个新手
一个新手asal
2017-09-26 10:23:561970semak imbas

曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊


  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>

这是开始游戏：

js开发实现简单贪吃蛇游戏（20行代码）

这是游戏结束：

js开发实现简单贪吃蛇游戏（20行代码）

Atas ialah kandungan terperinci 如何用js开发实现简单贪吃蛇游戏 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何优化图片的加载 Artikel seterusnya：如何实现淘宝放大镜实例

Artikel berkaitan

Lihat lagi