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

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

一个新手
Lepaskan: 2017-09-26 10:23:56
asal
2077 orang telah melayarinya

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


  1. 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

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

    Salin selepas log masuk

这是开始游戏:

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

这是游戏结束:

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

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

Label berkaitan:
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan