将客户端的打泡泡游戏搬到WEB了。。
浏览数：30 /
时间：2015年06月09日
来张图先
把游戏搬到WEB上的想法是产生于之前有客户做3D轮播广告，顺便做了一些小的处理。
原客户端游戏
http://www.cnblogs.com/cfas/archive/2013/06/11/3131820.html
这次把游戏用HTML5和JQ重新做了一遍，游戏实现难度不大，关键还是思路，在HTML5上遇到的最麻烦的问题应该就是像素模糊吧，
结果呵呵~是画布直接用CSS设置高宽造成的。。。应该用标签原生表示width=xx
本来还想加入道具系统和积分系统的，算了，不熬夜了
在线玩
http://czzp114.com/game
<!DOCTYPE html>
<script src="game/jquery190.js"></script>
<body id="box" style="background: #000000;TEXT-ALIGN: center;margin-top: 0px;">
<div style="margin-top: 40px;color: #fff;">打泡泡游戏</div>
<div style="margin:0 auto;">
<canvas id="map" width="900" height="580"></canvas>
</div>
<audio src="game/back.wav" loop="loop" autoplay="autoplay">
</audio>
<audio id ="kill" src="game/kill.wav">
</audio>
<script>
//JQ CODE start
$(function() {
//JQ按键处理
$("#box").keyup(function(e) {
game.OnKeyUp(e.keyCode);
});
});
//JQ CODE end
//实体类==============================
var Ball = function(src, x, y, w, h) {
this.imger = new Image();
this.x = 0;
this.y = 0;
this.w = 0;
this.h = 0;
//Y轴移动增量
this.moveYSet = 0.2;
//键值
this.keyVal = 0;
//层格编号
this.layerNumber = 0;
this.MoveY = function() {
if (this.y >= 580) {
this.y = 0;
}
this.y += this.moveYSet;
}
};
var Map = function() {
this.img = null;
this.w = 900;
this.h = 580;
};
//层格
var Layer = function() {
//设置球球状态
this.isSetBall = 0;
this.x = 0;
this.y = 0;
//球球实体
this.ball = null;
this.number = 0;
};
var Game = function() {
//球球实数组
this.ballHandle = new Array();
//球球总数
this.ballCount = 27;
//地图实体
this.maper = new Map();
this.ctx = null;
//层格
this.layer = new Array();
this.killPlayer = null;
//A-Z键码表
this.keyVals = [0,65, 66,67,68,69,70,71,72,73,74,
75,76,77,78,79,80,81,82,83,84,85,86,
87,88,89,90];
this.OnKeyUp = function(keyVal) {
for (i = 1; i < 16; i++)
{
if (this.layer[i].ball.keyVal==keyVal){
this.layer[i].isSetBall = 0;
/*
* 播放击中声音,命中率高的时候声音会不同步，考虑做到woker里
*/
this.killPlayer.play();
return false;
}
}
}
this.Start = function()
{
this.ctx.drawImage(this.maper.img, 0, 0, 900, 580);
for (i = 1; i < 16; i++)
{
if (this.layer[i].isSetBall==0)
{
this.layer[i].ball = this.ballHandle[UtilManage.FrandomBy(1,15)];
this.layer[i].ball.y = 0;
this.layer[i].isSetBall = 1;
this.layer[i].ball.layerNumber = this.layer[i].number;
}
}
for (i = 1; i < 16; i++)
{
this.layer[i].ball.x = this.layer[i].x;
this.ctx.drawImage( this.layer[i].ball.imger,
this.layer[i].ball.x,
this.layer[i].ball.y,
60,
60);
this.layer[i].ball.MoveY();
}
}
};
//工具管理器
UtilManage = {
FrandomBy:function(under, over) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * under + 1);
case 2:
return parseInt(Math.random() * (over - under + 1) + under);
default:
return 0;
}
}
};
//游戏管理器
var GameManage = {
Run: function() {
GameManage.InitResource();
},
//初始化游戏数据
InitResource: function() {
game = new Game();
//坐标校正
var ballXofs = 2;
for (i = 1; i < 16; i++)
{
game.layer[i] = new Layer();
game.layer[i].number++ ;
//设置层格X坐标
game.layer[i].x = ballXofs + 2;
ballXofs += (60);
}
for (i = 1; i < game.ballCount; i++) {
game.ballHandle[i] = new Ball();
game.ballHandle[i].keyVal = game.keyVals[i];
game.ballHandle[i].imger = new Image();
game.ballHandle[i].imger.src = "game/" + i + ".png";
}
game.maper.img = new Image();
game.maper.img.src = "game/bg.jpg";
game.killPlayer = document.getElementById("kill");
game.ctx = (document.getElementById("map")).getContext("2d");
setInterval("game.Start()", 50);
}
};
GameManage.Run();
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
