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 = ;//开始掉落的时间
var attenuationFactor = ;//时间衰弱值，速度越快时间越短
var nowFallingTime = ;//当前掉落的时间，这个可以不用设置初始值的，这个值越小表示速度越快
var spiritxDistance = ;//钻石和金币的间隔必须大于这个数，障碍物和钻石的间隔或者障碍物和金币的间隔必须大于这个数，这个值就不动了
var coins, diamonds, bombs, background, boy, bombcrack;//掉落物图片-金币群、钻石群，障碍物图，背景图，人物图，碰到障碍物的爆炸图
var totalScore = ;//总分值，这个只是个数值，没有设置成对象
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 = ;//这个值作为游戏开始的时间点，控制障碍物的个数的
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 = ;
var stopTime = ;//游戏暂停的时间
/***********************游戏世界参数************************/
var game;
var bWidth = , bHeight = ;
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 - , game.world.centerY + , "progressleft");//设置位置以及获取图片
LoadLeft.anchor.setTo(, 0.5);//设置中心点，意思大概是x=图片最右边，y为图片中间，即图片的最右边的中间位置
LoadRight = game.add.sprite(game.world.centerX - + game.load.progress * , game.world.centerY + , "progressright");
LoadRight.anchor.setTo(, 0.5);
LoadProgress = game.add.sprite(game.world.centerX - , game.world.centerY + , "progress");
LoadProgress.anchor.setTo(, 0.5);
LoadProgress.width = game.world.centerX - + game.load.progress * ;//这个*3是为了让加载条长一点
}
else {//其他次
LoadRight.x = game.world.centerX - + game.load.progress * ;
LoadProgress.width = game.load.progress * ;
}
}
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 - , "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(, , "目前分数:" + 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, , "coin");//添加一个掉落物
coins.add(tempcoin);//对掉落物I-金币群添加一个
tempcoin.anchor.setTo(0.5, 0.5);//设置中心点，虽然不知道中心点设置了什么用
var tempscore = + * Math.random();//分数值，这个要后台拿过来的
tempcoin.scale = new Phaser.Point(tempscore / , tempscore / );//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() * );//设置随机数，调整钻石的掉落概率
if (i == ) {//十分之一的概率出现钻石
//设置钻石的位置，直到和当前的金币的位置相差超过spiritxDistance的时候，才能掉落
var posxdiamond;
do {
posxdiamond = Math.random() * game.world.width;
} while (Math.abs(posxcoin - posxdiamond) <= spiritxDistance)
var tempDiamond = game.add.sprite(posxdiamond, , "diamond");
diamonds.add(tempDiamond);
tempDiamond.anchor.setTo(0.5, 0.5);
tempDiamond.scale = new Phaser.Point(tempscore / , tempscore / );
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) / ); var lastPostxBomb;
for (var i = ; 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, , "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 > ) {
boy.x = ;
}
//小于最小值，则拉倒边缘
else if (boy.x < ) {
boy.x = ;
}
//设置拖动的点的x与人物一致
hitPlace.x = boy.x;
}
if (coins)//掉落物I
coins.forEach(function (item) { game.physics.arcade.collide(item, boy, null, function (obj1) { if (obj1.y < && obj1.y > ) { 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 < && obj1.y > ) { 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 < && obj1.y > && Math.abs(boy.x - obj1.x) < ) { 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(, , "heart");//设置心的图片
heart.anchor.setTo(0.5, 0.5);
heart.inputEnabled = true;//能够进行处理，默认情况下一个游戏对象不会处理任何输入事件
//设置心的边上的字
heartnum = game.add.text(, , " ×" + 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 = ;
//撞击的音效
crack = game.add.audio("crack");
crack.volume = ;
//再来一次
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 + , "share");
shareButton.anchor.setTo(0.5, 0.5);
shareButton.inputEnabled = true;
shareButton.events.onInputDown.add(share);
//右上角的开始按钮
btnstartButton = game.add.sprite(game.world.centerX + , game.world.centerY - , "btnstart");
btnstartButton.anchor.setTo(0.5, 0.5);
btnstartButton.inputEnabled = true;
btnstartButton.events.onInputDown.add(btnstart);
//右上角的结束按钮
btnstopButton = game.add.sprite(game.world.centerX + , game.world.centerY - , "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的
jsprint("数据异常，即将刷新页面", "refresh", "error");
return;
}
$.ajax({
url: "请求地址",
data: { totalScore: 100, playID: 0, activitySceneID: },
type: "post",
dataType: "json",
success: function (data) {
switch (data.error) {default:
break;
}
},
error: function (e) {
console.log(JSON.parse(eval(e)));
jsprint("服务器请求超时", "", "error");
}, timeout:
})
coins.destroy();
bombs.destroy();
diamonds.destroy();
if (EndText) EndText.destroy(); //#region 游戏结束后展示(自己)
if (totalScore < limitScore) {
//分数不够不能参与抽奖
EndText = game.add.text(game.world.centerX, game.world.centerY - , " 游戏结束\n" + " 金币总分:" + totalScore + "\n达到" + limitScore + "才能抽奖哦"); }
else {
EndText = game.add.text(game.world.centerX, game.world.centerY - , " 金币总分:" + 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 + , "bombcrack");
bombcrack.anchor.setTo(0.5, 0.5);
bombcrack.width = ; bombcrack.height = ;
game.add.tween(bombcrack).to({ width: , height: }, , 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:
})
}
</script> <!--点击开始按钮-->
<script>
//开始按钮的事件
function btnstart() {//出现异常的情况，暂时不刷新页面，等之后再决定
if (isGameOver == true && stopTime <= ) {
//表示第一次开始
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>
}