微信小游戏开发学习记录

本文深入探讨微信小游戏的开发流程,从使用WebStorm编码到ES6语法,再到面向对象编程,详细解析游戏逻辑梳理及呈现原理。涵盖资源加载、垃圾回收、音频播放等关键环节,强调代码模块化与优化策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小游戏主要是在canvas上进行图片的渲染,以及通过js操作图片动态的刷新

微信小游戏开发笔记:

 

特点:

快速体验,段生命周期,转化率高

体验优于手机网页

不需要下载或者注册

展望:

替代过重的Ap和体验差的手机网页

快速引流,引导用户向Ap过度

一种新的开发理念,在更多互联网入口平台流行

 

 

使用编码体验更友好的webstorm进行编码

编译即将es6编译成es5存储到开发者工具中,提交编译后的文件,我们才能在微信的es5中使用

更改代码后会自动完成编译

console类似控制台

开发者工具类似于一个浏览器

 

webstorm默认为es5

代码均为es6

下载nodejs安装

Bable安装,js的编译器将es6自动转化成es5

NPm安装

 

日常使用es5,使得es6自定转化,Bable

 

游戏开发一定是面向对象的

需要创建不同功能的类

Es6默认使用严格模式

 

Function fun2()

{

 

}

Es5实现面向对象

var class1=function () {

    this.fun1=function () {
        console.log('test');
    }
};

 


//创建一个类对象,定义相应的方法

class Classtest
{
    constructor()
    {
        console.log("我创建了");
    }
    fun1()
    {
        console.log('服你');
    }
    //类似于静态方法
    static fun2()
    {
        console.log("123123");
    }
}

 

new Classtest();
new Classtest().fun1();
Classtest.fun2();

 

逻辑梳理:以及呈现原理

 

 

创建基类,小游戏框架

 

canvas深入了解

 

game.js游戏全局入口文件

 

Main.js程序的主类用来初始化canvas和一些全局对象,各个精灵和绑定点击事件

 

Direct.js程序的导演类,用来控制游戏的逻辑和精灵的创建与销毁,控制游戏的主循环

 

 

DataStore.js对象池,存储游戏需要长期保存的变量和需要定时销毁的变量,需要保存和变化的变量,降低不同js文件的耦合度

 

 

ResourceLoader.js资源加载器,保证游戏是在图片加载完成或开始主循环,避免画面为白布

 

 

 

Sprite.js游戏精灵的基类,背景,陆地等各种类,让所有元素都继承与他

 

BackGround.js背景类,绑定一个图片资源

 

land。js陆地拆分一点一点渲染刷新,移动,每次取完整长的陆地的一部分

 

各种类的js

上铅笔、下铅笔.js,不断渲染刷新

 

 

 

Canvas一层一层往上叠加,每一个像素在不断的创建销毁,不断重绘

 

 

 

在该适配其中已经配置了canvas,在其他地方在建立canvas已经无效

使用webstorm+浏览器+live-server代替浏览器进行微信小小游戏的开发

 

 

 

NPm安装

程序开发和架构

 

在面向对象开发中注意多写类,避免代码的耦合性,提高代码的独立性

//资源文件加载器,确保canvas在图片资源加载完成后才进行渲染
import {Resources} from "./Resources.js";

export class ResourcesLoader {
    map=null;  //可有可无
    //浏览器兼容性问题
    constructor()
    {
        //Map数据结构,键值对的集合,key/value存取,set,get方法,其中值是唯一的
        //加载资源
        //Resources为一个数组
        this.map=new Map(Resources)
    }
}

 

重点方法两种对比

 

 

 

 

 

微信中包含一些高层封装

以及低级封装,与原生的js

迁移改变相对的API

 

webstorm中开发游戏的逻辑

微信小游戏开发工具独有的API

 

代码开发分为模块开发,类多,代码少,类的个数多,但是其中的代码少,才是好的代码

 

阮一峰es6,关于其中的语法

 

 

一般使用chrom浏览器

 

res中包含图形资源

 

面向对象代码调整和优化

写东西一步一步完善我们的基类,即完善我们的基础框架

 

尽量简化主程序中的代码

 

写前端一定要回nodejs

 

创建一个类,然后定义各种类的类方法

面向对象程序的架构,构建

 

 

抽象类的灵活应用+反射框架可以熟练掌握

框架式的代码编写才能真正提高自己,而不是业务功能的实现即可的想法

 

 

代码中的到的随机数为一个假的随机数,真正的随机数是根据硬件,外界的而声音等确定的

 

 

 

游戏即为不断的页面的动态渲染

 

学习算法逻辑类的东西,一定要多吸纳别人的优秀是思想,这样我们才能拓宽思路

 

 

 

wx.triggerGC()

游戏逻辑结束之后加上,微信小游戏垃圾回收

 

 

wx.createInnerAudioContext()

音频播放,在Main里加载

 

添加震动函数

wx.vibrateShort({})

 

 

获取用户信息

wx.getUserinfo()

获取个人信息

 

 

网络请求

在游戏过程中向服务器传递信息,

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值