简单的JS鸿蒙小游戏——拼图(冬奥一起拼) 原创 精华
Looker_song
发布于 2022-2-13 13:32
浏览
4收藏
前言
大家最近看冬奥会了吗,运动员在冰天雪地里驰骋,在赛场上勇夺名次,还有冬奥萌物冰墩墩、雪容融也深受大家的喜爱。虽然不能给大家真的冰墩墩,但可以带大家学习用JS写一个简单的拼图游戏,用拼图的方式重现运动员们的帅气英姿,拼出完整的冰墩墩。
新建工程
在DevEco Studio中点击File -> New Project -> Empty Ability -> Next,Project type 选择Application,Language选择JS语言,API版本这里用的是6,最后点击Finish完成项目创建。
项目结构
页面构建
首页
- 设置背景图片:使用通用样式background-image进行背景图片设置。
- 添加两个游戏模式入口按钮:跳转进入游戏页面,根据传值不同拼图格式也不同。
游戏页面
- 顶部计时器:用于显示游戏用时。
- 中间两个画布:左边是参照用的原图;右边是打乱后的拼图和默认隐藏的弹窗。分别用两个canvas组件显示原图和 n×n 的拼图,使用stack布局方便设置游戏完成时显示的弹窗。
- 底部功能按钮:分别用于返回首页,切换图片,重新开始和开关提示。
游戏逻辑
- 首页游戏模式传值跳转,选择游戏模式4×4或5×5
- 游戏页面网格格式计算:根据页面路由的传值,计算拼图网格的大小及间隙,再进行绘制。
- 游戏页面网格绘制:使用canvas组件的drawImage方法裁切源图像绘制网格。
- 随机打乱拼图:进行一千次上、下、左、右随机滑动,打乱拼图。
- 监听滑动事件:根据玩家的滑动方向交换拼图灰块与邻格的位置。
- 拼图数字提示:设置提示标识符,为true时开启数字提示。
- 拼图完成判断:当前拼图序列与初始状态相同时即完成拼图。
- 图片切换:改变当前图片序号,用该序号与图片清单长度作求余,循环改变图片的资源路径。
图片导入
尺寸要求(360×360像素),将图片放入images文件夹,并在list.js中录入图片信息,图片清单格式如下:
结语
至此,拼图游戏的设计开发过程全部讲解完毕。希望大家在学习之余适时锻炼,有个健康的好身体,祝我们的奥运健儿一马当先,全员举绩,超越自我,再创辉煌。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
Jigsaw.rar 24.08M 317次下载
已于2022-2-13 13:32:11修改
赞
8
收藏 4
回复
8
1
4
相关推荐
社区大佬都在用各种方式表达对冰墩墩的喜爱之情,必须学习一波