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