Shulou(Shulou.com)06/03 Report--

This article will explain in detail how WeChat Mini Programs realizes gluttonous snakes. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Get to the point.

Page layout

This is what it looks like. The game interface is similar to the previous OC version. At the author's level, it can only be designed like this. After all, it is not professional. How does this snake look like a J (and) B (harmonic) ah: 喜悦:

Let's first take a look at the wxml file used to add components

Up left {{btnTitle}} right down

The content is quite simple. There is a view above, a canvas inside, and a view below, with five buttons inside.

Let's take a look at the wxss layout.

The content is not much, in fact, the author does not know much about CSS. I learned it many years ago, but as early as: hankey: out, there may be a better layout, but make do with it.

Function realization

The layout is still very simple, although not familiar, but a few more attempts can still be done, and then the implementation of functional logic is the focus, of course, the programming language is js.

It is said that when I was studying js, I wrote a book full of notes, however. Forget it. Let bygones be bygones. Forget about it.

The train of thought is actually the same as the OC version.

Snake: create an array of point coordinates and draw a rectangle on the canvas around the coordinate points

Food: random a coordinate point, the point can not be on the snake, otherwise re-random

Snake's movement: just move the coordinates of the snake's tail to the front of the snake's head.

Eat food: after each snake movement, if the coordinates of the snake head are the same as those of the food, the snake grows.

Snake growth: add a point coordinate to the tail of the snake

Game over: the snakehead crosses the line or hits his own body, that is, the game is over.

Create a snake

/ / create a snake with an initial length of 5 nodes and a rectangular side length of nodeWH function createSnake () {nodes.splice (0, nodes.length) / / empty the array for (var I = 4; I > = 0; iMel -) {var node = new Node (nodeWH * (I + 0.5), nodeWH * 0.5) nodes.push (node);}}

Create food

Function createFood () {/ / rectangle has a side length of 10, canvas width of 250 and height of 350, so x can only take 5-245 var x = parseInt (Math.random () * 24) * nodeWH + nodeWH * 0.5 var y = parseInt (Math.random () * 34) * nodeWH + nodeWH * 0.5 / / if the coordinates of the food are on the snake, recreate the for (var I = 0; I

< nodes.length; i++) { var node = nodes[i] if (node.x == x && node.y == y) { createFood() return } } //Node为自定义的类，有两个属性x和y，表示坐标 food = new Node(x,y)} 蛇的移动 蛇的移动是有方向的，所以用一个变量direction来记录蛇的移动方向，游戏开始时，默认是向右移动。 上面有说到蛇的移动就是把蛇尾的坐标移到蛇头前面，但是这个前面并不是固定的，而是根据方向来判断的，如果向右移动则右边为前方，以此类推 吃到食物与蛇增长 每次移动完毕后，判断蛇头的坐标是否与食物的坐标相等就OK了，吃到食物后蛇的长度会增加，并且要创建一个新的食物 function isEatedFood(){ var head = nodes[0] if (head.x == food.x && head.y == food.y) { score++ nodes.push(lastPoint) createFood() }} 上面的代码中，lastPoint就是蛇每次移动前，蛇尾的坐标，如果移动后吃到食物，那么直接在移动前的蛇尾处加上一节即可 游戏结束 每次移动后，都要判断蛇头是否超过画布，或者撞到自己的身体 function isDestroy(){ var head = nodes[0] //判断是否撞到自己身体 for (var i = 1; i < nodes.length; i++) { var node = nodes[i] if (head.x == node.x && head.y == node.y) { gameOver() } } //判断水平方向是否越界 if (head.x < 5 || head.x >

245) {gameOver ()} / / determine whether the vertical direction is out of bounds if (head.y)

< 5 || head.y >

345) {gameOver ()}}

Interface drawing

You need to draw every move, so you need a timer. The author uses setInterval.

Function move () {lastPoint = nodes [nodes.length-1] var node = nodes [0] var newNode = {x: node.x, y: node.y} switch (direction) {case 'up': newNode.y-= nodeWH; break; case' left': newNode.x-= nodeWH; break; case 'right': newNode.x + = nodeWH; break; case' down': newNode.y + = nodeWH; break } nodes.pop () nodes.unshift (newNode) moveEnd ()} function startGame () {if (isGameOver) {direction = 'right' createSnake () createFood () score = 0 isGameOver = false} timer = setInterval (move,300)}

It is said on the Internet that the performance of setInterval is not very good, and it is recommended to use requestAnimationFrame, but unfortunately, the author does not know how to use it. To be exact, I do not know how to pause.

Var animateId = 0function move () {. . . AnimateId = requestAnimationFrame (move)} function startGame () {. . . AnimateId = requestAnimationFrame (move)}

You can use the above method to move the snake and redraw the interface, but each execution of animateId is given a new value, so using cancelAnimationFrame (animateId) cannot be paused.

This is the end of the article on "how to realize Snake by WeChat Mini Programs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.