phaser相關

phaser.js這個插件，中文翻譯的開發文檔還在翻譯中，至於英文的開發文檔，勉勉強強查閱，有些方法名和開發文檔的有着一些區別，開發文檔上時帶着er的。不過大致上仍是一一對應查找的到的 eg:load=>loader http://phaser.io/docs/2.6.2/index 這應該是原版的開發文檔 http://phaserengine.com/ 中文版的開發文檔，還在翻譯中

@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>
}