经典的HTML5游戏及其源码分析

HTML5已经相当强大，在HTML5平台上，我们可以完成很多非常复杂的动画效果，包括游戏在内。早期我们只能利用flash来实现网络游戏，现在我们又多了一种选择，即用HTML5制作游戏。相比flash，HTML5更加灵活方便，随着浏览器技术的不断升级，HTML5一定会广泛使用，至少在网页动画方面，下面是一些利用HTML5完成的游戏作品。

HTML5版切水果游戏

这曾是风靡全球的一款手机APP游戏切水果，现在JS小组已经将其改版成HTML5，并将其开源。

核心Javascript代码：

Ucren.BasicDrag = Ucren.Class(
/* constructor */ function( conf ){
conf = Ucren.fixConfig( conf );
this.type = Ucren.fixString( conf.type, "normal" );var isTouch = this.isTouch = "ontouchstart" in window;this.TOUCH_START = isTouch ? "touchstart" : "mousedown",
this.TOUCH_MOVE = isTouch ? "touchmove" : "mousemove",
this.TOUCH_END = isTouch ? "touchend" : "mouseup";
},/* methods */ {
bind: function( el, handle ){
el = Ucren.Element( el );
handle = Ucren.Element( handle ) || el;var evt = {};evt[this.TOUCH_START] = function( e ){
e = Ucren.Event( e );
this.startDrag();
e.cancelBubble = true;
e.stopPropagation && e.stopPropagation();
return e.returnValue = false;
}.bind( this );handle.addEvents( evt );
this.target = el;
},//private
getCoors: function( e ){
var coors = [];
if ( e.targetTouches && e.targetTouches.length ) { // iPhone
var thisTouch = e.targetTouches[0];
coors[0] = thisTouch.clientX;
coors[1] = thisTouch.clientY;
}else{ // all others
coors[0] = e.clientX;
coors[1] = e.clientY;
}
return coors;
},//private
startDrag: function(){
var target, draging, e;
target = this.target;
draging = target.draging = {};this.isDraging = true;draging.x = parseInt( target.style( "left" ), 10 ) || 0;
draging.y = parseInt( target.style( "top" ), 10 ) || 0;e = Ucren.Event();
var coors = this.getCoors( e );
draging.mouseX = coors[0];
draging.mouseY = coors[1];this.registerDocumentEvent();
},//private
endDrag: function(){
this.isDraging = false;
this.unRegisterDocumentEvent();
},//private
registerDocumentEvent: function(){
var target, draging;
target = this.target;
draging = target.draging;draging.documentSelectStart =
Ucren.addEvent( document, "selectstart", function( e ){
e = e || event;
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
return e.returnValue = false;
});draging.documentMouseMove =
Ucren.addEvent( document, this.TOUCH_MOVE, function( e ){
var ie, nie;
e = e || event;
ie = Ucren.isIe && e.button != 1;
nie = !Ucren.isIe && e.button != 0;
if( (ie || nie ) && !this.isTouch )
this.endDrag();
var coors = this.getCoors( e );
draging.newMouseX = coors[0];
draging.newMouseY = coors[1];
e.stopPropagation && e.stopPropagation();
return e.returnValue = false;
}.bind( this ));draging.documentMouseUp =
Ucren.addEvent( document, this.TOUCH_END, function(){
this.endDrag();
}.bind( this ));var lx, ly;clearInterval( draging.timer );
draging.timer = setInterval( function(){
var x, y, dx, dy;
if( draging.newMouseX != lx && draging.newMouseY != ly ){
lx = draging.newMouseX;
ly = draging.newMouseY;
dx = draging.newMouseX - draging.mouseX;
dy = draging.newMouseY - draging.mouseY;
x = draging.x + dx;
y = draging.y + dy;
if( this.type == "calc" ){
this.returnValue( dx, dy, draging.newMouseX, draging.newMouseY );
}else{
target.left( x ).top( y );
}
}
}.bind( this ), 10 );
},//private
unRegisterDocumentEvent: function(){
var draging = this.target.draging;
Ucren.delEvent( document, this.TOUCH_MOVE, draging.documentMouseMove );
Ucren.delEvent( document, this.TOUCH_END, draging.documentMouseUp );
Ucren.delEvent( document, "selectstart", draging.documentSelectStart );
clearInterval( draging.timer );
},//private
returnValue: function( dx, dy, x, y ){
//todo something
}
}
);// Ucren.Template
Ucren.Template = Ucren.Class(
/* constructor */ function(){
this.string = join.call( arguments, "" );
},/* methods */ {
apply: function( conf ){
return this.string.format( conf );
}
}
);// Ucren.BasicElement
Ucren.BasicElement = Ucren.Class(
/* constructor */ function( el ){
this.dom = el;
this.countMapping = {};
},/* methods */ {
isUcrenElement: true,attr: function( name, value ){
if( typeof value == "string" ){
this.dom.setAttribute( name, value );
}else{
return this.dom.getAttribute( name );
}
return this;
},style: function( /* unknown1, unknown2 */ ){
var getStyle = Ucren.isIe ?
function( name ){
return this.dom.currentStyle[name];
} :function( name ){
var style;
style = document.defaultView.getComputedStyle( this.dom, null );
return style.getPropertyValue( name );
};return function( unknown1, unknown2 ){
if( typeof unknown1 == "object" ){
Ucren.each( unknown1, function( value, key ){
this[key] = value;
}.bind( this.dom.style ));
}else if( typeof unknown1 == "string" && typeof unknown2 == "undefined" ){
return getStyle.call( this, unknown1 );
}else if( typeof unknown1 == "string" && typeof unknown2 != "undefined" ){
this.dom.style[unknown1] = unknown2;
}
return this;
};
}(),hasClass: function( name ){
var className = " " + this.dom.className + " ";
return className.indexOf( " " + name + " " ) > -1;
},setClass: function( name ){
if( typeof( name ) == "string" )
this.dom.className = name.trim();
return this;
},addClass: function( name ){
var el, className;
el = this.dom;
className = " " + el.className + " ";
if( className.indexOf( " " + name + " " ) == -1 ){
className += name;
className = className.trim();
className = className.replace( / +/g, " " );
el.className = className;
}
return this;
},delClass: function( name ){
var el, className;
el = this.dom;
className = " " + el.className + " ";
if( className.indexOf( " " + name + " " ) > -1 ){
className = className.replace( " " + name + " ", " " );
className = className.trim();
className = className.replace( / +/g, " " );
el.className = className;
}
return this;
},html: function( html ){
var el = this.dom;if( typeof html == "string" ){
el.innerHTML = html;
}else if( html instanceof Array ){
el.innerHTML = html.join( "" );
}else{
return el.innerHTML;
}
return this;
},left: function( number ){
var el = this.dom;
if( typeof( number ) == "number" ){
el.style.left = number + "px";
this.fireEvent( "infect", [{ left: number }] );
}else{
return this.getPos().x;
}
return this;
},top: function( number ){
var el = this.dom;
if( typeof( number ) == "number" ){
el.style.top = number + "px";
this.fireEvent( "infect", [{ top: number }] );
}else{
return this.getPos().y;
}
return this;
},width: function( unknown ){
var el = this.dom;
if( typeof unknown == "number" ){
el.style.width = unknown + "px";
this.fireEvent( "infect", [{ width: unknown }] );
}else if( typeof unknown == "string" ){
el.style.width = unknown;
this.fireEvent( "infect", [{ width: unknown }] );
}else{
return this.getSize().width;
}
return this;
},height: function( unknown ){
var el = this.dom;
if( typeof unknown == "number" ){
el.style.height = unknown + "px";
this.fireEvent( "infect", [{ height: unknown }] );
}else if( typeof unknown == "string" ){
el.style.height = unknown;
this.fireEvent( "infect", [{ height: unknown }] );
}else{
return this.getSize().height;
}
return this;
},count: function( name ){
return this.countMapping[name] = ++ this.countMapping[name] || 1;
},display: function( bool ){
var dom = this.dom;
if( typeof( bool ) == "boolean" ){
dom.style.display = bool ? "block" : "none";
this.fireEvent( "infect", [{ display: bool }] );
}else{
return this.style( "display" ) != "none";
}
return this;
},first: function(){
var c = this.dom.firstChild;
while( c && !c.tagName && c.nextSibling ){
c = c.nextSibling;
}
return c;
},add: function( dom ){
var el;
el = Ucren.Element( dom );
this.dom.appendChild( el.dom );
return this;
},remove: function( dom ){
var el;
if( dom ){
el = Ucren.Element( dom );
el.html( "" );
this.dom.removeChild( el.dom );
}else{
el = Ucren.Element( this.dom.parentNode );
el.remove( this );
}
return this;
},insert: function( dom ){
var tdom;
tdom = this.dom;
if( tdom.firstChild ){
tdom.insertBefore( dom, tdom.firstChild );
}else{
this.add( dom );
}
return this;
},addEvents: function( conf ){
var blank, el, rtn;
blank = {};
rtn = {};
el = this.dom;
Ucren.each( conf, function( item, key ){
rtn[key] = Ucren.addEvent( el, key, item );
});
return rtn;
},removeEvents: function( conf ){
var blank, el;
blank = {};
el = this.dom;
Ucren.each( conf, function( item, key ){
Ucren.delEvent( el, key, item );
});
return this;
},getPos: function(){
var el, parentNode, pos, box, offset;
el = this.dom;
pos = {};if( el.getBoundingClientRect ){
box = el.getBoundingClientRect();
offset = Ucren.isIe ? 2 : 0;
var doc = document;
var scrollTop = Math.max( doc.documentElement.scrollTop,
doc.body.scrollTop );
var scrollLeft = Math.max( doc.documentElement.scrollLeft,
doc.body.scrollLeft );
return {
x: box.left + scrollLeft - offset,
y: box.top + scrollTop - offset
};
}else{
pos = {
x: el.offsetLeft,
y: el.offsetTop
};
parentNode = el.offsetParent;
if( parentNode != el ){
while( parentNode ){
pos.x += parentNode.offsetLeft;
pos.y += parentNode.offsetTop;
parentNode = parentNode.offsetParent;
}
}
if( Ucren.isSafari && this.style( "position" ) == "absolute" ){ // safari doubles in some cases
pos.x -= document.body.offsetLeft;
pos.y -= document.body.offsetTop;
}
}if( el.parentNode ){
parentNode = el.parentNode;
}else{
parentNode = null;
}while( parentNode && parentNode.tagName.toUpperCase() != "BODY" &&
parentNode.tagName.toUpperCase() != "HTML" ){ // account for any scrolled ancestors
pos.x -= parentNode.scrollLeft;
pos.y -= parentNode.scrollTop;
if( parentNode.parentNode ){
parentNode = parentNode.parentNode;
}else{
parentNode = null;
}
}return pos;
},getSize: function(){
var dom = this.dom;
var display = this.style( "display" );if ( display && display !== "none" ) {
return { width: dom.offsetWidth, height: dom.offsetHeight };
}var style = dom.style;
var originalStyles = {
visibility: style.visibility,
position: style.position,
display: style.display
};var newStyles = {
visibility: "hidden",
display: "block"
};if ( originalStyles.position !== "fixed" )
newStyles.position = "absolute";this.style( newStyles );var dimensions = {
width: dom.offsetWidth,
height: dom.offsetHeight
};this.style( originalStyles );return dimensions;
},observe: function( el, fn ){
el = Ucren.Element( el );
el.on( "infect", fn.bind( this ));
return this;
},usePNGbackground: function( image ){
var dom;
dom = this.dom;
if( /\.png$/i.test( image ) && Ucren.isIe6 ){
dom.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" +
image + "',sizingMethod='scale' );";
/// _background: none;
/// _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/pic.png',sizingMethod='scale' );
}else{
dom.style.backgroundImage = "url( " + image + " )";
}
return this;
},setAlpha: function(){
var reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/;
return function( value ){
var element = this.dom, es = element.style;
if( !Ucren.isIe ){
es.opacity = value / 100;
/* }else if( es.filter === "string" ){ */
}else{
if ( element.currentStyle && !element.currentStyle.hasLayout )
es.zoom = 1;if ( reOpacity.test( es.filter )) {
value = value >= 99.99 ? "" : ( "alpha( opacity=" + value + " )" );
es.filter = es.filter.replace( reOpacity, value );
} else {
es.filter += " alpha( opacity=" + value + " )";
}
}
return this;
};
}(),fadeIn: function( callback ){
if( typeof this.fadingNumber == "undefined" )
this.fadingNumber = 0;
this.setAlpha( this.fadingNumber );var fading = function(){
this.setAlpha( this.fadingNumber );
if( this.fadingNumber == 100 ){
clearInterval( this.fadingInterval );
callback && callback();
}else
this.fadingNumber += 10;
}.bind( this );this.display( true );
clearInterval( this.fadingInterval );
this.fadingInterval = setInterval( fading, Ucren.isIe ? 20 : 30 );return this;
},fadeOut: function( callback ){
if( typeof this.fadingNumber == "undefined" )
this.fadingNumber = 100;
this.setAlpha( this.fadingNumber );var fading = function(){
this.setAlpha( this.fadingNumber );
if( this.fadingNumber == 0 ){
clearInterval( this.fadingInterval );
this.display( false );
callback && callback();
}else
this.fadingNumber -= 10;
}.bind( this );clearInterval( this.fadingInterval );
this.fadingInterval = setInterval( fading, Ucren.isIe ? 20 : 30 );return this;
},useMouseAction: function( className, actions ){
/**
* 调用示例: el.useMouseAction( "xbutton", "over,out,down,up" );
* 使用效果: el 会在 "xbutton xbutton-over","xbutton xbutton-out","xbutton xbutton-down","xbutton xbutton-up"
* 等四个 className 中根据相应的鼠标事件来进行切换。
* 特别提示: useMouseAction 可使用不同参数多次调用。
*/
if( !this.MouseAction )
this.MouseAction = new Ucren.MouseAction({ element: this });
this.MouseAction.use( className, actions );
return this;
}
}
);if( Ucren.isIe )
document.execCommand( "BackgroundImageCache", false, true );for( var i in Ucren ){
exports[i] = Ucren[i];
};return exports;
});

在线演示源码下载

HTML5中国象棋游戏

这款HTML5中国象棋游戏还可以自定义游戏难度，皮肤也不错。

核心Javascript代码：

var play = play||{};play.init = function (){play.my = 1; //玩家方
play.map = com.arr2Clone (com.initMap); //初始化棋盘
play.nowManKey = false; //现在要操作的棋子
play.pace = []; //记录每一步
play.isPlay = true ; //是否能走棋
play.mans = com.mans;
play.bylaw = com.bylaw;
play.show = com.show;
play.showPane = com.showPane;
play.isOffensive = true; //是否先手
play.depth = play.depth || 3; //搜索深度play.isFoul = false; //是否犯规长将com.pane.isShow = false; //隐藏方块//初始化棋子
for (var i=0; i<play.map.length; i++){
for (var n=0; n<play.map[i].length; n++){
var key = play.map[i][n];
if (key){
com.mans[key].x=n;
com.mans[key].y=i;
com.mans[key].isShow = true;
}
}
}
play.show();//绑定点击事件
com.canvas.addEventListener("click",play.clickCanvas)
//clearInterval(play.timer);
//com.get("autoPlay").addEventListener("click", function(e) {
//clearInterval(play.timer);
//play.timer = setInterval("play.AIPlay()",1000);
// play.AIPlay()
//})
/*
com.get("offensivePlay").addEventListener("click", function(e) {
play.isOffensive=true;
play.isPlay=true ;
com.get("chessRight").style.display = "none";
play.init();
})com.get("defensivePlay").addEventListener("click", function(e) {
play.isOffensive=false;
play.isPlay=true ;
com.get("chessRight").style.display = "none";
play.init();
})
*/com.get("regretBn").addEventListener("click", function(e) {
play.regret();
})/*
var initTime = new Date().getTime();
for (var i=0; i<=100000; i++){var h=""
var h=play.map.join();
//for (var n in play.mans){
// if (play.mans[n].show) h+=play.mans[n].key+play.mans[n].x+play.mans[n].y
//}
}
var nowTime= new Date().getTime();
z([h,nowTime-initTime])
*/}//悔棋
play.regret = function (){
var map = com.arr2Clone(com.initMap);
//初始化所有棋子
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key){
com.mans[key].x=n;
com.mans[key].y=i;
com.mans[key].isShow = true;
}
}
}
var pace= play.pace;
pace.pop();
pace.pop();for (var i=0; i<pace.length; i++){
var p= pace[i].split("")
var x = parseInt(p[0], 10);
var y = parseInt(p[1], 10);
var newX = parseInt(p[2], 10);
var newY = parseInt(p[3], 10);
var key=map[y][x];
//try{var cMan=map[newY][newX];
if (cMan) com.mans[map[newY][newX]].isShow = false;
com.mans[key].x = newX;
com.mans[key].y = newY;
map[newY][newX] = key;
delete map[y][x];
if (i==pace.length-1){
com.showPane(newX ,newY,x,y)
}
//} catch (e){
// com.show()
// z([key,p,pace,map])// }
}
play.map = map;
play.my=1;
play.isPlay=true;
com.show();
}//点击棋盘事件
play.clickCanvas = function (e){
if (!play.isPlay) return false;
var key = play.getClickMan(e);
var point = play.getClickPoint(e);var x = point.x;
var y = point.y;if (key){
play.clickMan(key,x,y);
}else {
play.clickPoint(x,y);
}
play.isFoul = play.checkFoul();//检测是不是长将
}//点击棋子，两种情况，选中或者吃子
play.clickMan = function (key,x,y){
var man = com.mans[key];
//吃子
if (play.nowManKey&&play.nowManKey != key && man.my != com.mans[play.nowManKey ].my){
//man为被吃掉的棋子
if (play.indexOfPs(com.mans[play.nowManKey].ps,[x,y])){
man.isShow = false;
var pace=com.mans[play.nowManKey].x+""+com.mans[play.nowManKey].y
//z(bill.createMove(play.map,man.x,man.y,x,y))
delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = play.nowManKey;
com.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)
com.mans[play.nowManKey].x = x;
com.mans[play.nowManKey].y = y;
com.mans[play.nowManKey].alpha = 1play.pace.push(pace+x+y);
play.nowManKey = false;
com.pane.isShow = false;
com.dot.dots = [];
com.show()
com.get("clickAudio").play();
setTimeout("play.AIPlay()",500);
if (key == "j0") play.showWin (-1);
if (key == "J0") play.showWin (1);
}
// 选中棋子
}else{
if (man.my===1){
if (com.mans[play.nowManKey]) com.mans[play.nowManKey].alpha = 1 ;
man.alpha = 0.6;
com.pane.isShow = false;
play.nowManKey = key;
com.mans[key].ps = com.mans[key].bl(); //获得所有能着点
com.dot.dots = com.mans[key].ps
com.show();
//com.get("selectAudio").start(0);
com.get("selectAudio").play();
}
}
}//点击着点
play.clickPoint = function (x,y){
var key=play.nowManKey;
var man=com.mans[key];
if (play.nowManKey){
if (play.indexOfPs(com.mans[key].ps,[x,y])){
var pace=man.x+""+man.y
//z(bill.createMove(play.map,man.x,man.y,x,y))
delete play.map[man.y][man.x];
play.map[y][x] = key;
com.showPane(man.x ,man.y,x,y)
man.x = x;
man.y = y;
man.alpha = 1;
play.pace.push(pace+x+y);
play.nowManKey = false;
com.dot.dots = [];
com.show();
com.get("clickAudio").play();
setTimeout("play.AIPlay()",500);
}else{
//alert("不能这么走哦！")
}
}}//Ai自动走棋
play.AIPlay = function (){
//return
play.my = -1 ;
var pace=AI.init(play.pace.join(""))
if (!pace) {
play.showWin (1);
return ;
}
play.pace.push(pace.join(""));
var key=play.map[pace[1]][pace[0]]
play.nowManKey = key;var key=play.map[pace[3]][pace[2]];
if (key){
play.AIclickMan(key,pace[2],pace[3]);
}else {
play.AIclickPoint(pace[2],pace[3]);
}
com.get("clickAudio").play();}//检查是否长将
play.checkFoul = function(){
var p=play.pace;
var len=parseInt(p.length,10);
if (len>11&&p[len-1] == p[len-5] &&p[len-5] == p[len-9]){
return p[len-4].split("");
}
return false;
}play.AIclickMan = function (key,x,y){
var man = com.mans[key];
//吃子
man.isShow = false;
delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = play.nowManKey;
play.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)com.mans[play.nowManKey].x = x;
com.mans[play.nowManKey].y = y;
play.nowManKey = false;com.show()
if (key == "j0") play.showWin (-1);
if (key == "J0") play.showWin (1);
}play.AIclickPoint = function (x,y){
var key=play.nowManKey;
var man=com.mans[key];
if (play.nowManKey){
delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = key;com.showPane(man.x,man.y,x,y)man.x = x;
man.y = y;
play.nowManKey = false;}
com.show();
}play.indexOfPs = function (ps,xy){
for (var i=0; i<ps.length; i++){
if (ps[i][0]==xy[0]&&ps[i][1]==xy[1]) return true;
}
return false;}//获得点击的着点
play.getClickPoint = function (e){
var domXY = com.getDomXY(com.canvas);
var x=Math.round((e.pageX-domXY.x-com.pointStartX-20)/com.spaceX)
var y=Math.round((e.pageY-domXY.y-com.pointStartY-20)/com.spaceY)
return {"x":x,"y":y}
}//获得棋子
play.getClickMan = function (e){
var clickXY=play.getClickPoint(e);
var x=clickXY.x;
var y=clickXY.y;
if (x < 0 || x>8 || y < 0 || y > 9) return false;
return (play.map[y][x] && play.map[y][x]!="0") ? play.map[y][x] : false;
}play.showWin = function (my){
play.isPlay = false;
if (my===1){
alert("恭喜你，你赢了！");
}else{
alert("很遗憾，你输了！");
}
}

在线演示源码下载

HTML5五子棋游戏

在线演示源码下载

HTML5版Flappy Bird游戏

Flappy Bird这款变态游戏也被改造成HTML5版，这也是意料之中的事情。

核心Javascript代码：

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
var game_state = {};// Creates a new 'main' state that will contain the game
game_state.main = function() { };
game_state.main.prototype = {// Function called first to load all the assets
preload: function() {
// Change the background color of the game
this.game.stage.backgroundColor = '#71c5cf';// Load the bird sprite
this.game.load.image('bird', 'assets/bird.png');// Load the pipe sprite
this.game.load.image('pipe', 'assets/pipe.png');
},// Fuction called after 'preload' to setup the game
create: function() {
// Display the bird on the screen
this.bird = this.game.add.sprite(100, 245, 'bird');// Add gravity to the bird to make it fall
this.bird.body.gravity.y = 1000;// Call the 'jump' function when the spacekey is hit
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this);// Create a group of 20 pipes
this.pipes = game.add.group();
this.pipes.createMultiple(20, 'pipe');// Timer that calls 'add_row_of_pipes' ever 1.5 seconds
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);// Add a score label on the top left of the screen
this.score = 0;
var style = { font: "30px Arial", fill: "#ffffff" };
this.label_score = this.game.add.text(20, 20, "0", style);
},// This function is called 60 times per second
update: function() {
// If the bird is out of the world (too high or too low), call the 'restart_game' function
if (this.bird.inWorld == false)
this.restart_game();// If the bird overlap any pipes, call 'restart_game'
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
},// Make the bird jump
jump: function() {
// Add a vertical velocity to the bird
this.bird.body.velocity.y = -350;
},// Restart the game
restart_game: function() {
// Remove the timer
this.game.time.events.remove(this.timer);// Start the 'main' state, which restarts the game
this.game.state.start('main');
},// Add a pipe on the screen
add_one_pipe: function(x, y) {
// Get the first dead pipe of our group
var pipe = this.pipes.getFirstDead();// Set the new position of the pipe
pipe.reset(x, y);// Add velocity to the pipe to make it move left
pipe.body.velocity.x = -200;// Kill the pipe when it's no longer visible
pipe.outOfBoundsKill = true;
},// Add a row of 6 pipes with a hole somewhere in the middle
add_row_of_pipes: function() {
var hole = Math.floor(Math.random()*5)+1;for (var i = 0; i < 8; i++)
if (i != hole && i != hole +1)
this.add_one_pipe(400, i*60+10);this.score += 1;
this.label_score.content = this.score;
},
};// Add and start the 'main' state to start the game
game.state.add('main', game_state.main);
game.state.start('main');

在线演示源码下载

HTML5太空战机游戏

很普通的战机游戏，但是用HTML5实现就略显高大上了。

核心Javascript代码：

var g_canvas;
var g_context;
var g_soundsLoaded;
var g_isChr;
var g_onscreenControls;
var g_paused;
var g_renderInterval;
var g_clockInterval;var g_totalItems;
var g_itemsLoaded;var g_background;
var g_foreground;var g_ship;
var g_gameState;
var g_highScore;var g_powerups;
var g_floatyText;
var g_projectiles;
var g_enemyProjectiles;
var g_enemies;
var g_afterEffects;
var g_rainbow;var g_basicShotSound;
var g_laserShotSound;
var g_dinkSound;
var g_smallExplodeSound;
var g_bonusSound;
var g_explodeSound;
var g_artifact_chard_sound;
var g_double_sound;
var g_gem_sound;
var g_gun_sound;
var g_shot_sound;
var g_speed_sound;var g_levelDirector;
var g_shotsFired;
var g_shotsRequired;
var g_accuracy;
var g_showAccuracy;
var g_enemiesDestroyed;//
// main() is called once the game has loaded and the user has clicked
// on the "new game" button on the splash screen. This is a clean slate
// with no registered timers or event listeners.
//
function main()
{
var level_1_loop = document.getElementById("level_1_loop");
var bossLoop = document.getElementById("boss_loop");//dbg("engine = " + navigator.userAgent, false);
g_rainbow = new Array("yellow", "orange", "white", "red");document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);if ( g_basicShotSound == null )
{g_basicShotSound = new Sound("basic_shot",5);
g_laserShotSound = new Sound("laser",5);
g_smallExplodeSound = new Sound("small_explode",5);
g_bonusSound = new Sound("bonus_sound",4);
g_explodeSound = new Sound("explode", 3);g_artifact_chard_sound = new Sound("artifact_chard_sound", 2);
g_double_sound = new Sound("double_sound", 2);
g_gem_sound = new Sound("gem_sound", 4);
g_gun_sound = new Sound("gun_sound", 2);
g_shot_sound = new Sound("shot_sound", 3);
g_speed_sound = new Sound("speed_sound", 3);
}g_highScore = 0;
g_gameState = "setup";
g_levelDirector = new LevelDirector();//
// telling the level director to start will put the clock and
// render loops on interval timers
//
g_levelDirector.startLevel();
}//
// map a sound name to a global audio object
//
function lookupSound(name)
{
if ( name == "double_sound" )
return g_double_sound;
else if ( name == "gem_sound" )
return g_gem_sound;
else if ( name == "gun_sound" )
return g_gun_sound;
else if ( name == "shot_sound" )
return g_shot_sound;
else if ( name == "speed_sound" )
return g_speed_sound;dbg("Failed sound lookup: " + name, false);return null;
}//
// the level director will kick off an interval that calls
// this function every 100ms
//
function clockLoop()
{
if ( g_paused )
return;g_levelDirector.myClock += 100;
//dbg("Clock = " + g_levelDirector.myClock, false);g_levelDirector.launchSorties();
g_levelDirector.gameEvents();
}//
// the LevelDirector will kick off an interval that calls this function
// which redraws the entire screen. that interval determines the game's
// fps.
//
function renderLoop()
{
if ( g_paused )
return;g_background.render();
g_ship.render();var remainingPowerups = new Array();
for (var i = 0; i < g_powerups.length; ++i)
{
if (g_powerups[i].render())
{
remainingPowerups.push(g_powerups[i]);
}
else delete g_powerups[i];
}
delete g_powerups;
g_powerups = remainingPowerups;var remainingText = new Array();
for (var i = 0; i < g_floatyText.length; ++i)
{
if (g_floatyText[i].render())
{
remainingText.push(g_floatyText[i]);
}
else delete g_floatyText[i];
}
delete g_floatyText;
g_floatyText = remainingText;var remainingEnemies = new Array();
for (var i = 0; i < g_enemies.length; ++i)
{
if (g_enemies[i].render())
{
remainingEnemies.push(g_enemies[i]);
}
else delete g_enemies[i];
}
delete g_enemies;
g_enemies = remainingEnemies;var remainingProjectiles = new Array();
for (var i = 0; i < g_projectiles.length; ++i)
{
if (g_projectiles[i].render())
{
remainingProjectiles.push(g_projectiles[i]);
}
else delete g_projectiles[i];
}
delete g_projectiles;
g_projectiles = remainingProjectiles;var remainingEnemyProjectiles = new Array();
for (var i = 0; i < g_enemyProjectiles.length; ++i)
{
if (g_enemyProjectiles[i].render())
{
remainingEnemyProjectiles.push(g_enemyProjectiles[i]);
}
else delete g_enemyProjectiles[i];
}
delete g_enemyProjectiles;
g_enemyProjectiles = remainingEnemyProjectiles;var remainingAfterEffects = new Array();
for (var i = 0; i < g_afterEffects.length; ++i)
{
if (g_afterEffects[i].render())
{
remainingAfterEffects.push(g_afterEffects[i]);
}
else delete g_afterEffects[i];
}
delete g_afterEffects;
g_afterEffects = remainingAfterEffects;g_levelDirector.renderSpecialText();g_foreground.render();if ( g_onscreenControls )
{
var ox = 40;
var oy = 300;
var ow = 30;var tx = 8;
var ty = 22;g_context.fillStyle = "yellow";
g_context.strokeStyle = "yellow";
g_context.strokeRect(ox,oy,ow,ow);
g_context.strokeRect(ox-35,oy+35,ow,ow);
g_context.strokeRect(ox+35,oy+35,ow,ow);
g_context.strokeRect(ox,oy+70,ow,ow);
g_context.strokeRect(ox+520,oy+35,ow,ow);
g_context.strokeRect(ox+270,oy+35,ow,ow);g_context.fillText("U",ox+tx,oy+ty);
g_context.fillText("L", ox-35+tx,oy+35+ty);
g_context.fillText("R", ox+35+tx,oy+35+ty);
g_context.fillText("D", ox+tx,oy+70+ty);
g_context.fillText("Z",ox+520+tx,oy+35+ty);
g_context.fillText("P",ox+270+tx,oy+35+ty);
}g_ship.renderPowers();
}//--------------------------- BEGIN MUSIC LOOPING FUNCTIONS-------------////
// no browser currently correctly implements the looping feature
// of the Autdio object yet, so we have to listen for the ended event
// on our background music and play it again
//
function start_level_1_loop(terminate)
{
var level_1_loop = document.getElementById("level_1_loop");if ( terminate != undefined )
{
if ( terminate.toString() == "boss" )
{
level_1_loop.volume = 0;
level_1_loop.removeEventListener("ended", l1_loopit, true);
return;
}
else if ( terminate.toString() == "gameover" )
{
level_1_loop.removeEventListener("ended", l1_loopit, true);
level_1_loop.pause();
return;
}
}l1_loopit();
}function l1_loopit()
{
var level_1_loop = document.getElementById("level_1_loop");
level_1_loop.volume = 1;
level_1_loop.play();
level_1_loop.addEventListener("ended", l1_loopit, true);
}function startBossLoop(terminate)
{
var bossLoop = document.getElementById("boss_loop");if ( terminate != undefined && terminate.toString() == "end_boss")
{
bossLoop.volume = 0;
bossLoop.removeEventListener("ended", bos_loopit, true);
return;
}bos_loopit();
}
function bos_loopit()
{
var bossLoop = document.getElementById("boss_loop");
bossLoop.volume = 1;
bossLoop.play();
bossLoop.addEventListener("ended", bos_loopit, true);
}function startLevel2Loop(terminate)
{
var penguinLoop = document.getElementById("level_2_loop");if ( terminate != undefined && terminate.toString() == "terminate")
{
penguinLoop.volume = 0;
penguinLoop.removeEventListener("ended", l2_loopit, true);
return;
}
l2_loopit();
}function l2_loopit()
{
var penguinLoop = document.getElementById("level_2_loop");
penguinLoop.volume = 1;
penguinLoop.play();
penguinLoop.addEventListener("ended", l2_loopit, true);
}//
// write message to debug area
//
function dbg(str, append)
{
var dbgObj = document.getElementById("dbg");
dbgObj.innerHTML = append? (dbgObj.innerHTML + str): str;
}//
// appends all game sounds to the document. called after the loading
// screen itself is loaded. The GameSounds.php file does a base64_encode
// on the actual .ogg files residing on the server. This is so the sound
// objects can be repeatedly re-initialized without a network hit. This
// is part of a workaround for Chrome because that browser does not
// correctly re-play short audio sounds (which is just about every sound
// effect in the game)
//
function loadGameSounds()
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", "http://dougx.net/plunder/GameSounds.php")var agent = navigator.userAgent;
if ( agent.indexOf("MSIE") != -1 )
{
//
// IE9 does not support OGG so we have to load a special
// version of the file that has MP3 encoded sound
//
fileref.setAttribute("src", "GameSoundsIE9.php")
}fileref.onload = function() { g_soundsLoaded = true; }document.getElementsByTagName("head")[0].appendChild(fileref)
}function pause()
{
if (g_paused == null )
g_paused = false;g_paused = !g_paused;if ( g_paused )
dbg("Game Paused", false);
else
dbg("", false);
}

在线演示源码下载

HTML5超级玛丽游戏重体验

重温少年时的快乐，这是用HTML5改版的超级玛丽游戏。

在线演示源码下载

HTML5跳伞游戏

跳伞游戏，比谁先安全着陆，点击鼠标开始下落，再点击鼠标展开降落伞，你要控制好时机，让自己最先安全着陆。

在线演示源码下载