1.生态案例:【开发者说】重塑经典如何在HarmonyOS手机上还原贪吃蛇游戏.pdf
《1.生态案例:【开发者说】重塑经典如何在HarmonyOS手机上还原贪吃蛇游戏.pdf》由会员分享,可在线阅读,更多相关《1.生态案例:【开发者说】重塑经典如何在HarmonyOS手机上还原贪吃蛇游戏.pdf(18页珍藏版)》请在文库网上搜索。
1、来源:HarmonyOS 开发者微信号 https:/ 【开发者说】重塑经典,如何在【开发者说】重塑经典,如何在 HarmonyOSHarmonyOS 手机上还手机上还原贪吃蛇游戏原贪吃蛇游戏 本文作者: Kiruba Pradeep, Tech Lead, currentlybased at L&T Technology Services 本期我们为大家带来的是由印度开发者 Kiruba Pradeep 投稿的童年经典游戏,通过 JS 模板在 HarmonyOS 手机上一步步开发呈现,简单有趣的小游戏 demo,希望给你的HarmonyOS 开发之旅多一点启发。 贪吃蛇,一款经典的小游戏,勾
2、起了多少人的童年回忆。小时候,我们在游戏中快乐玩耍,现如今,让我们在开发中慢慢回溯吧!基于此,Kiruba Pradeep 总结了一套开发贪吃蛇游戏的要点秘诀,并在一行行代码中重塑经典。 在游戏中,玩家须通过导航按钮控制蛇的运动,以便吃掉随机出现的食物,来获得相应积分并增加蛇身长度,当蛇发生碰撞或反向移动时,则游戏结束。首先,让我们一起梳理一下开发的要点: 1) 绘制固定组件:包括画布、导航按钮、得分栏等内容的绘制 2) 设计动态组件:包括蛇体与食物的形状、大小、颜色的设计 3) 动态规则:设定食物随机出现的位置,蛇的运动方式及形态 4) 运行机制:当蛇消耗食物后,增加积分和蛇的长度,并绘制新
3、的食物 5) 违规判定:当蛇碰撞到自身或画布边缘,或者反向移动,则判定违规,提示用户“game 来源:HarmonyOS 开发者微信号 https:/ over”,并自动重新开始游戏 在正式开始敲代码之前,开发者们需要先下载安装 Huawei DevEco Studio,如果对于这个流程不甚熟悉,可以参照官网的教程操作。 HuaweiDevEco Studio 安装指南: https:/ 请注意,本次 demo 主要针对逻辑梳理和要点讲解,限于篇幅长度不会展示完整代码,开发者们可打开以下链接获取完整代码哦 https:/ 下面我们就进入项目开发环节,逐一攻破以上要点,一起探寻贪吃蛇之旅: 创建
4、项目创建项目 打开 DevEco Studio, 创建新项目 (New Project) , 选择 Phone 设备, 点击 Empty Feature Ability (JS)模板,注意项目命名须不带中文或特殊字符(如此处的 MyPhoneGame),最后点击 Finish。 来源:HarmonyOS 开发者微信号 https:/ 项目创建后,我们先了解一下目录结构: 来源:HarmonyOS 开发者微信号 https:/ index.hml 文件:描述页面布局 index.css 文件:描述页面样式 index.js 文件:处理页面和用户之间的交互 app.js 文件:管理全局 JavaS
5、cript 逻辑和应用程序生命周期 来源:HarmonyOS 开发者微信号 https:/ pages 目录:存储所有组件页面 java 目录:存放与项目相关的 java 文件 其中,app.js 文件、pages 目录和 java 目录内容均由 JS 模板自动提供。 1)绘制固定组件)绘制固定组件 绘制画布,在 index.hml 文件中,设定画布的颜色和尺寸; index.hml Snake Game 在 index.css 文件中,可以描述画布的呈现样式; index.css 来源:HarmonyOS 开发者微信号 https:/ .container flex-direction: c
6、olumn; justify-content: center; align-items: center; background-color: #d6d8d8; 在 index.js 文件中,引用画布$refs.canvasref,保障画布被蛇和食物图像填充。 index.js const canvas = this.$refs.canvasref; this.ctx = canvas.getContext(2d); 绘制导航按钮,我们先在 entry/src/main/js/default/common 目录下,添加 png格式的导航按钮图片。 来源:HarmonyOS 开发者微信号 http
7、s:/ 然后,在 index.hml 文件中,创建“上下左右”四个导航按钮,并将方向保存在变量“this.direction”中; index.hml . 在 index.css 文件中,设置导航按钮大小、位置、边框和颜色等参数; Index.css .backBtnup, .backBtncenter, .backBtnleft, .backBtnright width: 100px; height: 100px; 来源:HarmonyOS 开发者微信号 https:/ margin-bottom: 20px; margin-top: 20px; border-radius: 10px; b
8、ackground-color: #000000; .directsecond flex-direction: row; justify-content: center; align-items: center; .backBtnup margin-top: 80px; .backBtncenter margin-left: 40px; margin-right: 40px; 在 index.js 文件中,通过 if 判断,调用“this.direction”,实现导航按钮控制蛇的运动方向。 来源:HarmonyOS 开发者微信号 https:/ index.js onStartGame(di
9、rect) if (direct = 1) this.direction = up else if (direct = 2) this.direction = left else if (direct = 3) this.direction = down else if (direct = 4) this.direction = right , 在 index.hml 文件中,创建“得分”名称;在 index.css 文件中,设置“得分栏”大小和顶部边距; 在 index.js 文件中,设定原始得分为“0”。 index.hml Score: score Index.css 来源:Harmon
10、yOS 开发者微信号 https:/ .scoretitle font-size: 50px; margin-top: 30px; index.js data: title: , snakeSize: 10, w: 600, h: 600, score: 0, snake : , ctx: null, food: null, direction: , gameOver: false, tail: x: 0, y: 0 , 来源:HarmonyOS 开发者微信号 https:/ 2)设计动态组件)设计动态组件 接下来,我们在 index.js 文件中创建蛇体,设定蛇的初始位置(0,0),蛇的长度
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 开发者说 生态 案例 开发者 重塑 经典 如何 HarmonyOS 手机 还原 贪吃 游戏