Egret5.2.2 微信小游戏行的示例排行榜

Egret5.2.2版本发布微信小游戏后,在开放数据域有一个默认排行榜。这个文件夹代码+图大小就22kb。

排行榜的效果就是示范用的,很丑...带翻页。

代码如下,基本就是使用canvas渲染了一个排行榜。

好处是不需要额外新建另一个Egret项目来实现排行榜,减小了代码体积。

坏处是canvas手动绘制排行榜,没有egret的eui可视化编辑,非常的不方便。

代码很长,慢慢看....

/**
 * 微信开放数据域
 * 使用 Canvas2DAPI 在 SharedCanvas 渲染一个排行榜,
 * 并在主域中渲染此 SharedCanvas
 */

/**
 * 资源加载组,将所需资源地址以及引用名进行注册
 * 之后可通过assets.引用名方式进行获取
 */
var assets = {
  icon: "openDataContext/assets/icon.png",
  box: "openDataContext/assets/box.png",
  panel: "openDataContext/assets/panel.png",
  button: "openDataContext/assets/button.png",
  title: "openDataContext/assets/rankingtitle.png"
};
/**
 * canvas 大小
 * 这里暂时写死
 * 需要从主域传入
 */
let canvasWidth;
let canvasHeight;

/**
 * 加载资源函数
 * 理论上只需要加载一次,且在点击时才开始加载
 * 最好与canvasWidht和canvasHeight数据的传入之后进行
 */
preloadAssets();

//获取canvas渲染上下文
var context = sharedCanvas.getContext("2d");
context.globalCompositeOperation = "source-over";

/**
 * 所有头像数据
 * 包括姓名,头像图片,得分
 * 排位序号i会根据parge*perPageNum+i+1进行计算
 */
let totalGroup = [
  { key: 1, name: "1111111111", url: assets.icon, scroes: 10000 },
  { key: 2, name: "2222222222", url: assets.icon, scroes: 9000 },
  { key: 3, name: "3333333", url: assets.icon, scroes: 8000 },
  { key: 4, name: "4444444", url: assets.icon, scroes: 7000 },
  { key: 5, name: "55555555", url: assets.icon, scroes: 6000 },
  { key: 6, name: "6666666", url: assets.icon, scroes: 5000 },
  { key: 7, name: "7777777", url: assets.icon, scroes: 4000 },
  { key: 8, name: "8888888", url: assets.icon, scroes: 3000 },
  { key: 9, name: "9999999", url: assets.icon, scroes: 2000 },
  { key: 10, name: "1010101010", url: assets.icon, scroes: 2000 },
  { key: 11, name: "111111111111", url: assets.icon, scroes: 2000 },
  { key: 12, name: "121212121212", url: assets.icon, scroes: 2000 },
  { key: 13, name: "13131313", url: assets.icon, scroes: 2000 },
  { key: 14, name: "1414141414", url: assets.icon, scroes: 2000 },
  { key: 15, name: "1515151515", url: assets.icon, scroes: 2000 },
  { key: 16, name: "1616161616", url: assets.icon, scroes: 2000 },
];

/**
 * 创建排行榜
 */
function drawRankPanel() {
  //绘制背景
  context.drawImage(assets.panel, offsetX_rankToBorder, offsetY_rankToBorder, RankWidth, RankHeight);
  //绘制标题
  let title = assets.title;
  //根据title的宽高计算一下位置;
  let titleX = offsetX_rankToBorder + (RankWidth - title.width) / 2;
  let titleY = offsetY_rankToBorder + title.height + 50;
  context.drawImage(title, titleX, titleY);
  //获取当前要渲染的数据组
  let start = perPageMaxNum * page;
  currentGroup = totalGroup.slice(start, start + perPageMaxNum);
  //创建头像Bar
  drawRankByGroup(currentGroup);
  //创建按钮
  drawButton()
}
/**
 * 根据屏幕大小初始化所有绘制数据
 */
function init() {
  //排行榜绘制数据初始化
  RankWidth = stageWidth * 4 / 5;
  RankHeight = stageHeight * 4 / 5;
  barWidth = RankWidth * 4 / 5;
  barHeight = RankWidth / perPageMaxNum;
  offsetX_rankToBorder = (stageWidth - RankWidth) / 2;
  offsetY_rankToBorder = (stageHeight - RankHeight) / 2;
  preOffsetY = (RankHeight - barHeight) / (perPageMaxNum + 1);

  startX = offsetX_rankToBorder + offsetX_rankToBorder;
  startY = offsetY_rankToBorder + preOffsetY;
  avatarSize = barHeight - 10;
  intervalX = barWidth / 20;
  textOffsetY = (barHeight + fontSize) / 2;
  textMaxSize = 250;
  indexWidth = context.measureText("99").width;

  //按钮绘制数据初始化
  buttonWidth = barWidth / 3;
  buttonHeight = barHeight / 2;
  buttonOffset = RankWidth / 3;
  lastButtonX = offsetX_rankToBorder + buttonOffset - buttonWidth;
  nextButtonX = offsetX_rankToBorder + 2 * buttonOffset;
  nextButtonY = lastButtonY = offsetY_rankToBorder + RankHeight - 50 - buttonHeight;
  let data = wx.getSystemInfoSync();
  canvasWidth = data.windowWidth;
  canvasHeight = data.windowHeight;
}

/**
 * 创建两个点击按钮
 */
function drawButton() {
  context.drawImage(assets.button, nextButtonX, nextButtonY, buttonWidth, buttonHeight);
  context.drawImage(assets.button, lastButtonX, lastButtonY, buttonWidth, buttonHeight);
}

/**
 * 根据当前绘制组绘制排行榜
 */
function drawRankByGroup(currentGroup) {
  for (let i = 0; i < currentGroup.length; i++) {
    let data = currentGroup[i];
    drawByData(data, i);
  }
}

/**
 * 根据绘制信息以及当前i绘制元素
 */
function drawByData(data, i) {
  let x = startX;
  //绘制底框
  context.drawImage(assets.box, startX, startY + i * preOffsetY, barWidth, barHeight);
  x += 10;
  //设置字体
  context.font = fontSize + "px Arial";
  //绘制序号
  context.fillText(data.key + "", x, startY + i * preOffsetY + textOffsetY, textMaxSize);
  x += indexWidth + intervalX;
  //绘制头像
  context.drawImage(data.url, x, startY + i * preOffsetY + (barHeight - avatarSize) / 2, avatarSize, avatarSize);
  x += avatarSize + intervalX;
  //绘制名称
  context.fillText(data.name + "", x, startY + i * preOffsetY + textOffsetY, textMaxSize);
  x += textMaxSize + intervalX;
  //绘制分数
  context.fillText(data.scroes + "", x, startY + i * preOffsetY + textOffsetY, textMaxSize);
}

/**
 * 点击处理
 */
function onTouchEnd(event) {
  let x = event.clientX * sharedCanvas.width / canvasWidth;
  let y = event.clientY * sharedCanvas.height / canvasHeight;
  if (x > lastButtonX && x < lastButtonX + buttonWidth
    && y > lastButtonY && y < lastButtonY + buttonHeight) {
    //在last按钮的范围内
    if (page > 0) {
      buttonClick(0);

    }
  }
  if (x > nextButtonX && x < nextButtonX + buttonWidth
    && y > nextButtonY && y < nextButtonY + buttonHeight) {
    //在next按钮的范围内
    if ((page + 1) * perPageMaxNum < totalGroup.length) {
      buttonClick(1);
    }
  }

}
/**
 * 根据传入的buttonKey 执行点击处理
 * 0 为上一页按钮
 * 1 为下一页按钮
 */
function buttonClick(buttonKey) {
  let old_buttonY;
  if (buttonKey == 0) {
    //上一页按钮
    old_buttonY = lastButtonY;
    lastButtonY += 10;
    page--;
    renderDirty = true;
    console.log(‘上一页‘);
    setTimeout(() => {
      lastButtonY = old_buttonY;
      //重新渲染必须标脏
      renderDirty = true;
    }, 100);
  } else if (buttonKey == 1) {
    //下一页按钮
    old_buttonY = nextButtonY;
    nextButtonY += 10;
    page++;
    renderDirty = true;
    console.log(‘下一页‘);
    setTimeout(() => {
      nextButtonY = old_buttonY;
      //重新渲染必须标脏
      renderDirty = true;
    }, 100);
  }

}

/////////////////////////////////////////////////////////////////// 相关缓存数据

/**********************数据相关***************************/

/**
 * 渲染标脏量
 * 会在被标脏(true)后重新渲染
 */
let renderDirty = true;

/**
 * 当前绘制组
 */
let currentGroup = [];
/**
 * 每页最多显示个数
 * 建议大于等于4个
 */
let perPageMaxNum = 5;
/**
 * 当前页数,默认0为第一页
 */
let page = 0;
/***********************绘制相关*************************/
/**
 * 舞台大小
 */
let stageWidth;
let stageHeight;
/**
 * 排行榜大小
 */
let RankWidth;
let RankHeight;

/**
 * 每个头像条目的大小
 */
let barWidth;
let barHeight;
/**
 * 条目与排行榜边界的水平距离
 */
let offsetX_barToRank
/**
 * 绘制排行榜起始点X
 */
let startX;
/**
 * 绘制排行榜起始点Y
 */
let startY;
/**
 * 每行Y轴间隔offsetY
 */
let preOffsetY;
/**
 * 按钮大小
 */
let buttonWidth;
let buttonHeight;
/**
 * 上一页按钮X坐标
 */
let lastButtonX;
/**
 * 下一页按钮x坐标
 */
let nextButtonX;
/**
 * 上一页按钮y坐标
 */
let lastButtonY;
/**
 * 下一页按钮y坐标
 */
let nextButtonY;
/**
 * 两个按钮的间距
 */
let buttonOffset;

/**
 * 字体大小
 */
let fontSize = 45;
/**
 * 文本文字Y轴偏移量
 * 可以使文本相对于图片大小居中
 */
let textOffsetY;
/**
 * 头像大小
 */
let avatarSize;
/**
 * 名字文本最大宽度,名称会根据
 */
let textMaxSize;
/**
 * 绘制元素之间的间隔量
 */
let intervalX;
/**
 * 排行榜与舞台边界的水平距离
 */
let offsetX_rankToBorder;
/**
 * 排行榜与舞台边界的竖直距离
 */
let offsetY_rankToBorder;
/**
 * 绘制排名的最大宽度
 */
let indexWidth;

//////////////////////////////////////////////////////////
/**
 * 监听点击
 */
wx.onTouchEnd((event) => {
  var l = event.changedTouches.length;
  for (var i = 0; i < l; i++) {
    onTouchEnd(event.changedTouches[i]);
  }
});

/**
 * 资源加载
 */
function preloadAssets() {
  var preloaded = 0;
  var count = 0;
  for (var asset in assets) {
    count++;
    var img = wx.createImage();
    img.onload = function () {
      preloaded++;
      if (preloaded == count) {
        setTimeout(function () {
          createScene();
        }, 500);
      }
    }
    img.src = assets[asset];
    assets[asset] = img;
  }
}
/**
 * 绘制屏幕
 * 这个函数会在加载完所有资源之后被调用
 */
function createScene() {
  if (sharedCanvas.width && sharedCanvas.height) {
    console.log(‘初始化完成‘)
    stageWidth = sharedCanvas.width;
    stageHeight = sharedCanvas.height;
  } else {
    console.log(`sharedCanvas.width:${sharedCanvas.width}    sharedCanvas.height:${sharedCanvas.height}`)
  }
  init();
  requestAnimationFrame(loop);
}
/**
 * 循环函数
 * 每帧判断一下是否需要渲染
 * 如果被标脏,则重新渲染
 */
function loop() {
  if (renderDirty) {
    console.log(`stageWidth :${stageWidth}   stageHeight:${stageHeight}`)
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);
    drawRankPanel();
    renderDirty = false;
  }
  requestAnimationFrame(loop);
}

  

原文地址:https://www.cnblogs.com/gamedaybyday/p/9196621.html

时间: 2024-07-31 09:01:04

Egret5.2.2 微信小游戏行的示例排行榜的相关文章

微信小游戏5.2.2 排行榜打开后,如何关闭排行榜

因为微信小游戏只能主域通知子域,子域无法通知主域. 所以如果排行榜的关闭按钮做在子域里,是无法通知主域关闭了排行榜的. 所以排行榜的关闭按钮要做在主域里. 参考cocos:微信小游戏排行榜点击子域界面会触发主域元素的点击事件的问题 实际demo效果(不要吐槽界面太丑,数据太乱,就是测试用的): 原文地址:https://www.cnblogs.com/gamedaybyday/p/9206875.html

一、微信小游戏开发 --- 初次在微信开发者工具里跑Egret小游戏项目

尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊... 相关教程: Egret微信小游戏教程 微信公众平台-微信小游戏教程 微信公众平台-微信小游戏接入指南 开发版本: Egret Engine 5.1.11 Egret Wing 4.1.5 微信开发者工具 1.02.1803210 开发流程: 一. 注册微信小程序账号. 二. 下载安装微信开发者工具. 三. Egret创建微信小游戏项目 一.注册微信小程序账号 前往 微信公众平台,按照小程序注册教程注册账号. 二.下载安装

CocosCreator如何制作OA信用盘源码下载微信小游戏

CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤:1.在微信公众平台下载微信开发者工具;OA信用盘源码下载 地址:haozi-bbs.com 2.打开cocoscreator,选择Cocos Creator --> 偏好设置 --> 原生开发环境,配置WechatGame程序路径,点击保存并关闭. 3.在cocoscreator中点击项目-->构建发布看到下面的界面:游戏名称根据需要自己写入,发布平台悬着Wechat Game,appid可以暂时不

使用Laya引擎开发微信小游戏(上)

本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现了越来越多的以小游戏作为载体运营的活动类型,比如游戏预约,抢先试完等等,都收到了非常良好的效果. 在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一下

基于Laya游戏引擎实现微信小游戏排行榜

我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能,用户很大一部分留存都是依仗这个看似不起眼的模块.那么,微信小游戏中具体该如何借助laya引擎实现排行榜这个功能呢?我们先来看一下最终的效果图: 按照微信官方的说法,如果我们要使用微信官方提供的好友关系链的数据,我们就不能直接在项目中绘制排行榜,我们需要借助于开放域来绘制排行榜: ? 如果想要展示通过

11款手机微信小游戏源码特效

html5微信吃苹果游戏源码下载 html5手机淘宝万能时装屋小游戏源码下载 html5 3d拳王游戏制作3D拳击游戏源码下载 html5 3d拼图游戏制作3D魔方游戏源码下载 htm5 3d游戏制作3D熊出没游戏源码下载 html5微信小游戏超级染色游戏源码下载 html5读心术小游戏源码下载_读心术微信小游戏源码下载 找你歌微信html5游戏源码下载_找你歌微信游戏源码下载 方言等级考试游戏源码下载_方言等级测试微信游戏源码下载 中秋节吃月饼游戏html5微信游戏源码下载 9款html5微信

【微信小游戏修改教程】分享游戏后跳出提示关注的对话框

从前有一个客户作了一款游戏,他想实现在分享游戏到朋友圈返回游戏界面之后,能够弹出一个对话窗提示用户去关注他的微信号,点击确定就直接打开微信关注页的链接,像这种效果应该怎么实现呢?群里的小盆友们,来听课了,看涛舅舅怎么解决这个问题的~ 我们要实现的效果应该是这个样子滴: 这种效果和我们之前讲过的,分享后直接跳转到微信关注页的方法是一样的,没有学会的小伙伴先马上去复习一下吧!前往<[涛舅舅独家教程]微信小游戏分享后自动跳转网址>. 只不过是弹出对话框提示用户是不是要去关注,只有选“确定”的时候才会

.net开发 微信小游戏跳一跳辅助程序

一次巧合我看到了一篇关于微信小游戏跳一跳的辅助开发源码,链接:http://mp.weixin.qq.com/s/qGpoHNEf1A2AlofKFVdE2w 然后我试着下载下来跑一遍看能不能运行,显然是不能的,我总结了让能跑起来的几个步骤. 1.adb 环境变量配置 在网上下载 adb工具 1.0.32版本(比这个高或低的版本的可能连接不上),解压到某个文件夹下: 右击计算机——属性——高级系统设置——环境变量: 弹出”环境变量“对话框,单击”新建“一个环境变量. 在新建系统变量里,配置变量名

[小游戏] 微信小游戏开发源码_教程_工具_资源最新集合

[小游戏资源] 微信小游戏开发资源目录 一.微信官方游戏教程 小游戏简易教程 小游戏API大全 小游戏开发工具 二.微信小游戏图标资源 Game-icons.net 三.微信小游戏图片资源 Super Game Asset GameDev Market envato market Game Art Partners KENNEY 四.微信小游戏音频资源 工具类 Audacity 9 款音频压缩软件推荐 7 款混音软件推荐 7 款降噪软件推荐 资源类 爱给音效库 freesound Soundim