Exemple de didacticiel WeChat Mini Program-Snake

Il y a longtemps, il y a presque six mois, l'auteur a publié un article sur le développement de la version OC de Snake. Après plusieurs mois, le mini programme WeChat est sorti, alors je l'ai réécrit alors que je n'avais rien à faire. do. Une version mini du programme

Assurez-vous de lire le passage suivant

L'auteur travaille sur iOS et la plupart des mini programmes sont des connaissances frontales. n'a jamais fait de développement similaire auparavant, donc l'écriture du code est assez mauvaise et beaucoup de choses ont été écrites lors de la vérification des informations. N'hésitez pas à commenter, Amen !

Allons droit au but

Mise en page

Je ne présenterai pas le mini programme Le document officiel contient des documents détaillés

Voici à quoi ça ressemble. L'interface du jeu est similaire à la version précédente d'OC. Avec le niveau de l'auteur, je ne peux que la concevoir comme ça. Après tout, je ne le suis pas. un professionnel. Pourquoi ce serpent ressemble-t-il à ceci ? A J (harmonie) B (harmonie) : joie :

Jetons d'abord un coup d'œil au fichier wxml utilisé pour ajouter des composants

<view class="backView">
  <canvas canvas-id="snakeCanvas" class="canvas"/>
</view>
<view class="controlView">
    <button class="btnClass" bindtap="changeDirection" id="up">up</button>
    <view style="display:flex; height:33.33%">
        <button class="btnClass" bindtap="changeDirection" id="left">left</button>
        <button class="btnClass" bindtap="startGame" >{{btnTitle}}</button>
        <button class="btnClass" bindtap="changeDirection" id="right">right</button>
    </view>
    <button class="btnClass" bindtap="changeDirection" id="down">down</button>
</view>

Le contenu est assez simple, la vue ci-dessus, à l'intérieur Mettez un canevas, une vue en dessous, et mettez 5

boutons

Jetons un coup d'œil à la mise en page

wxss

Il n'y a pas beaucoup de contenu. En fait, l'auteur ne connaît pas grand-chose au CSS. Je l'ai appris il y a de nombreuses années, mais il a été éliminé avec :hankey:. être une meilleure méthode de mise en page, mais je m'en contenterai

Implémentation fonctionnelle

La mise en page est toujours très simple Bien que je ne la connaisse pas, je peux toujours la comprendre après un. quelques tentatives supplémentaires. Ensuite, l'implémentation de la logique fonctionnelle est au centre de l'attention. Le langage de programmation est bien sûr js.

Au fait, quand j'apprenais le js, j'écrivais un livre plein de notes, mais... oubliez ça, laissez passer le passé et ne mentionnez pas le passé.

L'idée est en fait la même que la version OC

Snake : créez un tableau de coordonnées de points, puis dessinez un rectangle sur la toile avec le point de coordonnées comme centre

Nourriture : un point de coordonnées aléatoire, le point ne peut pas être sur le serpent, sinon il sera re-randomisé

Mouvement du serpent : il suffit de déplacer les coordonnées de la queue du serpent devant la tête du serpent

Manger de la nourriture : après chaque mouvement du serpent, si la tête du serpent Les coordonnées sont les mêmes que les coordonnées de la nourriture, alors le serpent grandit

Croissance du serpent : ajoutez une coordonnée de point derrière la queue du serpent

Le jeu se termine : la tête du serpent franchit la frontière ou frappe son propre corps, le jeu se termine

Créer un serpent

//创建蛇，初始为5节，nodeWH为矩形的边长
function createSnake(){
  nodes.splice(0, nodes.length) //清空数组
  for (var i = 4; i >= 0; i--) {
    var node = new Node(nodeWH * (i + 0.5), nodeWH * 0.5)
    nodes.push(node);
  }
}

Créer de la nourriture

function createFood(){
  //矩形的边长为10，画布宽度为250，高度为350，所以x只能取5-245，y只能取5-345
  var x = parseInt(Math.random() * 24) * nodeWH + nodeWH * 0.5
  var y = parseInt(Math.random() * 34) * nodeWH + nodeWH * 0.5

  //如果食物的坐标在蛇身上，则重新创建
  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)
}

Mouvement du serpent

Le mouvement du serpent a une direction, utilisez donc une direction variable pour enregistrer la direction de déplacement du serpent Lorsque le jeu démarre, la valeur par défaut est de se déplacer vers la droite.

Il est mentionné ci-dessus que le mouvement du serpent consiste à déplacer les coordonnées de la queue du serpent vers l'avant de la tête du serpent, mais cet avant n'est pas fixe, mais est jugé en fonction de la direction. se déplace vers la droite, le côté droit est l'avant. Analogie

Manger de la nourriture et croissance du serpent

Après chaque mouvement, il est OK de juger si les coordonnées de la tête du serpent sont égales à celles du serpent. coordonnées de la nourriture. Après avoir mangé la nourriture, la longueur du serpent augmentera, et Pour créer une nouvelle nourriture

function isEatedFood(){
  var head = nodes[0]
  if (head.x == food.x && head.y == food.y) {
    score++
    nodes.push(lastPoint)
    createFood()
  }
}

Dans le code ci-dessus, lastPoint est la coordonnée de la queue du serpent avant chaque mouvement de le serpent. Si de la nourriture est mangée après avoir bougé, ajoutez-en une directement à la queue du serpent avant de bouger

Le jeu est terminé

Après chaque mouvement, vous devez juger si le serpent. la tête dépasse la toile ou frappe votre propre corps

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()
  }
  //判断垂直方向是否越界
  if (head.y < 5 || head.y > 345) {
    gameOver()
  }
}

Dessin d'interface

Chaque mouvement doit être dessiné, donc une minuterie est nécessaire. L'auteur utilise setInterval

<. 🎜>On dit en ligne que les performances de setInterval ne sont pas très bonnes. Il est recommandé d'utiliser requestAnimationFrame, mais malheureusement, l'auteur ne sait pas comment faire. Pour être précis, je ne sais pas comment faire une pause <🎜. >

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)
}

L'utilisation de la méthode ci-dessus peut réaliser le mouvement du serpent et le redessin de l'interface. Cependant, chaque fois que animateId est exécuté, une nouvelle valeur lui sera attribuée, donc l'utilisation de CancelAnimationFrame(animateId ) ne peut pas être mise en pause. . S'il y a un maître qui comprend le développement front-end, veuillez me guider

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

Presque toute la logique est comme ça Si vous aimez étudier, vous pouvez l'essayer vous-même

[Recommandations associées. ]

1.

Partager un code d'effets spéciaux de serpent implémenté en html5

2 Un exemple de code d'écriture d'un jeu de serpent en Python

3 . Exemple de code d'implémentation Java de Snake

4 [HTML5 Code Art] Jeu Snake avec 17 lignes de code

5 .

JavaScript est simple et gourmand, essentiellement orienté objet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!