当前位置：网站首页 > 文章教程 > 正文

20行JS代码实现一个H5小游戏

yund56 2025-07-01 01:22 2 浏览

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文件，打开即可运行。

游戏html源码

上一篇：使用canvas实现简单的贪吃蛇游戏，html+css+js
下一篇：html5重力感应剖析附源码

20行JS代码实现一个H5小游戏

相关推荐

django留言板_留言板html好看的模板

一次分享给你29个PHP基础常用类助力你快速提升

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一篇文章轻松掌握VLookup、XLookup与Filter函数

新函数FILTER函数_filter函数的作用

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

Excel筛选也智能?一个FILTER函数就搞定!

营商在上海_营商上海数字科技有限公司