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