微信小游戏cocos教程,微信小程序游戏 角色扮演

cocos creator 可以通过新建一个creator项目进行添加子域项目，但是有一个缺点就是占用文件大小是一个问题，所以我这里采用微信的API进行绘制排行榜，

主域就是各种发送给子域的消息，这里不再这里赘述，就是各种调用微信的API

这里给出微信的API

微信开放数据域

新建main.js

目录结构如下：

main.js

export default class Main{ constructor(){ this.canvas = wx.createCanvas(); this.context = this.canvas.getContext('2d'); console.log(this.canvas.width,this.canvas.height); this.drawRect(0,0,this.canvas.width,this.canvas.height,'white'); } /** *@param offsetX : 距离屏幕的左边的距离 *@param offsetY : 距离屏幕上边的距离 *@param width : 要绘制的画面的宽度 @param height : 要绘制画面的高度 @param color : 要绘制画面的颜色 */ drawRect(offsetX,offsetY,width,height,color){ this.context.fillStyle = color; this.context.fillRect(offsetX, offsetY, width, height); } //绘制文本 drawText(offsetX,offsetY,content,color,fontSize){ this.context.fillStyle = color; this.context.font = fontSize; this.context.fillText(content,offsetX,offsetY); } //绘制图片 void ctx.drawImage(image, dx, dy, dWidth, dHeight); drawImage(image,dx,dy,dWidth,dHeight){ this.context.drawImage(image,dx,dy,dWidth,dHeight); }}

game.js

import Main from './js/main'let main = new Main();//一行的高度，宽度，间距let List = { WIDTH : main.canvas.width * 6 / 9, HEIGHT : main.canvas.height / 11, //行的间距 OFFSET : main.canvas.height / 28, //起始x 坐标 STARTX : 60, //起始Y 坐标 STARTY : 60, //该行背景色 COLOR : '', //一行中字体的颜色 FONTCOLOR : '', FONTESTYLE : '20px serif', FONTTOP : 40, IMAGETOP : 5, IMAGEWIDTH : 50, IMAGEHEIGHT : 50,}//可以容纳的行数let ROWNUMBER = Math.floor((main.canvas.height - List.STARTY) / (List.HEIGHT + List.OFFSET));console.log("可以容纳的最大的行数是：",ROWNUMBER);//需要显示出来的数据let Data = [{ RANK : 1, imageUrl : "头像地址", nickname : '昵称', score : '210' }, { RANK: 2, imageUrl: "头像地址", nickname: '昵称', score: '220' }, { RANK: 3, imageUrl: "头像地址", nickname: '昵称', score: '210' }, { RANK: 4, imageUrl: "头像地址", nickname: '昵称', score: '220' }, { RANK: 5, imageUrl: "头像地址", nickname: '昵称', score: '210' }, { RANK: 6, imageUrl: "头像地址", nickname: '昵称', score: '220' } ]//绘制底图main.drawRect(50, 50, main.canvas.width * 3 / 4, main.canvas.height * 3 / 4,'#6969FF');//绘制排名行for(let i = 0;i < Data.length;i++){ if(i % 2 === 0 ){ List.COLOR = '#D8BFD8'; List.FONTCOLOR = '#ffffff'; }else{ List.COLOR = '#D3D3D3' List.FONTCOLOR = '#ec0063'; } main.drawRect(List.STARTX, List.STARTY + i*(List.HEIGHT + List.OFFSET), List.WIDTH, List.HEIGHT, List.COLOR); //绘制数据中的内容 let dataItem = Data[i]; // drawText(offsetX, offsetY, content, color, fontSize) main.drawText(List.STARTX + 5,List.STARTY + List.FONTTOP + i *(List.HEIGHT + List.OFFSET),dataItem.RANK,List.FONTCOLOR,List.FONTESTYLE); let imagePromise = new Promise(function(resolve,reject){ //绘制图像内容 let image = wx.createImage(); image.src = dataItem.imageUrl; image.onload = function () { resolve(image); } }); imagePromise.then(function(image){ console.log("image is ",image); // drawImage(image, dx, dy, dWidth, dHeight) main.drawImage(image, List.STARTX + 30, List.STARTY + List.IMAGETOP + i * (List.HEIGHT + List.OFFSET), List.IMAGEWIDTH, List.IMAGEHEIGHT); }); //绘制昵称 main.drawText(List.STARTX + 93, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.nickname, List.FONTCOLOR, List.FONTESTYLE); main.drawText(List.STARTX + 190, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.score, List.FONTCOLOR, List.FONTESTYLE);}// main.drawText(65,100,'1','white','25px serif');