HTML5重力下落积木游戏特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5重力下落积木游戏特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5重力下落积木小游戏</title>
<link rel="stylesheet" href="css/lanrenzhijia.css">
<script src="js/lanrenzhijia.js"></script>
<script src="js/lanrenzhijia2.js"></script>
</head>

<body>
<canvas id="screen">HTML5重力下落积木小游戏</canvas>
<div id="textures">
	<img src="images/caisse_bois_frag3.jpg" alt="">
	<img src="images/caisse_explosive_f2.jpg" alt="">
	<img src="images/caisse_export.jpg" alt="">
	<img src="images/caisse_metal_02.jpg" alt="">
	<img src="images/caisse_bois_frag3.jpg" alt="">
	<img src="images/caisse_jurancon_face1.jpg" alt="">
	<img src="images/caisse_jurancon_face2.jpg" alt="">
	<img src="images/miam-fruit2.jpg" alt="">
	<img src="images/caisse_orange_face1.jpg" alt="">
</div>
<img id="blade" class="textures" src="images/caisse_coke_f2.jpg" alt=""> 
</body>
</html>

JS代码(lanrenzhijia.js):

////////////////////////////////////////////////////////////// ============= micro HTML5 library =====================// @author Gerard Ferrandez / http://www.dhteumeuleu.com/// last update:May 27,2013// Released under the MIT license// http://www.dhteumeuleu.com/LICENSE.html////////////////////////////////////////////////////////////// ===== ge1doot global =====var ge1doot = ge1doot ||{
	json:null,screen:null,pointer:null,camera:null,loadJS:function (url,callback,data){
	if (typeof url == "string") url = [url];
	var load = function (src){
	var script = document.createElement("script");
	if (callback){
	if (script.readyState){
	script.onreadystatechange = function (){
	if (script.readyState == "loaded" || script.readyState == "complete"){
	script.onreadystatechange = null;
	if (--n === 0) callback(data || false);
}
}
}
else{
	script.onload = function(){
	if (--n === 0) callback(data || false);
}
}
}
script.src = src;
	document.getElementsByTagName("head")[0].appendChild(script);
}
for (var i = 0,n = url.length;
	i < n;
	i++) load(url[i]);
}
}
// ===== html/canvas container =====ge1doot.Screen = function (setup){
	ge1doot.screen = this;
	this.elem = document.getElementById(setup.container) || setup.container;
	this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d"):false;
	this.style = this.elem.style;
	this.left = 0;
	this.top = 0;
	this.width = 0;
	this.height = 0;
	this.cursor = "default";
	this.setup = setup;
	this.resize = function (){
	var o = this.elem;
	this.width = o.offsetWidth;
	this.height = o.offsetHeight;
	for (this.left = 0,this.top = 0;
	o != null;
	o = o.offsetParent){
	this.left += o.offsetLeft;
	this.top += o.offsetTop;
}
if (this.ctx){
	this.elem.width = this.width;
	this.elem.height = this.height;
}
this.setup.resize && this.setup.resize();
}
this.setCursor = function (type){
	if (type !== this.cursor && 'ontouchstart' in window === false){
	this.cursor = type;
	this.style.cursor = type;
}
}
window.addEventListener('resize',function (){
	ge1doot.screen.resize();
}
,false);
	!this.setup.resize && this.resize();
}
// ==== unified touch events handler ====ge1doot.Pointer = function (setup){
	ge1doot.pointer = this;
	var self = this;
	var body = document.body;
	var html = document.documentElement;
	this.setup = setup;
	this.screen = ge1doot.screen;
	this.elem = this.screen.elem;
	this.X = 0;
	this.Y = 0;
	this.Xi = 0;
	this.Yi = 0;
	this.bXi = 0;
	this.bYi = 0;
	this.Xr = 0;
	this.Yr = 0;
	this.startX = 0;
	this.startY = 0;
	this.scale = 0;
	this.wheelDelta = 0;
	this.isDraging = false;
	this.hasMoved = false;
	this.isDown = false;
	this.evt = false;
	var sX = 0;
	var sY = 0;
	// prevent default behaviorif (setup.tap) this.elem.onclick = function (){
	return false;
}
if (!setup.documentMove){
	document.ontouchmove = function(e){
	e.preventDefault();
}
}
document.addEventListener("MSHoldVisual",function(e){
	e.preventDefault();
}
,false);
	if (typeof this.elem.style.msTouchAction != 'undefined') this.elem.style.msTouchAction = "none";
	this.pointerDown = function (e){
	if (!this.isDown){
	if (this.elem.setCapture) this.elem.setCapture();
	this.isDraging = false;
	this.hasMoved = false;
	this.isDown = true;
	this.evt = e;
	this.Xr = (e.clientX !== undefined ? e.clientX:e.touches[0].clientX);
	this.Yr = (e.clientY !== undefined ? e.clientY:e.touches[0].clientY);
	this.X = sX = this.Xr - this.screen.left;
	this.Y = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
	this.setup.down && this.setup.down(e);
}
}
this.pointerMove = function(e){
	this.Xr = (e.clientX !== undefined ? e.clientX:e.touches[0].clientX);
	this.Yr = (e.clientY !== undefined ? e.clientY:e.touches[0].clientY);
	this.X = this.Xr - this.screen.left;
	this.Y = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
	if (this.isDown){
	this.Xi = this.bXi + (this.X - sX);
	this.Yi = this.bYi - (this.Y - sY);
}
if (Math.abs(this.X - sX) > 11 || Math.abs(this.Y - sY) > 11){
	this.hasMoved = true;
	if (this.isDown){
	if (!this.isDraging){
	this.startX = sX;
	this.startY = sY;
	this.setup.startDrag && this.setup.startDrag(e);
	this.isDraging = true;
}
else{
	this.setup.drag && this.setup.drag(e);
}
}
else{
	sX = this.X;
	sY = this.Y;
}
}
this.setup.move && this.setup.move(e);
}
this.pointerUp = function(e){
	this.bXi = this.Xi;
	this.bYi = this.Yi;
	if (!this.hasMoved){
	this.X = sX;
	this.Y = sY;
	this.setup.tap && this.setup.tap(this.evt);
}
else{
	this.setup.up && this.setup.up(this.evt);
}
this.isDraging = false;
	this.isDown = false;
	this.hasMoved = false;
	this.setup.up && this.setup.up(this.evt);
	if (this.elem.releaseCapture) this.elem.releaseCapture();
	this.evt = false;
}
this.pointerCancel = function(e){
	if (this.elem.releaseCapture) this.elem.releaseCapture();
	this.isDraging = false;
	this.hasMoved = false;
	this.isDown = false;
	this.bXi = this.Xi;
	this.bYi = this.Yi;
	sX = 0;
	sY = 0;
}
if ('ontouchstart' in window){
	this.elem.ontouchstart = function (e){
	self.pointerDown(e);
	return false;
}
this.elem.ontouchmove = function (e){
	self.pointerMove(e);
	return false;
}
this.elem.ontouchend = function (e){
	self.pointerUp(e);
	return false;
}
this.elem.ontouchcancel = function (e){
	self.pointerCancel(e);
	return false;
}
}
document.addEventListener("mousedown",function (e){
	if (e.target === self.elem ||(e.target.parentNode && e.target.parentNode === self.elem) ||(e.target.parentNode.parentNode && e.target.parentNode.parentNode === self.elem)){
	if (typeof e.stopPropagation != "undefined"){
	e.stopPropagation();
}
else{
	e.cancelBubble = true;
}
e.preventDefault();
	self.pointerDown(e);
}
}
,false);
	document.addEventListener("mousemove",function (e){
	self.pointerMove(e);
}
,false);
	document.addEventListener("mouseup",function (e){
	self.pointerUp(e);
}
,false);
	document.addEventListener('gesturechange',function(e){
	e.preventDefault();
	if (e.scale > 1) self.scale = 0.1;
	else if (e.scale < 1) self.scale = -0.1;
	else self.scale = 0;
	self.setup.scale && self.setup.scale(e);
	return false;
}
,false);
	if (window.navigator.msPointerEnabled){
	var nContact = 0;
	var myGesture = new MSGesture();
	myGesture.target = this.elem;
	this.elem.addEventListener("MSPointerDown",function(e){
	if (e.pointerType == e.MSPOINTER_TYPE_TOUCH){
	myGesture.addPointer(e.pointerId);
	nContact++;
}
}
,false);
	this.elem.addEventListener("MSPointerOut",function(e){
	if (e.pointerType == e.MSPOINTER_TYPE_TOUCH){
	nContact--;
}
}
,false);
	this.elem.addEventListener("MSGestureHold",function(e){
	e.preventDefault();
}
,false);
	this.elem.addEventListener("MSGestureChange",function(e){
	if (nContact > 1){
	if (e.preventDefault) e.preventDefault();
	self.scale = e.velocityExpansion;
	self.setup.scale && self.setup.scale(e);
}
return false;
}
,false);
}
if (window.addEventListener) this.elem.addEventListener('DOMMouseScroll',function(e){
	if (e.preventDefault) e.preventDefault();
	self.wheelDelta = e.detail * 10;
	self.setup.wheel && self.setup.wheel(e);
	return false;
}
,false);
	this.elem.onmousewheel = function (){
	self.wheelDelta = -event.wheelDelta * .25;
	self.setup.wheel && self.setup.wheel(event);
	return false;
}
}
// ===== request animation frame =====window.requestAnimFrame = (function(){
	return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function( run ){
	window.setTimeout(run,16);
}
;
}
)();

CSS代码(lanrenzhijia.css):

html{overflow:hidden;-ms-touch-action:none;-ms-content-zooming:none;}
body{position:absolute;margin:0;padding:0;background:#000;width:100%;height:100%;}
#screen{position:absolute;width:100%;height:100%;}
#textures,.textures{visibility:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)