艾斯云网

今天心血来潮，想搞个小游戏玩玩，就琢磨着弄个“跳跳龙”！就是那种特简单，一个像素小恐龙蹦蹦跳跳躲仙人掌的。

准备工作

先得把环境搭起来。我直接用浏览器，加个简单的 HTML 文件和 JavaScript 就够。省事儿！

然后，我找张小恐龙的图片，还有仙人掌的图片。别说，网上素材还真不少，都是现成的。

开工

先让小恐龙在屏幕上“站”起来。我用 JavaScript 控制它的位置，把它放到屏幕的左边。

小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区

• 创建小恐龙： 在 HTML 里放个 <div>，给它个 ID，比如叫“dinosaur”。
• 设置样式： 用 CSS 给小恐龙加上背景图片，设置好大小。



• 控制位置： 用 JavaScript 获取到“dinosaur”这个元素，然后修改它的 和 属性，让它“站”在屏幕左下角。

得让小恐龙能跳起来。我给它加个“跳跃”的动作，就是用 JavaScript 改变它的垂直位置（）。

• 监听键盘： 我用个键盘事件监听器，按下空格键的时候，就触发小恐龙的“跳跃”。
• 跳跃动作： “跳跃”就是用 JavaScript 动画，让 的值先变大，再变小，看起来就像跳起来一样。

然后是仙人掌。我打算让仙人掌从右边“走”过来，这样小恐龙就需要跳起来躲避它们。

• 创建仙人掌： 跟创建小恐龙差不多，用 <div> 和 CSS。
• 移动仙人掌： 用 JavaScript 定时器，每隔一段时间就改变仙人掌的 ，让它看起来像是在往左边移动。
• 多个仙人掌： 我还加个功能，每隔一段时间就创建一个新的仙人掌，这样就有源源不断的仙人掌“走”过来。

让游戏“活”起来

小恐龙能跳，仙人掌也能移动。但是，它们之间还没有“互动”，也就是说，小恐龙撞到仙人掌也不会有啥反应。

我加个碰撞检测。简单来说，就是每隔一小段时间，就检查一下小恐龙和仙人掌的位置，看看它们是不是“撞”上。

• 获取位置： 用 JavaScript 获取小恐龙和仙人掌的 offsetLeft、offsetTop、offsetWidth 和 offsetHeight 这些属性，就能知道它们的位置和大小。



• 判断碰撞： 根据这些位置和大小信息，写个简单的判断，就能知道小恐龙和仙人掌是不是“撞”上。
• 游戏结束： 如果撞上，就游戏结束，弹出个提示啥的。

收尾

我还加个计分功能。小恐龙每成功跳过一个仙人掌，就加一分。这个简单，用个变量记录分数，然后在屏幕上显示出来就行。

大功告成！虽然简单，但玩起来还挺有意思的。看着自己做的小游戏，还挺有成就感的！