小游戏入门

最近小程序游戏类目开放测试,大家可以很容易的从工具里获得飞机大战的源码。作为一款很经典的小游戏,可以使用各种办法开发完成。

当然我不是要做这个源码的分析,网上的各种分析已经很多了,本文主要分享一下小游戏入门的基础知识。

入口文件

根据官方的示例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分享干货~

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2018-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

HTML5视音频代码实例 & WEBM格式转换器

HTML5视音频代码实例&WEBM格式转换器 HTML5学堂:WebM由Google提出,是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matro...

5658
来自专栏企鹅号快讯

手把手教你搭建个人网站六:SEO优化

所谓SEO优化,即Search Engine Optimization优化,中文译为搜索引擎优化,指通过网站进行站内优化,包括结构调整、内容建设、代码优化,和站...

26810
来自专栏前端侠2.0

记几处原生JS的开发 原

年后换工作,一直不稳定,我就没有正式写过程序,博客也荒芜了。最近才正式接手工作,遇到很多奇葩的领导,总有很多奇葩的想法和理念。比如不让用jquery,不过要求兼...

912
来自专栏腾讯NEXT学位

VScode编辑器神插件!让你入门前端轻松打怪升级!

5244
来自专栏李蔚蓬的专栏

10.1.5 布局优化利器之 Hierarchy Viewer

无论是哪本讲解布局优化的参考书,它们都不得不提到Hierarchy Viewer。不过,通常情况下,Hierarchy( 英['haɪərɑːkɪ])Viewe...

833
来自专栏nice_每一天

一天带你入门到放弃vue.js(一)

每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧!

1672
来自专栏Kiba518

【我们一起写框架】MVVM的WPF框架(四)—DataGrid

这个框架写到这里,应该有很多同学发现,框架很多地方的细节,其实是违背了MVVM的设计逻辑的。

1112
来自专栏IT平头哥联盟

曾经面试踩过的坑,都在这里了~

  前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机率较高的提问/笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对...

2150
来自专栏IMWeb前端团队

react diff 原理

本文作者:IMWeb 王少飞 原文出处:IMWeb社区 未经同意,禁止转载 React diff 作为Virtual DOM的加速器,其算法上的改进优...

2366
来自专栏Android开发经验

工作中一些细小的经验总结随时继续记录

1963

扫码关注云+社区

领取腾讯云代金券