小游戏入门
当然我不是要做这个源码的分析，网上的各种分析已经很多了，本文主要分享一下小游戏入门的基础知识。
入口文件
根据官方的示例game.js有以下源码:
import './js/libs/weapp-adapter'
import './js/libs/symbol'
import Main from './js/main'
new Main()建议延用这样的结构，对于这样的结构简单的说来有利于项目的整个架构划分。
主逻辑类 Main();
import ChessBoard from './runtime/chessboard.js';
import Play from './runtime/playchess.js';
let ctx = canvas.getContext('2d')
export default class Main {
constructor() {
this.restart()
}
restart() {
new ChessBoard()
}
}这是我做的一个五子棋的小游戏，ChessBoard类是绘制棋盘的类， Play是游戏控制类，由于比较简单所以没有做状态管理类。 ChessBoard类，绘制棋盘我做的比较简单就是15*15个格子的棋盘，可以拓展着绘制个背景，立体效果等。
export default class ChessBoard {
constructor() {
this.init();
}
init() {
// draw code...
}
}具体实现就先不贴出来了，只是展示一下架构及思路。Play类，用来实现游戏的控制，
export default class Play {
constructor() {
this.init();
}
init(canvas, ctx) {
// draw code...
this.impY = -1;
this.impX = -1;
this.icpX = -1;
this.icpY = -1;
this.chessArr = [];
this.stepmove = [];
this.first = true;
this.canvas = canvas;
this.ctx = ctx;
this.bindEvents();
this.resetArr();
}
bindEvents() {
canvas.removeEventListener(
'touchstart',
this.touchHandler.bind(this)
)
}
}添加点击事件后根据targettouches 来获取手指点击的坐标，然后在对应位置绘制棋子。
绘制时记录棋子的信息 chessArr 是一个二维数组。根据棋子在棋盘上的位置作为数组的下标，数组内容为一个Object记录棋子是黑还是白。
this.chessArr[this.cpX][this.cpY]['s'] = true;
每一次绘制完棋子后调用一次检查状态函数
this.checkend(x, y, c) 三个参数x，y是刚才绘制棋子的位置，f是棋子的状态是黑子还是白子。
checkend(x, y, c) {
// 往8个方向搜索
this.checkUp(x, y, c);
this.checkRight(x, y, c);
this.checkDown(x, y, c);
this.checkLeft(x, y, c);
this.checkLeftUp(x, y, c);
this.checkRightUp(x, y, c);
this.checkRightDown(x, y, c);
this.checkLeftDown(x, y, c);
}检查时往八个方向搜索下个方向的是否有棋子，并且棋子的状态是否与参数c相同。比如: checkUp()
checkUp(x, y, c) {
var l = 0;
for (var i = 0, le = 5; i < le; i++) {
--y;
if (this.checkCore(x, y, c)) {
l++;
}
}
this.caseend(l, c);
}搜索完成后则开始检测l的值，caseend(l ,c)
caseend(l, c) {
if (l >= 4) {
setTimeout(() => {
if (c == 0) {
// 结束了白棋胜利!
} else {
// 结束了黑棋胜利!
}
}, 300)
}
}总结
小游戏的资源控制、状态控制、事件逻辑等最好拆分成不同的类进行控制。需要注意的点如果加载资源需要写资源管理类，特别是一些刚上手的小伙伴会发现drawImage方法没有效果。
原因主要有两点，一是资源路径问题，二是资源异步加载需要等待onload后才能显示，所以需要写资源控制来等加载完成后在drawImage。
感谢本文作者小程序社区实习版主x837195936分享干货~
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-03-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读