微信小游戏开发

2024-06-02 12:52| 来源: 网络整理| 查看: 265

界面效果如下：

主程序入口问game.js

import './js/libs/weapp-adapter' import './js/libs/symbol' import Main from './js/main' console.log(GameGlobal) GameGlobal.wsServerUrl = "ws://127.0.0.1:7397"; GameGlobal.httpServerUrl = "http://127.0.0.1:8090/lpmajiang/"; new Main()

在game.js文件中主要设定了一些常量以及游戏入口类main.js

main.js主要内容为用户授权，游戏界面渲染，事件处理（主要为触摸事件）

用户授权代码如下：

let button = wx.createUserInfoButton({ //创建用户授权按钮，注意：wx.authorize({scope: "scope.userInfo"})，无法弹出授权窗口 type: 'text', text: '获取用户信息', style: { left: 10, top: 76, width: 200, height: 40, lineHeight: 40, backgroundColor: '#ff0000', color: '#ffffff', textAlign: 'center', fontSize: 16, borderRadius: 4 } }) button.onTap((res) = > { //获取用户信息 })

界面渲染代码：

restart() { this.bindLoop = this.loop.bind(this) //绑定渲染事件 this.hasEventBind = false this.aniId = window.requestAnimationFrame(//界面重绘时执行 loop方法 this.bindLoop, canvas ) } // 实现游戏帧循环 loop() { ctx.clearRect(0, 0, canvas.width, canvas.height) window.cancelAnimationFrame(this.aniId); //由于小游戏里面没有页面跳转，只能通过变量去设定渲染的界面 if (window.pageIndex == 1){//主页面 this.index.render()//主界面渲染 } else if (window.pageIndex == 2) { //房间界面 this.room.render()//游戏房间渲染 } this.aniId = window.requestAnimationFrame( this.bindLoop, canvas ) }

游戏主界面index.js

index.js主要为容器类，用来存放各种组件

index.js代码如下：

import BackGround from './frame/index/background' //背景类 import Music from './runtime/music' //主打音乐类 import Header from './frame/index/header' //头部 import Bottom from './frame/index/bottom' //底部 import Right from './frame/index/right' //右侧部分 const systemInfo = wx.getSystemInfoSync() canvas.width = systemInfo.windowWidth * 2 canvas.height = systemInfo.windowHeight * 2 const header_width = canvas.width const header_height = 50 const bottom_width = canvas.width * 0.9 const bottom_height = 120 const right_width = canvas.width / 2 const right_height = canvas.height - header_height - bottom_height /** * pengweikang 20180725 主页 */ export default class Index { constructor(ctx,_this) { this.ctx = ctx this.parent = _this } /** * 初始化 */ init(){ // 维护当前requestAnimationFrame的id this.background = new BackGround(this.ctx) this.header = new Header(this.ctx, header_width, header_height) //头部 this.bottom = new Bottom(this.ctx, bottom_width, bottom_height) //底部 this.right = new Right(this.ctx, right_width, right_height) //右边部分 this.aniId = 0 this.hasEventBind = false if (!this.hasEventBind) { this.hasEventBind = true this.touchStartHandler = this.touchStartEventHandler.bind(this) this.touchEndHandler = this.touchEndEventHandler.bind(this) canvas.addEventListener('touchstart', this.touchStartHandler) canvas.addEventListener('touchend', this.touchEndHandler) } } restart() { canvas.removeEventListener( 'touchstart', this.touchStartHandler ) canvas.removeEventListener( 'touchend', this.touchEndHandler ) this.hasEventBind = false } //屏幕触摸开始事件，将该事件传入子组件，判断该触摸是否在子主键范围之内 touchStartEventHandler(e) { e.preventDefault() this.bottom.touchStartHandler(e)//底部菜单点击开始事件 this.right.touchStartHandler(e)//底部菜单点击开始事件 this.hasEventBind = false } //屏幕触摸结束事件，将该事件传入子组件，判断该触摸是否在子主键范围之内 touchEndEventHandler(e) { e.preventDefault() this.bottom.touchEndHandler(e)//底部菜单点击结束事件 this.right.touchEndHandler(e)//底部菜单点击结束事件 this.hasEventBind = false } //界面渲染，主要渲染子组件 render() { this.background.render(this.ctx) this.header.render(0, 0) this.bottom.render(canvas.width * 0.05, canvas.height - bottom_height) this.right.render(canvas.width / 2, header_height) } }

处理点击事件代码

//判断开始是否点中按钮 isStartSelected(e){ let x = e.touches[0].clientX*2 let y = e.touches[0].clientY*2 let area = this.area() if (x >= area.startX && x = area.startY && y = area.startX && x = area.startY && y

【本文地址】

公司简介

联系我们