微信小游戏开发-麻将游戏界面(一) - 好文

界面效果如下：

主程序入口问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.endX && y >= area.startY && y <= area.endY){ //点中按钮 this.startSelect =
true this.oldParam = { width: this.width, height: this.height, x: this.x, y:
this.y } this.x = this.x + this.width * scal_radio/2 this.y = this.y +
this.height * scal_radio/2 this.width = this.width - this.width * scal_radio
this.height = this.height - this.height * scal_radio } } //判断结束是否点中按钮
isEndSelected(e) { let x = e.changedTouches[0].clientX * 2 let y =
e.changedTouches[0].clientY * 2 let area = this.area() if (x >= area.startX &&
x <= area.endX && y >= area.startY && y <= area.endY) { return true //点中按钮 }
return false //没有点中 } //点击开始事件 startClick(e) { if (this.isStartSelected(e)) {
this.startAnimation() //启动动画 } }
效果如下：

热门工具换一换