这是个为开发儿童创造力的网页小游戏，孩子们可以在这里通过自己的想象力搭建自己的游戏世界，他们可以用自己画的图画拼接出自己的游戏场景，在自己创造的二维游戏找到成就感，并逐步产生编程兴趣，这更有利于现代儿童的学习发展。 【该游戏目前理想效果是：玩家自己手动创造游戏场景，或通过导入一张图片，游戏自动识别图片内容来自动创造相应的场景，在设定好关卡胜利条件后，可保存为一个关卡，点击开始游戏可以从第一个关卡进行游玩】
我选择直接通过 html 实现该游戏的所有功能，一是为了加强 html js css 基础技术，而是为了用原生 js 去实现 web components，并将该游戏以 web components 形式加入到我的 Next.js 项目中，目的是尝试通过 web components 来实现微前端架构。
- 给予 web components 实现微前端架构；Next.js中调用 web components 包装的 html 工程网页
-
【✔】task-1 -- 创建游戏场景，整个游戏场景内的所有物体都以该场景的左上角为原点(0,0)进行布局，场景中创建出一定数量的砖块，砖块数据由一个数据集合控制，可控制背景图、尺寸、坐标，为创建其他物体打下基础
-
- point3: 2
-
【✔】task-2 -- 游戏场景中创建一个的玩家方块和一定数量的金币方块，要求同砖块
-
- point3: 1
-
【✔】task-1 -- 实现玩家的模拟自由落体运动：玩家方块在没有任何外力干涉下，会遵循自由落体运动(即下落速度逐渐加快)，直到底部遇到砖块则会停止运动并停留在砖块的上方（这一步先不需要完全实现碰撞器，只需要判断是否到达砖块坐标位置并停留在砖块上方即可）
-
- points: 3
-
【✔】task-2 -- 实现玩家的左右移动控制：通过键盘的左右方向键控制玩家在一排砖块上左右移动
-
- points: 2
-
【✔】task-3 -- 实现玩家的跳跃控制：通过键盘的向上方向键控制玩家砖块上可以进行一次跳跃的功能，目前只需要实现单次跳跃，即已经起跳的情况下直到落地，这个过程中再按向上方向键时不起任何作用的；跳跃过程的要模拟真实跳跃效果，即起跳时有个初速度，随着高度的增加，这个速度会递减直到为0，速度为0后即开始下落（即跳跃达到最高点转为自由落体运动）；玩家的跳跃和左右移动控制不能冲突，即可以实现组合键控制玩家移动的同时进行跳跃
-
- points: 4
-
【✔】task-1 -- 实现玩家与砖块之间的碰撞器功能：这一步要尽量完善碰撞器功能，为后续碰撞功能打好基础；(1) 玩家方块向下掉落时遇到砖块要能够停留再砖块上方；(2) 玩家左右移动时，不能穿过砖块;（3）这些功能尽量都参数话，为后续开发场景搭建功能打下基础
-
- points: 4
-
【✔】task-2 -- 实现玩家与砖块之间的碰撞器功能：(1) 玩家跳跃时，若顶上遇到砖块，则会下落；（2）玩家左右不能超出游戏场景，移动到左右边界则不能继续移动，玩家若落下到游戏场景的最下方，则会自动设置玩家位置为出生坐标，并重新开始游戏；（3）这些功能尽量都参数话，为后续开发场景搭建功能打下基础
-
- points: 4
-
【✔】task-3 -- 实现玩家与金币之间的碰撞器功能：玩家碰撞到金币后，金币会消失，同时玩家会得到该金币的响应得分，游戏界面上需要增加一个简易的得分展示，玩家的金币得分会追加
-
- points: 3
-
【✔】task-4 -- 实现游戏的暂停、继续、重新开始功能：增加这三个按钮，并简单的实现响应功能即可，后续再计划完成该功能
-
- points: 2
-
【✔】task - 1 -- 绘制创造场景的整体布局，两部分：顶部是工具栏，下方游戏场景搭建区域
-
- point: 1
-
【✔】task - 2 -- 绘制顶部工具栏及其相关部件：Logo，玩家添加部件、物体添加部件、关卡预览部件、最右侧操作按钮区域（保存/开始/调节参数按钮/删除物体按钮）
-
- point: 2
-
【✔】task - 3 -- 添加物体弹层面板：带有2个可点击的选项，即砖块和金币；点击顶部工具栏>添加物体>选择按钮，可切换面板的显示/隐藏
-
- point: 1
-
【✔】task - 4 -- 物体参数调节弹层面板：先开发出面板，面板顶部为按钮区域和标题，下方带一个分组布局，一个分组中加上2行输入框，就先设计为：分组标题是“画布设置”，输入框是“宽”和“高”，后续再根据实际添加的物体属性，继续往面板中添加想要的分组即可；点击顶部工具栏最右侧操作按钮区域>调节参数按钮，可切换面板的显示/隐藏
-
- point: 2
-
【✔】task - 1 -- 实现将一张图片绘制到canvas上
-
- point: 2
-
【✔】task - 2 -- 实现鼠标移动绘制在canvas上的图形：学习并实现canvas动态图像的相关方案，并选择其中一个比较合适的进行应用
-
- point: 5
-
【✔】task - 3 -- 实现鼠标点击图形后，给图形加上选中边框，并确保鼠标拖拽移动图形时边框也同步跟随
-
- point: 3
-
【✔】task - 3 -- canvas上绘制多个图形且可重叠，鼠标点击其中任意一个图形，层级最上方的一个图形为选中状态(即带选中边框)，拖拽选中图形，其他图形不受任何影响(不能出现被擦除或同时拖拽之类的异常问题)
-
- point: 3
-
【✔】task - 4 -- 点击顶部工具栏>添加物体>选择按钮，点击弹层面板中的选项，添加任意数量相应的图形到canvas中，并可任意拖拽
-
- point: 2
-
task - 5 -- 打通游戏创造页和游戏页：点击 游戏关卡预览>预览按钮 跳转到 “游戏页”，并根据“创造页”的数据创建游戏场景，且可以正常操作玩家
-
- point: 4
-
task - 6 -- 鼠标点击选中canvase中的图形时，读取该图形的数据，并显示到“参数调节”面板中：这里需要在“参数调节”面板中添加相应的输入框、图片等部件，根据图形属性而定
-
- point: 5
-
task - 7 -- 在“参数调节”面板中修改的参数，要能够在canvas的相应图形上体现出来
-
- point: 5
-
task - 8 -- 点击“保存关卡”按钮，弹出关卡保存面板（面板分上下两部分：上面是当前保存的关卡名称和胜利条件设置；下面一部分是所有已保存的关卡数据列表，可以读取其中任意一份关卡数据），该游戏为单机游戏，所有数据保存在localstory中即可
-
- point: 5
- Deploy on Vercel (CI/CD):