【源码】20行JS代码，开发一个H5小游戏

原创

用户8703799

发布于 2024-09-23 16:40:26

900

发布于 2024-09-23 16:40:26

文章被收录于专栏：javascript技术

JS真是个神奇的语言，仅仅用约20代码，就能实现一个可玩性不错的H5小游戏。

游戏效果如下：

UI看着很简约，类似马里奥过关，该有的基本功能都有：

玩家可以跳跃，以跳过河道、路面突刺，

可以趴下以躲避上方的障碍。

还可以记录得分、障碍速度还会变化，等等。

一句话评价：麻雀虽小，五脏俱全。

JS源代码仅22行：

源码已是非常简洁，如果再用JShaman压缩工具压一下，代码还会更迷你，仅不到700字节：

压缩后的代码：

您没看错，就这么区区几行！

最后，附上源码：

<pre id=p>
    <script>
    k = 98;
    for (h = [a = b = c = d = e = f = g = i = 0]; 49 > i; ++i) h[i + 49] = h[i] = Math.random() * 3 | 0;
    onkeyup = t => {
        t = t.which;
        a || (a = 90 == t || 38 == t ? 1 : 83 == t || 40 == t ? 2 : a);
    };
    (n = () => {
        b = 1 == a ? 0 == f || 9 == f ? 2 : 3 : 2 == a ? 0 : 1;
        a && 10 == ++f && (f = a = 0);
        p.innerHTML = '';
        for (i = 0; 6 > i; ++i) {
            m = '';
            for (j = 0; 98 > j; ++j) m += ' _'[+(4 == i)].repeat(20) + (['|^^^^^|', o = '  | |  ', o, o, '   V   ', '_______',,,,, '   Λ   ', '__| |__'][6 * h[j] + i - 5] || '       ');
            l = ['o_<',,,, ' o ', '/|.', ',\\_',,, q = ' o/', r = '/|_', s = '/  ',,, q, r, s][6 * b + i - 4];
            w = m.substr(g, 98);
            p.innerHTML += (l ? w.substr(0, 3) + l + w.substr(6) : w) + '\n' + (5 == i ? e : '');
        }
        g = ++g % 1350;
        7 == d && (d = 0, e++, 49 < k && k--);
        15 < g % 27 && 23 > g % 27 && (c = [1 != a && 0 < d, 2 != a && 1 < d && 5 > d, 1 != a && 1 < d && 5 > d][h[~~(g / 27)]], d++);
        c ? p.outerHTML = ':(' : setTimeout(n, k);
    })();
    </script>

保存为html文件，打开即可运行。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript