loading请求处理中...

微信麻将小游戏开发

2021-12-02 18:31:59 阅读 10405次 标签: 微信小游戏开发 作者: 陈先生12121
界面效果如下:


微信麻将小游戏开发
 

主程序入口问game.js

import './js/libs/weapp-adapter'
import './js/libs/symbol'
 
import Main f rom './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 f rom './frame/index/background' //背景类
import Music f rom './runtime/music' //主打音乐类
import Header f rom './frame/index/header' //头部
import Bottom f rom './frame/index/bottom' //底部
import Right f rom './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() //启动动画
    }
  }
效果如下:

微信麻将小游戏开发
微信麻将小游戏开发
微信麻将小游戏开发
 
根据国外 Newzoo 在年中的数据,中国游戏产业规模占全球 25%,那么 HTML5 技术理论上可以支撑的全球手机页游、手机原生、PC 页游市场容量上限可达每年 2000 亿人民币。
 
所以,掌握 HTML5 技术栈,掌握游戏小程序、QQ 厘米秀、Facebook Instant Games 等「手机页游」新网站上的社交游戏搭建技术,洞悉这些社交网站上的用户特色、和提出针对性的游戏设计,对于想进入这个领域的游戏搭建商及个人而言,都是有发展前景和“钱景”的。

hishop小程序工具能够融合微信市场特性,为用户研发出众多针对性功能,管理用户、互动营销等特色功能,无论是电商基本功能还是吸粉功能都具有专业的经验,便民的操作功
 
能也是受到用户的好评,更是能针对不同的客户需求给出合理的计划和建议,能够量身专属于您的需求功能。并高质量交付,完善的售后机制,为你节省人力与物力。


开发公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论

快速发任务

价格是多少?怎样找到合适的人才?

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
货拉拉司机版app开发

¥5000 已有0人投标

教育小程序开发

¥3000 已有3人投标

工业机器视觉软件开发

¥10000 已有2人投标

iOS内植插件开发

¥3000 已有0人投标

PBX电话系统开发,微信沟通

¥5000 已有1人投标

低代码平台,小程序开发

¥1000 已有0人投标