Laya Matter颠球小游戏

游戏功能是用TS实现的 

一共两个类:

    游戏入口:Main.ts 

    游戏逻辑:Ball.ts

    处理微信逻辑:Platform.ts



开发过程中 调用小游戏wx方法 报错 所以定义了 Platform.ts 并且 在bin目录下增加Platform.js 文件

Platform.js  代码如下

class WechatPlatform {
    Instance = wx;
}
window.platform = new WechatPlatform();

Platform.ts

/** 
* 平台数据接口。
* 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一的接口用于开发者获取平台数据信息
* 通过这种方式封装平台逻辑,以保证整体结构的稳定
*/
declare interface Platform {
    Instance;
}

class DebugPlatform implements Platform {
    Instance = {};
}

if (!window.platform) {
    window.platform = new DebugPlatform();
}
declare let platform: Platform;
declare interface Window {
    platform: Platform;
}

Main.ts

import Handler = Laya.Handler;
import Loader  = Laya.Loader;
import Point   = Laya.Point;
//主函数入口
class Main {
    constructor()
    {
        //修改sharedCanvas 大小 用于处理排行榜
        if(Laya.Browser.window.sharedCanvas){
            Laya.Browser.window.sharedCanvas.width  = Laya.stage.width;
            Laya.Browser.window.sharedCanvas.height = Laya.stage.height;
        }
        
        //加载资源
        Laya.loader.load([
            { url: "https://lg-na2wup38-1256823928.cos.ap-shanghai.myqcloud.com/background.jpg"  , type: Loader.IMAGE },
            { url: "https://lg-na2wup38-1256823928.cos.ap-shanghai.myqcloud.com/qiu.png"         , type: Loader.IMAGE },
            { url: "https://lg-na2wup38-1256823928.cos.ap-shanghai.myqcloud.com/ballshadow.png"  , type: Loader.IMAGE },
        ], Handler.create(this, this.onLoaded));
    }
	
    private onLoaded(): void {
        new Ball();
    }
}
//初始化微信小游戏
Laya.MiniAdpter.init();
Laya.init(720, 1280);

console.log("Game——————Start");
new Main();

Ball.ts

import Sprite  = Laya.Sprite;
import Render  = Laya.Render;
import Browser = Laya.Browser;

let Matter = Browser.window.Matter;

class Ball{
    private engine:any;
    private footBall:any;
    private ballshadow:Sprite;
    private scoreLable:Laya.Text;
    private score:number;
    private rankSprite:Sprite = null;

    constructor()
    {
        this.score = 0;

        this.initUI();
        this.initMatter();
        this.initWorld();
    }

    private initUI(){
        let bg = new Sprite();
        bg.loadImage("https://lg-na2wup38-1256823928.cos.ap-shanghai.myqcloud.com/background.jpg");
        bg.on("mousedown", this, this.mouseDown);
        Laya.stage.addChild(bg);

        //微信小游戏绘制排行榜的精灵
        this.rankSprite = new Laya.Sprite();
        this.rankSprite.zOrder = 100;
        
        Laya.stage.addChild( this.rankSprite);
       
        //分数
        this.scoreLable = new Laya.Text();
        this.scoreLable.fontSize = 40;
        this.scoreLable.text = "得分:0";
        bg.addChild(this.scoreLable);

    }
    
    private initMatter():void
    {
        // 初始化物理引擎
        this.engine = Matter.Engine.create({enableSleeping: true});
       
        Matter.Engine.run(this.engine);
        let render = Browser.window.LayaRender.create({
                        engine: this.engine, 
                        width:  Laya.stage.width, 
                        height: Laya.stage.height, 
                        options: {
                            // background: 'res/UI/background.jpg',
                            wireframes: false
                        }
                    });
        Browser.window.LayaRender.run(render);
    }

  
    
    private initWorld():void
    {
        let GameHeight = Laya.stage.height;
        let GameWidth  = Laya.stage.width;

        //上
        let top        = Matter.Bodies.rectangle(GameWidth/2, 0, GameWidth,1, {isStatic: true, render: {visible: false} });
        let leftWall   = Matter.Bodies.rectangle(0,GameHeight/2,2,GameHeight,{isStatic: true,render: {visible: false} })
        let rightWall  = Matter.Bodies.rectangle(GameWidth,GameHeight/2,2,GameHeight,{isStatic: true,render: {visible: false} })
        //地面
        let ground     = Matter.Bodies.rectangle(GameWidth/2,GameHeight, GameWidth,50, {isStatic: true, render: {visible: false},label:"g"});

        this.ballshadow = new Sprite();
        this.ballshadow.loadImage("https://lg-na2wup38-1256823928.cos.ap-shanghai.myqcloud.com/ballshadow.png");
        this.ballshadow.pos(GameWidth/2,GameHeight-40);
        Laya.stage.addChild(this.ballshadow);

        let rockOptions = {
            density: 0.004, 
            restitution: 0.8,
            render: {sprite:{texture:"https://lg-na2wup38-1256823928.cos.ap-shanghai.myqcloud.com/qiu.png", xOffset: 75, yOffset: 75}}};
        this.footBall   = Matter.Bodies.circle(GameWidth/2, GameHeight-50,75,rockOptions);
        this.engine.world.gravity.y = 4;

        Matter.World.add(this.engine.world, [leftWall,rightWall,this.footBall,ground,top]);
        Matter.Events.on(this.engine,'tick',function(event):void{
            this.ballshadow.x = this.footBall.position.x-130
        }.bind(this));

        Matter.Events.on(this.engine,'collisionStart',function(event):void{
            let pairs  =  event.pairs;
            let pair;
            for (var i = 0; i < event.pairs.length; i++) {
                pair = pairs[i];
                if(pair.bodyA.label === "g" ||pair.bodyB.label === "g"){
                    if(this.score>0){
                        window.platform.Instance.saveUserCloadStorage(this.score);
                        this.scoreLable.text = "得分:0";
                        this.score = 0;
                        Laya.timer.once(300,this,this.showRank);
                    }
                }
            }
        }.bind(this));
    }

    private mouseDown(event):void{
        var point = new Laya.Point(event.stageX,event.stageY)
        if(Matter.Bounds.contains(this.footBall.bounds,point)){
            Matter.Body.applyForce(this.footBall,point,{ x :(this.footBall.position.x - point.x)/10,y:-10});
            this.score++;
            this.scoreLable.text = "得分:"+this.score;
        }

        if(this.rankSprite.visible){
            if(event.stageX <80 || event.stageX >  Laya.stage.width -80 || event.stageY < 290 || event.stageY > 960){
                this.rankSprite.visible =false;
            }
        }
    }
    
    private onResize():void
    {
        // 设置鼠标的坐标缩放
        // Laya.stage.clientScaleX代表舞台缩放
        // Laya.stage._canvasTransform代表画布缩放
    //    Browser.window.Matter.Mouse.setScale(this.mouse, {x: 1 / (Laya.stage.clientScaleX * Laya.stage._canvasTransform.a), y: 1 / (Laya.stage.clientScaleY * Laya.stage._canvasTransform.d)});
    }

    //显示微信排行榜
    private showRank():void{
        if(Laya.Browser.window.sharedCanvas){
            this.rankSprite.visible = true;
            let texture = new Laya.Texture(Laya.Browser.window.sharedCanvas);
            this.rankSprite.graphics.clear();
            this.rankSprite.graphics.drawTexture(texture,0,0,texture.width,texture.height);
        }
    }
}

    源码地址:https://download.csdn.net/download/mytop_xj/10472042

猜你喜欢

转载自blog.csdn.net/mytop_xj/article/details/80652312