javascript小游戏代码

用键盘方向键控制一个方块躲避下落物体，小游戏代撞上就游戏结束——这种小游戏用JavaScript写出来不到100行代码。小游戏代很多人以为做游戏得会Canvas、小游戏代懂物理引擎，小游戏代其实一个能跑的小游戏代版本只需要DOM操作加定时器就够了。

先看HTML骨架。小游戏代一个容器div，小游戏代里面放玩家方块，小游戏代用绝对定位控制位置。小游戏代分数显示在右上角。小游戏代就这些。小游戏代

```html ```

玩家方块的小游戏代移动逻辑很直白。监听keydown事件，小游戏代左右方向键改变left值。小游戏代这里有个细节：得限制边界，小游戏代不然方块会跑出容器。我一开始忘了加判断，方块直接飞到屏幕外面去了，调试了半天才发现。

```javascript let px = 185; const player = document.getElementById('player'); document.addEventListener('keydown', e => { if (e.key === 'ArrowLeft' && px > 0) px -= 20; if (e.key === 'ArrowRight' && px < 370) px += 20; player.style.left = px + 'px'; }); ```

下落物体用createElement动态生成。每隔一段时间创建一个div，给它随机left值，然后用setInterval让它往下掉。难点在于每个物体的下落速度要独立控制——不能用一个全局定时器统一移动，否则所有物体速度一样，玩起来很死板。我的做法是给每个物体存一个自己的定时器ID，各自按不同间隔移动。

```javascript function spawn() { const obj = document.createElement('div'); obj.style.cssText = 'position:absolute;width:20px;height:20px;background:#0f3460;top:-20px;'; obj.style.left = Math.random() * 380 + 'px'; game.appendChild(obj); let oy = -20; const speed = 2 + Math.random() * 3; const timer = setInterval(() => { oy += speed; obj.style.top = oy + 'px'; if (oy > 500) { clearInterval(timer); obj.remove(); score++; } // 碰撞检测 if (oy > 470 && Math.abs(parseFloat(obj.style.left) - px) < 30) { alert('游戏结束，得分：' + score); clearInterval(timer); clearInterval(spawnTimer); } }, 30); } let score = 0; const spawnTimer = setInterval(spawn, 800); ```

碰撞检测我用的矩形重叠判断的简化版——只看水平距离和垂直位置。严格来说应该用getBoundingClientRect，但那样每帧都要读布局信息，性能差一些。小游戏里用坐标估算完全够用。这里有个坑：obj.style.left返回的是带px的字符串，得用parseFloat转一下。我见过有人直接用字符串比较，结果永远不触发碰撞。

分数更新直接改textContent。没用什么状态管理，一个全局变量score就够了。游戏结束后用alert弹窗虽然土，但省事。想做得好看点可以加个重新开始按钮，把score归零、清空所有下落物体、重启定时器。

整个游戏最核心的部分其实是定时器的管理。spawnTimer负责生成物体，每个物体自己的timer负责下落。游戏结束时必须把所有timer都清掉，不然它们还在后台跑，内存泄漏不说，重新开始时会出各种奇怪的问题。我建议用一个数组存所有活跃的timer ID，结束的时候遍历清除。

这套代码放在浏览器里直接就能跑。想加难度递增？把spawn的间隔从800ms逐渐调小就行。想加音效？用Audio对象播放短音频。想存最高分？localStorage两行代码搞定。别想着一上来就写个完整的游戏框架，先把方块动起来，剩下的慢慢加。