原生Js实现十滴水小游戏

最新推荐文章于 2023-06-27 12:43:04 发布

hxy941025

最新推荐文章于 2023-06-27 12:43:04 发布

阅读量931

点赞数

文章标签： JS 前端基础练习

本文链接：https://blog.youkuaiyun.com/hxy941025/article/details/93340612

版权

本文介绍了如何使用原生JS实现十滴水小游戏，包括游戏类、水球类和子弹类的设计，详细阐述了各个类的功能和实现方法，如水球的碰撞、变大、炸裂以及子弹的移动和碰撞检测。同时提供了源码地址和参考资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍：

常见的十滴水小游戏，使用原生JS的模块化，模块化就是面向对象的思想，写这个练习需要有一点面向对象的基础，本人也是第一次接触Js的模块化，可能有些地方说的不对。原生JS模块化需要在Web服务器的环境下实现，例如Nodejs，本人使用Webstorm，直接debug即可。其中模块化加载需要在script标签上加入type="module"属性：

<script src="index.js"  type="module"></script>

模块导出导入：

export default {
	//模块需要导出的内容
}
//导入需要的模块，如Game类：
import Game from './Game.js';

思路：

首先，需要一个游戏类，来作为游戏的容器，控制游戏的开始和结束，提供计分功能（水滴数），执行游戏规则（水滴的碰撞，水滴超出棋盘后的销毁等ÿ

最低0.47元/天解锁文章