利用微信小程式(小遊戲)API製作適配cocos creator小遊戲排行榜的例項程式
阿新 • • 發佈:2018-11-12
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');