4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf

发布时间：2022-03-31 发布人：admin 分类：互联网资料大小：0.86M 资料格式：pdf 举报版权申诉

第1页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第2页.png

第2页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第3页.png

第3页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第4页.png

第4页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第5页.png

第5页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第6页.png

第6页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第7页.png

第7页 / 共18页

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf-第8页.png

第8页 / 共18页

文本预览

【开发者说】重塑经典，如何在 HarmonyOS 手机上还原贪吃蛇游戏本文作者： Kiruba Pradeep, Tech Lead, currentlybased at L&T Technology Services 本期我们为大家带来的是由印度开发者 Kiruba Pradeep 投稿的童年经典游戏，通过 JS 模板在 HarmonyOS 手机上一步步开发呈现，简单有趣的小游戏 demo ，希望给你的 HarmonyOS 开发之旅多一点启发。贪吃蛇，一款经典的小游戏，勾起了多少人的童年回忆。小时候，我们在游戏中快乐玩耍，现如今，让我们在开发中慢慢回溯吧！基于此，Kiruba Pradeep 总结了一套开发贪吃蛇游戏的要点秘诀，并在一行行代码中重塑经典。在游戏中，玩家须通过导航按钮控制蛇的运动，以便吃掉随机出现的食物，来获得相应积分并增加蛇身长度，当蛇发生碰撞或反向移动时，则游戏结束。首先，让我们一起梳理一下开发的要点： 1) 绘制固定组件：包括画布、导航按钮、得分栏等内容的绘制 2) 设计动态组件：包括蛇体与食物的形状、大小、颜色的设计 3) 动态规则：设定食物随机出现的位置，蛇的运动方式及形态 4) 运行机制：当蛇消耗食物后，增加积分和蛇的长度，并绘制新的食物 5) 违规判定：当蛇碰撞到自身或画布边缘，或者反向移动，则判定违规，提示用户“game 来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

over”，并自动重新开始游戏在正式开始敲代码之前，开发者们需要先下载安装 Huawei DevEco Studio，如果对于这个流程不甚熟悉，可以参照官网的教程操作。 · HuaweiDevEco Studio 安装指南： https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_i nstall-0000001053582415 请注意，本次 demo 主要针对逻辑梳理和要点讲解，限于篇幅长度不会展示完整代码，开发者们可打开以下链接获取完整代码哦~ https://gitee.com/harmonyos-developer/kaifazheshuo 下面我们就进入项目开发环节，逐一攻破以上要点，一起探寻贪吃蛇之旅：创建项目打开 DevEco Studio，创建新项目（New Project），选择 Phone 设备，点击 Empty Feature Ability (JS)模板，注意项目命名须不带中文或特殊字符（如此处的 MyPhoneGame），最后点击 Finish。来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

项目创建后，我们先了解一下目录结构：来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

 index.hml 文件：描述页面布局  index.css 文件：描述页面样式  index.js 文件：处理页面和用户之间的交互  app.js 文件：管理全局 JavaScript 逻辑和应用程序生命周期来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

 pages 目录：存储所有组件页面  java 目录：存放与项目相关的 java 文件其中，app.js 文件、pages 目录和 java 目录内容均由 JS 模板自动提供。 1）绘制固定组件 ① 绘制画布，在 index.hml 文件中，设定画布的颜色和尺寸； index.hml

Snake Game

在 index.css 文件中，可以描述画布的呈现样式； index.css 来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

.container { flex-direction: column; 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 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

然后，在 index.hml 文件中，创建“上下左右”四个导航按钮，并将方向保存在变量 “this.direction”中； index.hml

在 index.css 文件中，设置导航按钮大小、位置、边框和颜色等参数； Index.css .backBtnup, .backBtncenter, .backBtnleft, .backBtnright { width: 100px; height: 100px; 来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

margin-bottom: 20px; margin-top: 20px; border-radius: 10px; background-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://mp.weixin.qq.com/s/v4Qy_42bCxE4rp1uaSXsyA

分享到：

赞收藏

资料库

4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏.pdf

相关推荐

最新资料