扫雷-单机游戏-微信小游戏项目开发入门

关于这个文章能看懂的条件，需要读者具备如下三个条件：

熟悉 HTML
熟悉 HTML 中的 Canvas
JavaScript基础

实现扫雷小游戏，它的游戏规则很简单，只要占领完没有问题的方格就可以，有问题的方格就相当于埋了雷（坑），不要碰，靠运气猜，还有判断，难度越大，胜率就越小哦。

首先，打开电脑中的微信小程序开发工具，选择小游戏，然后新建，如下图
如果想要做小程序的，请在文章底部找

新建的小游戏项目大致如下，笔者这里是精简过的，会看到有个game.js文件，这个是小游戏执行的入口，将game.js文件打开，如果有代码内容，那就全部清空吧，下面开始从这个文件中写代码。

PS：笔者猜到很多读者可能是新手，其心里可能会想：新建的小游戏项目是个打飞机的游戏例子，而项目文件太多了，对新手入门来说，会不会觉得眼花，那有很多不相关的文件就删除吧，只保留下图中的项目文件一样就可以了，精简后整个干净了

注意，游戏主要逻辑都写到./js/main.js 里的，这个先不看，后面用到时会使用这一行导入游戏逻辑

import Main from './js/main.js';

在写游戏逻辑准备前，需要先从wx接口API中拿到画布Canvas，如下

const canvas = wx.createCanvas();

接着，定义好一个用于渲染的配置

const render = {ctx: canvas.getContext('2d'),//2d context 绘制画布的是ctxwidth: canvas.width,//画布宽度height: canvas.height,//画布高度top: 80,//距离上边距
};

接着，定义游戏相关的配置

const config = {rank: 0, //游戏难度 可设置 0~4cols: 10, //每一行的方格数
};

接着，定义个方法，用于监听游戏产生的事件

function listener(event) {switch (event) {case 'end': //游戏结束事件//...default:console.log('other event', event);}
}

接下来是用到游戏逻辑对象类 Main ，项目结构如下图，通过 import ./js/main.js 导入过来就可以用了，在开始写的地方有写了import …

然后，写初始化游戏实例game，将上面定义好的render, config, listener都以参数形式传进去，

var game = new Main(render, config, listener);

再定义一个方法，处理触摸事件

function touchHandler(event) {//...
}
//处理触摸开始的方法添加到画布canvas中
canvas.addEventListener('touchstart', touchHandler);

以下是游戏的其它功能,如游戏截图的方法

function saveToImage() {//...
}

最后，就是重点写游戏逻辑Main的实现了, 稍微复杂一些，打开笔者项目中的./js/main.js，会看到笔者写好的代码大致如下，

'use strict';//定义个性化颜色常量
const Colors = {BgColor: '#000000',BorderColor: '#BDBDBD'
}
//定义游戏的事件常量
const GameEvent = {onEnd: 'end'
}
//canvas font 字体的单位常量
const FontUnit = 'px sans-serif';
/**
* 扫雷游戏主要逻辑
*/
export default class Main {//构造方法，需要传入三个参数，上面有讲了constructor(render,config,listener){//初始化游戏布局const initLayout = () => {//...//游戏的方格集合const grids = [];for(let i=0; i<cols; i++){for(let j=0; j<cols; j++){//...grids.push(g);}}//判断是否埋雷const hasFlag = (g,a,b) => {//...};//扫描const scan = (grids,g) => {//...};//...gameRefresh();};//展示游戏信息this.showResult = () => {//...};//展示埋雷数this.showNum = (gs) => {//...};//游戏结束处理this.gameEnd = () => {//...};//刷新，显示最新的const gameRefresh = () => {//...};initLayout();//定时器，可当作是游戏的时钟this.timer = setInterval(() => {gameRefresh();//...}, 1100);}//处理触摸的方法touchStart(touch){//...this.showResult();this.gameEnd();}//销毁用，退出游戏并关闭定时器destory(){if (this.timer) {clearInterval(this.timer);}}}

就写到这了，大致实现步骤已说明了，具体实现方法建议自己构思来写，如需要看详细的代码请点这里，前去下载，如果遇到有问题请留言，笔者会抽空查看并回复的，感谢耐心看完！

下面是笔者小游戏运行后的效果截图，完结撒花~
第一个图是小游戏项目截图，第二个是小程序项目截图项目源码点这里

扫雷-单机游戏-微信小游戏项目开发入门相关推荐

五子棋-单机游戏-微信小游戏项目开发入门
关于这个文章能看懂的条件,需要读者具备如下三个条件: 熟悉 HTML 熟悉 HTML 中的 Canvas JavaScript基础以及ES5以上这是一个五子棋游戏的实现方案,在微信小程序上运行,如 ...
微信小程序开发入门要学哪些内容
微信小程序开发入门要学哪些内容?微信小程序需要学习的知识点:注册登录.开发工具安装.配置.样式.组件.微信小程序数据渲染.网络请求API.获取用户信息API等,了解开发者工具.原生框架.模板语法.组件 ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
微信小程序开发入门（连载）—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具前往开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
微信小程序开发入门（连载）—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...

扫雷-单机游戏-微信小游戏项目开发入门

扫雷-单机游戏-微信小游戏项目开发入门相关推荐

最新文章

热门文章