当前位置： 首页 > 科技观察

鸿蒙实战-贪吃蛇游戏-JS全文笔记

时间：2023-03-21 16:11:17 科技观察

更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com但是我对官方资料中的这个吃蛇的项目很感兴趣。打算再做一遍流程。资料中虽然也有开发过程，但是不完整，没有注释。所以决定自己写之后，总结一下每一步，写个笔记。属于二次创作！开发的程序界面如下。复制代码一次运行，不会超过2h。适合刚刚学习鸿蒙的开发者~喜欢的话不妨收藏一下(≧?≦)?正文1.创建项目1.选择一个JS模板2.定义自己的项目名和包名，以及然后单击finsh3。创建完成后，生成的目录结构如下：由于项目比较简单，所以只需要在红框内的位置编写代码即可。这是项目默认生成的！二、写代码1、导入图片资源在我提供的压缩包里找到图片文件夹，直接复制到项目目录下。2、写一个html页面，先定义标签、内容和资源，然后运行查看结果：SnakeGameScore:

运行后发现样式布局混乱，不过没关系，主要目的运行是为了保证样式和资源不加载。一切加载完成后，调整样式。（测试请到顶部导航栏，点击工具>HVDManager>登录开发者账号>选择P40后面的三角）。3、编写调整样式的css代码，在要调整的样式后面加上对应的类名class=""，通过这些类名调用css文件的数据。分数：确认类名写完后，根据index.css文件中的类名编写css。.container{flex-direction:column;justify-content:center;align-items:center;background-color:white;}.title{font-size:100px;margin-bottom:130px;}.scoretitle{font-size:50px;margin-top:30px;}/*css选择器，逗号代表并列关系，具体百度，因为前端博大精深*/.backBtnup,.backBtncenter,.backBtnleft,.backBtnright{width:100px；高度：100px；margin-bottom:20px;margin-top:20px;border-radius:10px;background-color:black;}.backBtnup{margin-top:80px;}.backBtncenter{margin-left:40px;margin-right:40px;}写完上面的内容，再运行一下。找了一下，只需要对按钮进行处理即可。4、优化按钮想要的效果是方向键的排列方式和键盘的方向一样，所以只需要处理下面三个键。您可以用div标签包装它们并定义一个新属性。
css部分新增代码：.directsecond{flex-direction:row;justify-content:center;align-items:center;}运行测试，发现我们达到了预期的效果。3、写JS代码我们发现现在只有样式，点按钮没有任何反馈，也没有蛇和食物...所以我们接下来写JS代码来解决这些东西，但是不要写作时不要考虑它。你应该先设计再写代码！1.设计思路按钮是点击屏幕触发的，所以必须有点击事件。鼠标点击事件有相应的方法。通过该方法传递不同的参数来区分不同的方向。食物生成随机生成，判断食物如果生成的位置出现在蛇身上，重新生成蛇身的初始化（因为案例比较简单，所以初始位置不随机生成）给定长度，设置一个空数组通过for循环，将x和y的坐标Push到数组中，作为蛇身各个格子的位置。蛇形运动基于每帧重新绘制位置。如果吃水果，头部会立即变长。如果水果没有被吃掉，则去掉尾巴，将head方向指向的下一个位置记录在数组的头部。部分，等待下一个刷新帧，判断游戏结束，撞墙往相对方向移动，形成循环2.方法调用流程图虚线代表if判断，会调用方法只有满足判断条件。3.在index.html文件中编写绑定相应事件的代码（这也是html文件的全部内容）SnakeGame!--右键-->
!--使用if判断，如果游戏结束，则显示模块-->GameOver!!!Score:{{score}}
index.js文件内容exportdefault{data:{title:"",snakeSize:30,//蛇形网格像素大小w:600,//背景宽度h:600,//背景高度score:0,//score为0snake:[],//数组用来存储小蛇每一个格子的位置ctx:null,//食物用来调用填充颜色:null,//食物位置方向:'',//按钮gameOver的状态:false,//游戏状态tail:{//记录更新后蛇头的位置x:0,y:0},interval:null//获取setInterval()的返回值},onInit(){this.title=this.$t('strings.world');},onShow(){//通过$refs获取组件，然后调用组件的变量和方法constcanvas=this.$refs.canvasref;//指定二维绘画this.ctx=canvas。getContext("2d");//第一次打开app时，初始化蛇的方向this.direction='down';//调用初始化蛇体的方法this.drawSnake()//创建食物的位置this.createFood()//渲染框图片this.paint()},//绘制背景drawArea(){varctx=this.ctx//设置填充颜色ctx.fillStyle='#61c7e6';//Fillctx.fillRect(0,0,this.w,this.h);//设置矩阵颜色ctx.strokeStyle='#00000';//矩阵线宽ctx.lineWidth=5;//绘制矩阵（不着色）)ctx。strokeRect(0,0,this.w,this.h);this.ctx=ctx},//创建蛇体drawSnake(){varlen=7;varsnake=[];//默认蛇的长度为7for(vari=len-1;i>=0;i--){//在数组中保存x轴和y轴的坐标数据，这些数据是每条蛇在网格中的位置snake.push({x:0,y:i});}//更新蛇的长度this.snake=snake;},//设计蛇身的颜色Snake(x,y){//singlesquareofsnakevarctx=this.ctx;//蛇的颜色和填充的位置和大小ctx.fillStyle='#e28743';//fillRect()指的是要填充的位置和大小被填充参数说明：fillRect(X轴位置,Y轴位置,width,height)ctx.fillRect(x*this.snakeSize,y*this.snakeSize,this.snakeSize,this.snakeSize);//蛇的内部网格边框颜色，只有添加后才会分ctx.strokeStyle='#063970';ctx.strokeRect(x*this.snakeSize,y*this.snakeSize,this.snakeSize,this.snakeSize);this.ctx=ctx;},//设计食用色素cookie(x,y){varctx=this.ctx;//食用色素和填充位置及大小ctx.fillStyle='#e2d743';ctx.fillRect(x*this.snakeSize,y*this.snakeSize,this.snakeSize,this.snakeSize);this.ctx=ctx;},//创建食物位置createFood(){//随机生成食物位置//这里20为背景高度（宽度）/grid高度（宽度），即600/30=20this.food={x:Math.floor((Math.random()*20)+1),y:Math.floor((Math.random()*20)+1)}for(vari=0;i>this.snake.length;i++){//获取蛇刚创建时各个点在蛇身上的位置，并与食物的位置进行比较varsnakeX=this.snake[i].x;varsnakeY=this.snake[i].y;//如果食物的位置出现在蛇的身上，重新生成if(this.food.x===snakeX&&this.food.y===snakeY||this.food.y===snakeY&&this.food.x===snakeX){this.food.x=Math.floor((Math.random()*20)+1);this.food.y=Math.floor((Math.random()*20)+1);}}},//检查是否撞墙checkCollision(x,y,array){for(vari=0;i
鸿蒙实战-贪吃蛇游戏-JS全文笔记相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。