标签归档:HTML5游戏

jQuery和HTML5实现16宫格的翻牌消除游戏

今天给大家分享一个基于jQuery和HTML5的小游戏,这个游戏大家应该非常熟悉,它是一个16宫格的翻牌消除游戏,点击卡片后,如果两张卡片形状相同,则同时被消除。这个游戏应用主要用jQuery来控制卡片的状态,又利用了HTML5的sessionStorage来存储翻牌记录,一遍两张相同时消除。

jquery-html5-card-game

在线演示源码下载

HTML5方块消除游戏源码

今天我们要给大家介绍一款基于HTML5的消消乐游戏,这款游戏在画面上展示了很多可爱的小动物方块,交换两个小动物的位置即可消除相应的方块。同时在游戏中会随机产生道具,会给游戏增加一定的乐趣。这款游戏是基于HTML5开发的,下载游戏源码还可以学到最前沿的HTML5技术。

html5-remove-game

在线演示源码下载

HTML5简易版仿超级玛丽小游戏

还记得之前给大家分享过的一款HTML5超级玛丽小游戏吗?这款游戏非常逼真的用HTML5重写了超级玛丽这款经典游戏。今天要分享的也是一款基于HTML5的游戏应用,它是一款仿超级玛丽的简易版游戏,游戏中用简单的符号替代了超级玛丽任务,游戏中个各种场景也做了简化,但是实现原理还是相似的,方便开发者学习。

html5-simple-mario

在线演示源码下载

HTML5 Canvas推箱子小游戏

很久没有分享HTML5游戏源码了,今天就来分享一款非常经典的HTML5小游戏,一款考验你智力的推箱子游戏,这个游戏很常见,你应该是玩过的,这次我们用HTML5来重写了这款推箱子游戏,游戏设置和很多关卡,越到后面难度越高。

html5-canvas-box-game

在线演示源码下载

HTML5赣极方棋动物游戏

之前我们分享过很多不错的HTML5游戏,大部分的效果都非常炫酷,比如HTML5/CSS3简易版俄罗斯方块游戏就非常经典,今天要介绍的是一款基于HTML5的赣极方棋游戏,这有点像斗兽棋和中国象棋的结合,可以根据动物之间的实力来吃掉对方。

html5-animal-chess-game

在线演示源码下载

HTML5坦克大战游戏简化版

之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏HTML5中国象棋游戏。今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射子弹,命中敌方坦克后也会发出声音,效果还算可以。

html5-simple-tank

在线演示源码下载

JavaScript代码:

window.addEventListener("load", canvasApp, false);	
//是否支持canvas
function canvasSupport () {
  	return Modernizr.canvas;
}
function canvasApp() {
	//是否支持canvas
	if (!canvasSupport()) {
			 return;
  		}
	var theCanvas = document.getElementById("canvasOne");
	var context = theCanvas.getContext("2d");
	var tank=new Image();
	tank.ad[......]

阅读全文>>

HTML5五彩连珠小游戏

之前我们分享过很多炫酷的HTML5游戏,比如HTML5堆木头游戏,实现原理也是比较简单的。今天我们要分享另外一款HTML5小游戏,名字叫五彩连珠。点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球;当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失,游戏得分10分。当画面上每个方格都被彩球占满时,游戏结束。

html5-color-game

在线演示源码下载

HTML5堆木头游戏 超经典

今天要来分享一款很经典的HTML5游戏——堆木头游戏,这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

html5-wood-game

在线演示源码下载

HTML5火球挡板碰撞动画游戏

还记得之前分享的HTML5 Canvas火焰闪烁动画吗,动画效果非常炫酷。今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动,你可以移动鼠标滑动屏幕下方的挡板,火球碰撞到挡板后,即可反弹出去,这是个很有特色的HTML5游戏。

html5-breakout-game

在线演示源码下载

HTML5/CSS3简易版俄罗斯方块游戏

很久没有发布关于HTML5游戏方面的演示示例了,今天要分享一款HTML5俄罗斯方块游戏,这款俄罗斯方块游戏比较简易,并没有华丽的外观,但是实现了俄罗斯方块的移动、翻转、消除等基本的功能,这对我们学习CSS3、HTML5和Javascript将会有很大的帮助。

html5-css3-tetris-game

在线演示源码下载