微信小程序如何实现贪吃蛇-创新互联

这篇文章将为大家详细讲解有关微信小程序如何实现贪吃蛇,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的海盐网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

进入正题

页面布局

微信小程序如何实现贪吃蛇

就是这个样子的,游戏界面跟之前的OC版是差不多的,以笔者的水平,只能设计成这样了,毕竟不是专业的,话说这蛇怎么长的像个J(和)B(谐)啊:joy:

先来看看用来添加组件的wxml文件


  


    up
    
        left
        {{btnTitle}}
        right
    
    down

内容是相当简单滴,上面一个view,里面放一个画布,下面一个view,里面放5个按钮

再来看看wxss布局

微信小程序如何实现贪吃蛇

内容不多,其实笔者对CSS也不是很了解,很多年前学习过,然而早随着:hankey:排出去了,也许还有更优的布局方式,不过凑合着用吧

功能实现

布局还是很简单的,虽然不熟,但是多尝试几下还是可以弄出来的,接下来功能逻辑的实现才是重点,编程语言当然是js了。

话说笔者当年学js的时候,可是写了满满一本的笔记,然而......算了,过去的就让他过去吧,往事不提也罢。

思路其实与OC版的一样

蛇:创建一个点坐标数组,然后以坐标点为中心在画布上画矩形

食物:随机一个坐标点,该点不能在蛇身上,否则重新随机

蛇的移动:把蛇尾的坐标移到蛇头前面就行了

吃到食物:每次蛇移动完毕后,如果蛇头的坐标与食物的坐标一样,则蛇增长

蛇的增长:在蛇尾后面加一个点坐标即可

游戏结束:蛇头越界或撞到自己身体即游戏结束

创建蛇

//创建蛇,初始为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);
  }
}

创建食物

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

蛇的移动

蛇的移动是有方向的,所以用一个变量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()
  }
  //判断垂直方向是否越界
  if (head.y < 5 || head.y > 345) {
    gameOver()
  }
}

界面绘制

每次移动都要绘制,所以需要一个定时器,笔者用的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)
}

网上说setInterval的性能并不怎么好,建议用requestAnimationFrame,但是很遗憾,笔者不会用,准确的说是不知道怎么暂停

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

使用上面的方法可以实现蛇的移动与界面重绘,然而每次执行animateId都会被赋予新的值,所以使用cancelAnimationFrame(animateId)无法暂停。

关于“微信小程序如何实现贪吃蛇”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


文章标题:微信小程序如何实现贪吃蛇-创新互联
本文地址:http://scyanting.com/article/ddpspd.html