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