前言

来啦老铁！

咱们接着上一篇文章，继续探索微信小游戏。当然，咱们不是，也不可能在这么短时间，这么少经验的情况下，成为一名微信小游戏开发高手，咱们仅仅是玩玩看、了解了解，有机会再深入哈！

微信小程序

小程序与普通网页开发的区别 小程序的运行环境

微信小游戏与微信小程序

微信小游戏与微信小程序 微信小游戏与微信小程序 小游戏开发难点

微信小游戏开发小实践

我打算做个简单的微信小游戏，大概描述一下游戏：

• 页面掉落方块，玩家通过点击方块使方块消失，从而得分；
• 当方块掉落出屏幕，则游戏结束；
• 方块掉落考虑随时间不断累加，掉落速度越来越快，提高游戏可玩性和难度；
• 游戏需要做开始页面，点击“点我开始”进入游戏；

我们可以给这个游戏起个响亮的名字：

是男人就消灭500个方块！

哈哈~

话不多说，直接上代码：

1. 在项目根目录下创建一个js文件，文件名任意，比如：qitao.js，并在qitao.js完成代码：

module.exports = function() {
  const { windowWidth, windowHeight } = wx.getSystemInfoSync()
  const canvas = wx.createCanvas()
  const ctx = canvas.getContext('2d')

  var image = wx.createImage()
  image.src = 'images/star.jpg'

  let score=0
  let first_x = 0
  let first_y = parseInt(Math.random()*200-200)
  let second_y = parseInt(Math.random()*200-200)
  let third_y = parseInt(Math.random()*200-200)
  let fourth_y = parseInt(Math.random()*200-200)
  let colors=['lightgreen','orange','cyan','white','pink','lightblue','gold','yellow','gray','purple']
  let first_color=colors[parseInt(Math.random()*10)]
  let second_color=colors[parseInt(Math.random()*10)]
  let third_color=colors[parseInt(Math.random()*10)]
  let fourth_color=colors[parseInt(Math.random()*10)]
  let speed=2
  let speed_interval=0
  let start=false
  setInterval(function(){
    if(!start){
      // 绘制背景
      ctx.fillStyle = 'cyan'
      ctx.fillRect(0, 0, windowWidth, windowHeight)

      // 绘制按钮
      ctx.fillStyle = 'lightpink'
      ctx.fillRect(windowWidth/2-100, windowHeight/2-50, 200, 100)

      // 绘制开始页面的得分
      ctx.fillStyle = 'white'
      ctx.font      = "20px Arial"
      ctx.fillText(`得分:${score}`,windowWidth/2-25,windowHeight/2-60)

      //绘制按钮字体
      ctx.fillStyle = 'white'
      ctx.font      = "40px Arial"
      ctx.fillText('点我开始',windowWidth/2-80,windowHeight/2+10)
      return
    }

    // 清除canvas上的内容，重新绘制
    ctx.clearRect(0, 0, windowWidth, windowHeight)
    // 绘制背景
    ctx.drawImage(image, 0, 0, windowWidth, windowHeight)

    // 得分显示逻辑
    ctx.fillStyle = 'white'
    ctx.font    = "18px Arial"
    ctx.fillText(`得分：${score}`, 20, 30)

    // 方块掉落逻辑
    ctx.fillStyle = first_color
    first_y += speed
    ctx.fillRect(first_x, first_y, windowWidth/4, 50)

    ctx.fillStyle = second_color
    second_y += speed
    ctx.fillRect(windowWidth/4 + 5, second_y, windowWidth/4, 50)

    ctx.fillStyle = third_color
    third_y += speed
    ctx.fillRect((windowWidth/4 + 5)*2, third_y, windowWidth/4, 50)

    ctx.fillStyle = fourth_color
    fourth_y+=speed
    ctx.fillRect((windowWidth/4 + 5)*3, fourth_y, windowWidth/4, 50)

    // 掉落方块加速逻辑
    speed_interval+=1
    if(speed_interval==1000 && speed<=16){
      speed_interval=0
      speed+=1
    }

    // 掉落方块颜色随机逻辑
    if(first_y >= windowHeight || second_y >= windowHeight || third_y >= windowHeight || fourth_y >= windowHeight){
      start=false
      first_x = 0
      first_y = parseInt(Math.random()*200-200)
      second_y = parseInt(Math.random()*200-200)
      third_y = parseInt(Math.random()*200-200)
      fourth_y = parseInt(Math.random()*200-200)
      colors=['lightgreen','orange','cyan','white','pink','lightblue','gold','yellow','gray','purple']
      first_color=colors[parseInt(Math.random()*10)]
      second_color=colors[parseInt(Math.random()*10)]
      third_color=colors[parseInt(Math.random()*10)]
      fourth_color=colors[parseInt(Math.random()*10)]
      speed=2
      speed_interval=0
      start=false
    }
  }, 10)

  wx.onTouchStart((result) => {
    let x = result.changedTouches[0].clientX
    let y = result.changedTouches[0].clientY
    // 开始游戏逻辑
    if(!start && x>windowWidth/2-100 && x<windowWidth/2+100 && y>windowHeight/2-50 && y<windowHeight/2+50){
      score=0
      start=true
    }
    // 得分统计逻辑
    if(x>0 && x<first_x+windowWidth/4 && y<first_y+50 && y>first_y){
      score+=1
      first_y = parseInt(Math.random()*300-300)
      first_color=colors[parseInt(Math.random()*10)]
    }
    if(x>windowWidth/4 + 5 && x<windowWidth/4 + 5+windowWidth/4 && y<second_y+50 && y>second_y){
      score+=1
      second_y = parseInt(Math.random()*300-300)
      second_color=colors[parseInt(Math.random()*10)]
    }
    if(x>(windowWidth/4 + 5)*2  && x<(windowWidth/4 + 5)*2+windowWidth/4 && y<third_y+50 && y>third_y){
      score+=1
      third_y = parseInt(Math.random()*300-300)
      third_color=colors[parseInt(Math.random()*10)]
    }
    if(x>(windowWidth/4 + 5)*3 && x<(windowWidth/4 + 5)*3+windowWidth/4 && y<fourth_y+50 && y>fourth_y){
      score+=1
      fourth_y = parseInt(Math.random()*300-300)
      fourth_color=colors[parseInt(Math.random()*10)]
    }
  })
}

上述代码我没有考虑封装复用，所有实现都在一个js文件内，项目实战时可以考虑将不同操作封装到不同js文件，提高代码可读性，减少代码冗余等；

2. 修改项目入口文件game.js;

const qitao = require("./qitao")
module.exports=function(){
  qitao()
}()

3. 编译小游戏；

• 开发者工具中点击编译按钮；

编译小游戏

• 编译完成即可在左侧模拟器中看到效果；

预览

4. 模拟器中试玩小游戏；
   将鼠标移至模拟器中，即可用鼠标光标模拟手指，然后就可以用鼠标试玩游戏啦！

模拟器中试玩小游戏

微信小游戏发布

1. 上传代码；

上传代码 上传成功

2. 发布体验版；

• 登陆小程序管理页面：https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1626445812

• 发布体验版；

发布体验版入口 选为体验版版本 成功选为体验版

注意：

首次发布体验版才需要这样稍微麻烦，后续发布体验版，直接上传就可以了，实时生效；

• 使用体验版；

发布完体验版后，手机扫描“选为体验版”成功页面的二维码，就能在手机端玩我们的小游戏啦！

3. 发布线上版本；

点击版本管理页面的提交审核按钮，即可进入发布线上版本流程；

提交审核

之前在发布线上版本小程序时(二者发布流程基本一致)，是需要一定的审核时间的，小游戏应该也是，笔者就不再尝试啦，请读者朋友自行实操哦~

好啦，又是一个深夜，咱今天先聊到这里吧，有缘再续~

如果本文对您有帮助，麻烦动动手指点点赞？

谢谢！