小游戏入门

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

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

入口文件

根据官方的示例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),作者:版主x837195936

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小游戏初体验

    前言 上周【跳一跳】小游戏刷遍了朋友圈,也代表了微信小程序拥有了搭载游戏的功能(早该往这方面发展了,这才是应该有的形态嘛)。作为一个前端er,我的大刀早已经饥渴...

    极乐君
  • 小程序重力感应-加速度计的使用

    极乐君
  • 微信小程序:setData方法详解和注意事项

    在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下!

    极乐君
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • python3爬虫-知乎登陆

    参考的是这位博主的博客:https://home.cnblogs.com/u/zkqiang

    py3study
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • JavaScript this关键字

    Mirror王宇阳

扫码关注云+社区

领取腾讯云代金券