微信小程序-贪吃蛇教程示例(贪吃蛇微信游戏)

很久以前，差不多半年前，作者发表了一篇关于OC版蛇的开发的文章。过了好几个月，微信小程序诞生了，我有空就写了个小版本。

请务必阅读下面的文章。作者是个ios，小程序大部分都是前端知识。作者以前没有做过类似的开发，所以代码相当糟糕。很多东西都是边查资料边写的。请轻轻地喷。阿门！

进入商务页面布局

小程序就不介绍了。官方有详细的文件。我们先来看看图片。

就是这样。游戏界面与之前的OC版本类似。以作者的水平，只能这样设计。毕竟不专业。这条蛇怎么看起来像个J（和）B（谐音）？喜悦:

让我们看看用于添加组件的wxml文件。

& lt视图class = & quot后视图& quot& gt& lt画布canvas -id = & quot；蛇帆布& quotclass = & quot画布& quot/& gt；& lt/view & gt；& lt视图class = & quot控件视图& quot& gt& ltbutton class = & quotbtnClass & quotbindtap = & quot改变方向id = & quot向上& quot& gtup & lt/button & gt；& lt视图样式= & quot显示器:flex身高33.33% & quot；& gt& ltbutton class = & quotbtnClass & quotbindtap = & quot改变方向id = & quot左& quot& gtleft & lt/button & gt；& ltbutton class = & quotbtnClass & quotbindtap = & quot开始游戏& quot& gt{ { btnTitle } } & lt/button & gt；& ltbutton class = & quotbtnClass & quotbindtap = & quot改变方向id = & quot右& quot& gt右& lt/button & gt；& lt/view & gt；& ltbutton class = & quotbtnClass & quotbindtap = & quot改变方向id = & quot向下& quot& gt羽绒& lt/button & gt；& lt/view & gt；内容相当简单，上面有一个视图，里面有一个画布，下面有一个视图，里面有五个按钮。

让我们来看看wxss的布局。

内容不多。其实我对CSS了解不多。我多年前研究过它，但它早在:hankey时就出院了。也许有更好的布局，但我可以将就一下。

功能实现

布局仍然很简单，虽然不熟悉，但在多尝试几次后仍然可以制定出来。接下来，功能逻辑的实现是重点，编程语言当然是js。

据说我在学习js的时候写了一本满是笔记的书，但是.....算了，过去的就让它过去吧，让它过去吧。

这个想法实际上与OC版本相同。

Snake:创建一个点坐标数组，然后在画布上以坐标点为中心绘制一个矩形。

食:随机一个坐标点，不能在蛇上，否则又随机了。

蛇的移动:只需将蛇尾的坐标移动到蛇头的前面。

吃食物:每条蛇移动后，如果蛇头的坐标与食物的坐标相同，蛇就会生长。

蛇的成长:只需在蛇的尾巴后面添加一个点坐标。

游戏结束:当黑鱼过线或撞到身体时，游戏结束。

创造一条蛇

//创建一条蛇，一开始有5段，nodeWH是矩形函数Create Snake（）的边长{ nodes . splice（0，nodes . length）//清空数组for（var I = 4；我& gt= 0;i--）{ var Node = new Node（nodeWH *（I+0.5），nodeWH * 0.5）nodes . push（Node）；}}创造食物

函数create food（）{//rectangle的边长为10，画布宽度为250，高度为350，因此x只能是5-245。y只能取5-345var x = parseint（数学。random（）* 24）* node wh+node wh * 0.5 var y = parse int（math。random（）* 34）* nodewh+nodewh * 0.5//如果食物的坐标在蛇上，则重新创建for（var I。I & lt；节点。长度；i++）{ var node = nodes【I】if（node . x = = x & amp；& amp节点。y = = y）{ create food（）return } }/Node是一个用户定义的类，有两个属性x和y，表示蛇在坐标food = new Node（x，y）}处的移动。

蛇沿着一个方向移动，因此使用一个可变方向来记录蛇的移动方向。游戏开始时，默认是向右移动。

据说蛇的移动是将蛇尾的坐标移动到蛇头的前方，但这个前方不是固定的，而是根据方向来判断的。如果它向右移动，右边就是前面，以此类推。

进食和蛇的生长

每次移动后，判断蛇头的坐标是否与食物的坐标相等就可以了。吃完食物后，蛇的长度会增加，并产生一种新的食物。

if（head . x = = food . x & amp；& amp头。y = =食物。y）{ score ++节点。push（lastPoint）create food（）} }在上面的代码中，last point是蛇每次移动前尾巴的坐标。如果在移动后吃了食物，可以在移动前直接在尾巴上添加一段。

游戏结束

每次移动后，需要判断蛇头是否超出画布或击中自己的身体。

函数是destroy（）{ var head = nodes【0】//判断你是否击中了你的身体for（var I = 1；我& lt节点。长度；i++）{ var node = nodes【I】if（head . x = = node . x & amp；& amphead . y = = node . y）{ game over（）}//判断水平方向是否出格if（head . x

每次移动都要画画，所以需要计时器。作者使用setInterval。

function move（）{ last point = nodes【nodes . length -1】var node = nodes【0】var new node = { x:node . x，y:node . y } switch（direction）{ case & amp；#39;up & amp#39;:new node . y -= nodeWH；打破；案例与案例。#39;左& amp#39;:new node . x -= nodeWH；打破；案例与案例。#39;右与右。#39;:new node . x+= node wh；打破；案例与案例。#39;羽绒& amp#39;:new node . y+= node wh；打破；} nodes . pop（）nodes . un shift（new node）moveEnd（）} function start game（）{ if（isGameOver）{ direction = & amp；#39;右与右。#39;Create Snake（）Create Food（）Score = 0 is game over = false } timer = setInterval（move，300）}在线上，据说setInterval的性能不是很好，建议使用requestAnimationFrame，但很遗憾，我无法使用它。确切地说，我不知道如何暂停它。

var animate id = 0 function move（）{。。。animate id = requestAnimationFrame（move）} function start game（）{...animation id = RequestAnimationframe（move）}使用上述方法，snake可以移动和重绘界面。但是，每次执行Animationid时，它都会被赋予一个新值，因此不能暂停cancelAnimationFrame（animate id）的使用。如果有懂前端开发的大神，请指点迷津。

几乎整个逻辑是这样的。喜欢学习的可以自己试试。

【相关建议】

1.用html5分享一个蛇特效代码。

2.用Python写一个贪吃蛇游戏的代码示例。

3.snake的java代码示例。

4.【HTML5代码艺术】17行代码贪吃蛇游戏

5.JavaScript是一个简单的snake，基本上面向对象。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：微信小程序-贪吃蛇教程示例(贪吃蛇微信游戏) https://zhujicankao.com/113103.html