phaser相关

2019年11月19日 阅读数:14
这篇文章主要向大家介绍phaser相关,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

phaser.js这个插件,中文翻译的开发文档还在翻译中,至于英文的开发文档,勉勉强强查阅,有些方法名和开发文档的有着一些区别,开发文档上时带着er的。不过大致上仍是一一对应查找的到的 eg:load=>loader http://phaser.io/docs/2.6.2/index 这应该是原版的开发文档 http://phaserengine.com/ 中文版的开发文档,还在翻译中javascript

@model Bear
@*phaser插件的开发文档=> http://www.phaser.io/docs/2.6.2/index*@
@section PageSpecificJavascriptIncludes{
    <!--其余-->
    <script>
        $(".float").click(function () {
            $(".float").fadeOut();
            $(".shear").fadeOut();
        });
        $(".shear").click(function () {
            $(".float").fadeOut();
            $(".shear").fadeOut();
        });
        $(function () {
            $("body").css("style", "padding: 0; margin: 0; border: 0");
        })

        //设置同步
        $.ajaxSetup({
            async: false
        });
    </script>

    <!--活动-初始参数-->
    <script>
        //设置速度相关 -- 以时间为基准
        var startFallingTime = 1800;//开始掉落的时间
        var attenuationFactor = 2;//时间衰弱值,速度越快时间越短
        var nowFallingTime = 1800;//当前掉落的时间,这个能够不用设置初始值的,这个值越小表示速度越快
        var spiritxDistance = 70;//钻石和金币的间隔必须大于这个数,障碍物和钻石的间隔或者障碍物和金币的间隔必须大于这个数,这个值就不动了
        var coins, diamonds, bombs, background, boy, bombcrack;//掉落物图片-金币群、钻石群,障碍物图,背景图,人物图,碰到障碍物的爆炸图
        var totalScore = 0;//总分值,这个只是个数值,没有设置成对象
        var totalScoreText;//分数的text,游戏中的text对象
        /*具体就是说,能够实现多点操控,鼠标移动或者其余,都可以很好的响应
        Pointers encapsulate all mouse or touch related input, regardless of how it was generated. On multi-touch systems more than one Pointer can be active at any one time. In Input related events a reference to the corresponding Pointer is passed.*/
        var hitPlace = new Phaser.Point();//应该是人物移动的位置设定,建立一个点,在游戏中至关于一个移动对象了
        var startTime = 0;//这个值做为游戏开始的时间点,控制障碍物的个数的
        var isDragging = false;//用来判断是否已经在运行中了,人物被鼠标或者其余推进的时候,会进行修改值的,这个值,主要是针对人物这个对象的,防止其余pointer操做的时候,影响了人物的移动,用来绑定住hitplace
        var isGameOver = true;//本局游戏是否结束
        var shareButton, moreButton, btnstartButton, btnstopButton;//按钮设置
        var heart, heartnum;//心以及数值
        var bgm, get, crack;//音效的对象-背景音乐,碰到掉落物,碰到障碍物
        var EndText, LoadText, LoadLeft, LoadRight, LoadProgress;//结束时的text,加载时的text  %0-%100,加载的左边图,加载的右边图,加载的中间条

        /****************后台数值***************/
        var remainCount = parseInt('@ViewData["RemainCount"]');//剩余游戏次数,虽然这里已经给了值,可是判断是否还有次数,仍是须要去向后台请求的
        var scoreI = parseInt('@Model.Score');
        var scoreII = parseInt('@Model.ScoreII');
        var limitScore = parseInt('@Model.DrawScoreLimit');
        /******************方法中记录的存储值*********************/
        var playID = 0;
        var stopTime = 0;//游戏暂停的时间
        /***********************游戏世界参数************************/
        var game;
        var bWidth = 640, bHeight = 960;
        window.onload = function () {
            game = new Phaser.Game(bWidth, bHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update }, false);
        }
    </script>

    <!--游戏的其余方法-->
    <script type="text/javascript">
        //初始的加载条动画设置
        function updateProgressBar() {
            if (game.cache.checkImageKey("progress")) {
                if (LoadProgress == null) {//第一次
                    LoadLeft = game.add.sprite(game.world.centerX - 150, game.world.centerY + 100, "progressleft");//设置位置以及获取图片
                    LoadLeft.anchor.setTo(1, 0.5);//设置中心点,意思大概是x=图片最右边,y为图片中间,即图片的最右边的中间位置
                    LoadRight = game.add.sprite(game.world.centerX - 150 + game.load.progress * 3, game.world.centerY + 100, "progressright");
                    LoadRight.anchor.setTo(0, 0.5);
                    LoadProgress = game.add.sprite(game.world.centerX - 150, game.world.centerY + 100, "progress");
                    LoadProgress.anchor.setTo(0, 0.5);
                    LoadProgress.width = game.world.centerX - 150 + game.load.progress * 3;//这个*3是为了让加载条长一点
                }
                else {//其余次
                    LoadRight.x = game.world.centerX - 150 + game.load.progress * 3;
                    LoadProgress.width = game.load.progress * 3;
                }
            }
            LoadText.text = game.load.progress + "%";//加载的进度值
            LoadText.fill = "#ffffff";
        }

        //进入页面初始
        function initGame() {
            //按钮状况
            shareButton.visible = false;
            moreButton.visible = false;
            btnstopButton.visible = false;
            btnstartButton.visible = true;
            //对象初始加入世界
            game.physics.startSystem(Phaser.Physics.ARCADE);//物理
            if (bgm.isPlaying == false) bgm.play();
            if (EndText) EndText.destroy();
            if (boy) boy.destroy();
            //建立人物精灵
            boy = game.add.sprite(game.world.centerX, game.world.height - 160, "boy");
            boy.anchor.setTo(0.5, 0.5);
            boy.inputEnabled = true;
            //人物的点击事件,准确的应该就是选中的拖拉事件了
            boy.events.onInputDown.add(function () { isDragging = true; hitPlace.x = game.input.activePointer.x; hitPlace.y = game.input.activePointer.y; });
            //在游戏中构造物理身体,拥有质量
            game.physics.arcade.enable(boy, Phaser.Physics.ARCADE);
            if (coins) coins.destroy();
            //使用group,这个应该是群组了
            coins = game.add.group();
            if (diamonds) diamonds.destroy();
            //设置钻石的群组
            diamonds = game.add.group();
            if (bombs) bombs.destroy();
            //设置障碍物的群组
            bombs = game.add.group();
            if (totalScoreText) totalScoreText.text = "目前分数:" + totalScore;
            else totalScoreText = game.add.text(40, 40, "目前分数:" + totalScore);
        }

        //开始游戏
        function entergame() {
            game.time.events.start();
            game.time.events.removeAll();
            game.time.events.loop(Phaser.Timer.HALF, function () {//时间循环,没半秒
                if (isGameOver == false) {//未结束
                    nowFallingTime = startFallingTime - attenuationFactor * totalScore;//根据分数值,进行掉落时间调整(时间越小,速度越快)
                    /*****************************************************掉落物I——金币掉落设置*************************************************/
                    var posxcoin = Math.random() * game.world.width;//金币-掉落物I的x位置
                    var tempcoin = game.add.sprite(posxcoin, 0, "coin");//添加一个掉落物
                    coins.add(tempcoin);//对掉落物I-金币群添加一个
                    tempcoin.anchor.setTo(0.5, 0.5);//设置中心点,虽然不知道中心点设置了什么用
                    var tempscore = 8 + 5 * Math.random();//分数值,这个要后台拿过来的
                    tempcoin.scale = new Phaser.Point(tempscore / 10, tempscore / 10);//point这个就是设置一个范围,图片塞入,至于除以10这个可能会有些问题
                    game.physics.enable([tempcoin], Phaser.Physics.ARCADE);//物理运动
                    game.add.tween(tempcoin).to({ y: game.world.height }, nowFallingTime, Phaser.Easing.Linear.None, true).onComplete.add(function (item) { item.destroy(); }, this);//补间动画,且在到达底部的时候,销毁
                    /*****************************************************掉落物II——钻石掉落设置*************************************************/
                    var i = parseInt(Math.random() * 10);//设置随机数,调整钻石的掉落几率
                    if (i == 1) {//十分之一的几率出现钻石
                        //设置钻石的位置,直到和当前的金币的位置相差超过spiritxDistance的时候,才能掉落
                        var posxdiamond;
                        do {
                            posxdiamond = Math.random() * game.world.width;
                        } while (Math.abs(posxcoin - posxdiamond) <= spiritxDistance)
                        var tempDiamond = game.add.sprite(posxdiamond, 0, "diamond");
                        diamonds.add(tempDiamond);
                        tempDiamond.anchor.setTo(0.5, 0.5);
                        tempDiamond.scale = new Phaser.Point(tempscore / 8, tempscore / 8);
                        game.physics.enable([tempDiamond], Phaser.Physics.ARCADE);//物理动做,设置动画
                        game.add.tween(tempDiamond).to({ y: game.world.height }, nowFallingTime, Phaser.Easing.Linear.None, true).onComplete.add(function (item) { item.destroy(); }, this);//补间动画,且设置对象在到底部的时候,销毁
                    }
                    var tempBombNum = Math.floor((game.time.totalElapsedSeconds() - startTime) / 8);

                    var lastPostxBomb;
                    for (var i = 0; i < tempBombNum; i++) {
                        var posxbomb;
                        do {
                            posxbomb = Math.random() * game.world.width;
                            lastPostxBomb = posxbomb;
                        } while (Math.abs(posxcoin - posxbomb) <= spiritxDistance || Math.abs(posxdiamond - posxbomb) <= spiritxDistance)//|| Math.abs(lastPostxBomb - posxbomb) <= spiritxDistance原本想加进去,可是加进去后,循环次数过多,致使浏览器异常
                        var tempBomb = game.add.sprite(posxbomb, 0, "bomb");
                        bombs.add(tempBomb);
                        tempBomb.anchor.setTo(0.5, 0.5);
                        game.add.tween(tempBomb).to({ y: game.world.height }, nowFallingTime, Phaser.Easing.Linear.None, true).onComplete.add(function (item) { item.destroy(); }, this);//补间动画,这个是建立从上到下的动画的
                        game.physics.enable([tempBomb], Phaser.Physics.ARCADE);//这个是设置可否被触碰,若是去掉,则掉落的对象,不会碰触到底部的人物
                        /*总以为不是一个方法,不过大概意思也就下面所说:建立了一个游戏的物理身体,拥有质量,也只会有一个物理身体,不会被改变,直到销毁
                        Phaser.physics.enable(object, children)======This will create an Arcade Physics body on the given game object or array of game objects. A game object can only have 1 physics body active at any one time, and it can't be changed until the object is destroyed.*/
                    }
                }
            });
        }

        //分享给朋友,显示页面
        function share() {
        }

        //中奖状况弹窗
        function awardDialog() {
        }

        //暂停按钮的事件
        function btnstop() {
            game.time.events.stop();
            btnstopButton.visible = false;
            btnstartButton.visible = true;
            stopTime = game.time.totalElapsedSeconds();//暂停的时间点
        }

        //活动进行中,这里设置分数值,以及游戏结束的调用
        function update() {
            //移动位置
            if (isGameOver == false) {
                /*input.activePointer.withinGame===> true if the Pointer is over the game canvas, otherwise false.*/
                if (game.input.activePointer.withinGame == false) {
                    isDragging = false;//若是pointer对象尚未进入的话,则设置false,至于true的修改,则是在点击人物的时候
                }
                else if (isDragging) {
                    //activePointer:The most recently active Pointer object. When you've limited max pointers to 1 this will accurately be either the first finger touched or mouse.
                    //hitPlace和boy实际上至关于同一个(只是在操做上,x值一致的,实际仍是两个对象的)

                    boy.x -= hitPlace.x - game.input.activePointer.x;
                    //超过最大值,则回来
                    if (boy.x > 620) {
                        boy.x = 620;
                    }
                        //小于最小值,则拉倒边缘
                    else if (boy.x < 20) {
                        boy.x = 20;
                    }
                    //设置拖动的点的x与人物一致
                    hitPlace.x = boy.x;
                }
                if (coins)//掉落物I
                    coins.forEach(function (item) { game.physics.arcade.collide(item, boy, null, function (obj1) { if (obj1.y < 740 && obj1.y > 700) { totalScore = totalScore + scoreI; obj1.destroy(obj1); get.play(); } }, this); });
                if (diamonds)//掉落物II
                    diamonds.forEach(function (item) { game.physics.arcade.collide(item, boy, null, function (obj1) { if (obj1.y < 740 && obj1.y > 700) { totalScore = totalScore + scoreII; obj1.destroy(obj1); get.play(); } }, this); });
                if (bombs)//collide碰撞
                    bombs.forEach(function (item) { game.physics.arcade.collide(item, boy, null, function (obj1) { if (obj1.y < 800 && obj1.y > 700 && Math.abs(boy.x - obj1.x) < 60) { gameover(obj1.x, obj1.y); obj1.destroy(obj1); crack.play(); } }, this); });
                //更新分数
                if (totalScore) totalScoreText.text = "目前分数:" + totalScore;
            }
        }
</script>

    <!--预加载 世界初始-刷新,图片加载,加载条动画-->
    <script>
        function preload() {
            /******************************************************窗口大小修正*********************************************************/
            game.scale.setExactFit();//大小适屏
            game.scale.refresh();//刷新,,,不过不清楚为何要刷新
            window.onresize = function () {//窗口大小重设的时候,进行适屏处理
                game.scale.setExactFit();
                game.scale.refresh();
            }
            /********************************************************图片预加载************************************************************/
            game.load.image("heart", "/content/images/goldcoin-life.png");//加载心的图片
其余相关图片同样的加载方式,注意第一个参数名
/***************************************************************音效*********************************************************/ game.load.audio("get", "/content/images/get.mp3");//其余的音乐加载方式一致,注意第一个参数名/************************************************************初始的加载条设置*******************************************************/ LoadText = game.add.text(game.world.centerX, game.world.centerY, "0%"); LoadText.anchor.setTo(0.5, 0.5);//锚定纹理的原点点,虽然不是很明白什么意思 //http://phaserengine.com/docs/detail/loader game.load.onFileComplete.add(updateProgressBar, this);//调用方法updateProgressBar,内容加载进展 } </script> <!--游戏世界创造--> <script> //最初始的世界建立 function create() { /***********************************************毁掉以前的数据*******************************************************/ game.load.onFileComplete.removeAll();//中止当前加载请求,不过看起来好像是去除原先的加载 if (LoadText) LoadText.destroy(); if (heartnum) heartnum.destroy(); if (LoadProgress) LoadProgress.destroy(); if (LoadLeft) LoadLeft.destroy(); if (LoadRight) LoadRight.destroy(); /*******************************************************************************************************************/ /*input.onUp =========>pointer被释放:A Signal that is dispatched each time a pointer is released. pointer被释放的时候,isDragging设置为false,即就是人物不被拖动的时候,设置为false */ game.input.onUp.add(function () { isDragging = false; }); //设置背景图 background = game.add.sprite(game.world.centerX, game.world.centerY, "background"); scaleW = bWidth / background.width; scaleH = bHeight / background.height; background.scale = new Phaser.Point(scaleW, scaleH);//建立一个点 background.anchor.setTo(0.5, 0.5); //设置心的图片 heart = game.add.sprite(55, 100, "heart");//设置心的图片 heart.anchor.setTo(0.5, 0.5); heart.inputEnabled = true;//可以进行处理,默认状况下一个游戏对象不会处理任何输入事件 //设置心的边上的字 heartnum = game.add.text(100, 100, " ×" + remainCount); heartnum.anchor.setTo(0.5, 0.5); heartnum.inputEnabled = true;//可以进行处理 //背景音乐 bgm = game.add.audio("bgm");//背景音乐加入 bgm.volume = 0.6;//音量 bgm.loop = true;//是否循环 //获取到掉落物的音效 get = game.add.audio("get"); get.volume = 1; //撞击的音效 crack = game.add.audio("crack"); crack.volume = 1; //再来一次 moreButton = game.add.sprite(game.world.centerX, game.world.centerY, "more"); moreButton.anchor.setTo(0.5, 0.5); moreButton.inputEnabled = true; moreButton.events.onInputDown.add(refreshpage);//事件:刷新页面 //分享按钮,这个是游戏结束的时候,点击后显示分享的 shareButton = game.add.sprite(game.world.centerX, game.world.centerY + 100, "share"); shareButton.anchor.setTo(0.5, 0.5); shareButton.inputEnabled = true; shareButton.events.onInputDown.add(share); //右上角的开始按钮 btnstartButton = game.add.sprite(game.world.centerX + 240, game.world.centerY - 400, "btnstart"); btnstartButton.anchor.setTo(0.5, 0.5); btnstartButton.inputEnabled = true; btnstartButton.events.onInputDown.add(btnstart); //右上角的结束按钮 btnstopButton = game.add.sprite(game.world.centerX + 240, game.world.centerY - 400, "btnstop"); btnstopButton.anchor.setTo(0.5, 0.5); btnstopButton.inputEnabled = true; btnstopButton.events.onInputDown.add(btnstop); initGame(); } </script> <!--游戏结束方法--> <script> //游戏结束 function gameover(a, b) { if (playID <= 0) {//只要不是自行修改,这个值不会是小于0的 jsprint("数据异常,即将刷新页面", "refresh", "error"); return; } $.ajax({ url: "请求地址", data: { totalScore: 100, playID: 0, activitySceneID: 1 }, type: "post", dataType: "json", success: function (data) { switch (data.error) {default: break; } }, error: function (e) { console.log(JSON.parse(eval(e))); jsprint("服务器请求超时", "", "error"); }, timeout: 15000 }) coins.destroy(); bombs.destroy(); diamonds.destroy(); if (EndText) EndText.destroy(); //#region 游戏结束后展现(本身) if (totalScore < limitScore) { //分数不够不能参与抽奖 EndText = game.add.text(game.world.centerX, game.world.centerY - 200, " 游戏结束\n" + " 金币总分:" + totalScore + "\n达到" + limitScore + "才能抽奖哦"); } else { EndText = game.add.text(game.world.centerX, game.world.centerY - 200, " 金币总分:" + totalScore + "\n得到一次抽奖机会"); } EndText.anchor.setTo(0.5, 0.5); isGameOver = true;//本局游戏结束 shareButton.visible = true; moreButton.visible = true; btnstopButton.visible = false; btnstartButton.visible = false; //撞击到障碍物的爆炸图 bombcrack = game.add.sprite(a, b + 50, "bombcrack"); bombcrack.anchor.setTo(0.5, 0.5); bombcrack.width = 10; bombcrack.height = 10; game.add.tween(bombcrack).to({ width: 140, height: 123 }, 300, Phaser.Easing.Linear.None, true).onComplete.add(function () { bombcrack.destroy(); }); }; </script> <!--按钮再来一次--> <script> var checkChanceFlag = false; //再来一次 function refreshpage() { if (checkChanceFlag) { return; } //要先去后台判断是否是还有机会 checkChanceFlag = true; $.ajax({ url: "地址", dataType: "json", type: "post", success: function (data) {
             checkChanceFlag = false;
switch (data.error) {default:break; } }, error: function (e) { console.log(JSON.parse(eval(e))); jsprint("请求超时", "", "error"); checkChanceFlag = false; }, timeout: 15000 }) } </script> <!--点击开始按钮--> <script> //开始按钮的事件 function btnstart() {//出现异常的状况,暂时不刷新页面,等以后再决定 if (isGameOver == true && stopTime <= 0) { //表示第一次开始 btnstartButton.visible = false;//不显示 btnstopButton.visible = false;//不显示 isGameOver = false; startTime = game.time.totalElapsedSeconds() - stopTime + startTime;//若是中止过,则存有差值时间。没有中止过的话,也是要拿到当前的游戏已运行时间的 entergame(); } } </script> <!--跳转到奖品页面--> <script> var content = document.querySelector("#turn_to_award"); content.addEventListener("touchend", function () { turnToAward(); }); var turnToAwardFlag = true; function turnToAward() { if (!turnToAwardFlag) { return; } turnToAwardFlag = false; window.location.href = "地址"; } </script> }