前言
来啦老铁！
咱们接着上一篇文章，继续探索微信小游戏。当然，咱们不是，也不可能在这么短时间，这么少经验的情况下，成为一名微信小游戏开发高手，咱们仅仅是玩玩看、了解了解，有机会再深入哈！
微信小程序
小程序与普通网页开发的区别
小程序的运行环境
微信小游戏与微信小程序
微信小游戏与微信小程序
微信小游戏与微信小程序
小游戏开发难点
微信小游戏开发小实践
我打算做个简单的微信小游戏，大概描述一下游戏：
- 页面掉落方块，玩家通过点击方块使方块消失，从而得分；
- 当方块掉落出屏幕，则游戏结束；
- 方块掉落考虑随时间不断累加，掉落速度越来越快，提高游戏可玩性和难度；
- 游戏需要做开始页面，点击“点我开始”进入游戏；
我们可以给这个游戏起个响亮的名字：
是男人就消灭500个方块！
哈哈~
话不多说，直接上代码：
- 在项目根目录下创建一个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文件，提高代码可读性，减少代码冗余等；
- 修改项目入口文件game.js;
const qitao = require("./qitao")
module.exports=function(){
qitao()
}()
- 编译小游戏；
- 开发者工具中点击编译按钮；
编译小游戏
- 编译完成即可在左侧模拟器中看到效果；
预览
- 模拟器中试玩小游戏；
将鼠标移至模拟器中，即可用鼠标光标模拟手指，然后就可以用鼠标试玩游戏啦！
模拟器中试玩小游戏
微信小游戏发布
1. 上传代码；
上传代码
上传成功
2. 发布体验版；
发布体验版入口
选为体验版版本
成功选为体验版
注意：
首次发布体验版才需要这样稍微麻烦，后续发布体验版，直接上传就可以了，实时生效；
- 使用体验版；
发布完体验版后，手机扫描“选为体验版”成功页面的二维码，就能在手机端玩我们的小游戏啦！
3. 发布线上版本；
点击版本管理页面的提交审核按钮，即可进入发布线上版本流程；
提交审核
之前在发布线上版本小程序时(二者发布流程基本一致)，是需要一定的审核时间的，小游戏应该也是，笔者就不再尝试啦，请读者朋友自行实操哦~
好啦，又是一个深夜，咱今天先聊到这里吧，有缘再续~
如果本文对您有帮助，麻烦动动手指点点赞？
谢谢！
