微信小游戏初体验_258资源分享网

258资源分享 > 建站学院 > 微信开发 > 微信小游戏初体验

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

微信小游戏初体验

发布时间:2020-09-30

本文旨在通过分析官方给出的一个飞机大战小游戏的源代码来说明如何进行小游戏的开发。

1.前言

前天一个跳一跳小游戏刷遍了朋友圈，也代表了微信小程序拥有了搭载游戏的功能（早该往这方面发展了，这才是应该有的形态嘛）。作为一个前端er，我的大刀早已经饥渴难耐了，赶紧去下一波最新的微信官方开发工具，体验一波小游戏要如何开发。

微信小游戏初体验

我们欣喜地看到可以直接点击小游戏体验一下，而且官方也有一个示例源代码，是一个简易版的飞机大战的源码，直接点开模拟器就可以看效果。

微信小游戏初体验

2.源码分析

（还是原汁原味的打飞机游戏呀！）通过阅读这个源代码我们便可以知道如何进行小游戏的开发了。废话少说直接进入主题，先来分析一波源码的整体结构。

微信小游戏初体验

./js下面是官方示例中的js文件具体的作用

├── base // 定义游戏开发基础类 │ ├── animatoin.js // 帧动画的简易实现 │ ├── pool.js // 对象池的简易实现 │ └── sprite.js // 游戏基本元素精灵类 ├── libs │ ├── symbol.js // ES6 Symbol简易兼容 │ └── weapp-adapter.js // 小游戏适配器 ├── npc │ └── enemy.js // 敌机类 ├── player │ ├── bullet.js // 子弹类 │ └── index.js // 玩家类 ├── runtime │ ├── background.js // 背景类 │ ├── gameinfo.js // 用于展示分数和结算界面 │ └── music.js // 全局音效管理器 ├── databus.js // 管控游戏状态 └── main.js // 游戏入口主函数

官方文档中提到， game.js 和 game.json 是小游戏必须要有的两个文件

下面我会分析我认为主要的文件与结构，不会对每一行代码进行解析，大家有兴趣可以自行阅读官方的源码。每个文件后会跟随我认为重要的几个小点。

game.js import './js/libs/weapp-adapter' import './js/libs/symbol' import Main from './js/main' new Main()

小程序启动会调用 game.js ，在其中导入了小游戏官方提供的适配器，用于注入canvas以及模拟DOM以及BOM（后续会具体说明这个文件），可以在 https://mp.weixin.qq.com/debu...下载源代码，修改适合自己的版本并通过webpack打包自用。当然目前已经足够我们使用。

导入symbol的polyfill，主要用于模拟ES6类的私有变量。

导入Main类并实例化Main，于是顺藤摸瓜我们将目光移至Main.js

Main.js import Player from './player/index' import Enemy from './npc/enemy' import BackGround from './runtime/background' import GameInfo from './runtime/gameinfo' import Music from './runtime/music' import DataBus from './databus' let ctx = canvas.getContext('2d') let databus = new DataBus() /** * 游戏主函数 */ export default class Main { constructor() { this.restart() } restart() { databus.reset() canvas.removeEventListener( 'touchstart', this.touchHandler ) this.bg = new BackGround(ctx) this.player = new Player(ctx) this.gameinfo = new GameInfo() this.music = new Music() window.requestAnimationFrame( this.loop.bind(this), canvas ) } /** * 随着帧数变化的敌机生成逻辑 * 帧数取模定义成生成的频率 */ enemyGenerate() { if ( databus.frame % 30 === 0 ) { let enemy = databus.pool.getItemByClass('enemy', Enemy) enemy.init(6) databus.enemys.push(enemy) } } // 全局碰撞检测 collisionDetection() { let that = this databus.bullets.forEach((bullet) => { for ( let i = 0, il = databus.enemys.length; i < il;i++ ) { let enemy = databus.enemys[i] if ( !enemy.isPlaying && enemy.isCollideWith(bullet) ) { enemy.playAnimation() that.music.playExplosion() bullet.visible = false databus.score += 1 break } } }) for ( let i = 0, il = databus.enemys.length; i < il;i++ ) { let enemy = databus.enemys[i] if ( this.player.isCollideWith(enemy) ) { databus.gameOver = true break } } } //游戏结束后的触摸事件处理逻辑 touchEventHandler(e) { e.preventDefault() let x = e.touches[0].clientX let y = e.touches[0].clientY let area = this.gameinfo.btnArea if ( x >= area.startX && x <= area.endX && y >= area.startY && y <= area.endY ) this.restart() } /** * canvas重绘函数 * 每一帧重新绘制所有的需要展示的元素 */ render() { ctx.clearRect(0, 0, canvas.width, canvas.height) this.bg.render(ctx) databus.bullets .concat(databus.enemys) .forEach((item) => { item.drawToCanvas(ctx) }) this.player.drawToCanvas(ctx) databus.animations.forEach((ani) => { if ( ani.isPlaying ) { ani.aniRender(ctx) } }) this.gameinfo.renderGameScore(ctx, databus.score) } // 游戏逻辑更新主函数 update() { this.bg.update() databus.bullets .concat(databus.enemys) .forEach((item) => { item.update() }) this.enemyGenerate() this.collisionDetection() } // 实现游戏帧循环 loop() { databus.frame++ this.update() this.render() if ( databus.frame % 20 === 0 ) { this.player.shoot() this.music.playShoot() } // 游戏结束停止帧循环 if ( databus.gameOver ) { this.gameinfo.renderGameOver(ctx, databus.score) this.touchHandler = this.touchEventHandler.bind(this) canvas.addEventListener('touchstart', this.touchHandler) return } window.requestAnimationFrame( this.loop.bind(this), canvas ) } }

本文标签

微信体验小游戏

258资源分享网

分类

推荐文章

推荐下载

微信小游戏初体验

本文标签