js+html5切木头手机游戏源码

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

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

以下是 js+html5切木头手机游戏源码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width = 320,initial-scale=1,user-scalable=no" />
<link rel="apple-touch-icon-precomposed" href="icon.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon-precomposed" href="icon.png"/>
<link rel="apple-touch-startup-image" href="i/loader.png">
<title>js+html5切木头手机游戏源码</title>
<style type="text/css">
 body { font-family: helvetica, arial; background-color: #000000; color: #a3b3c3; border:0; padding:0; font-size:90%; overflow: hidden;
width: 320px;
margin: auto;}

 h1 {margin:.4em;}
 h3 { font-size:120%; margin:12px; padding-left:0;margin-bottom:.5em; color: #ffffff;}
 p {margin:0; margin:12px; margin-top:.5em; margin-bottom:.5em; font-size:84%;}
 a { color: #ffffff; }

 td{text-align:center; font-size: 70%;}
 
 .ibox {width:320px; height:315px; overflow:hidden; background-color: #000000; margin:auto;}
 .iboxcontent {width:320px; height:315px; float:left; overflow:hidden;}
 .ibc1 {background-color: #3b4859; background-image:url(./i/bg1.png);}
 .ibc2 {background-color: #404d5e; background-image:url(./i/bg2.png);}
 
 #alertbox {display:none;position:absolute; z-index:200;}
 #alertbox_flekk {position:absolute; width:320px; height: 356px; background-color:#000000; opacity: .8;}
 #alertbox_content {position:absolute; width:320px; height:286px; margin-top:70px; text-align:center; color:#ffffff;}
 #alertbox_content .fontostext {color:#a3b3c3;}
 #alertbox a {margin:10px; width:114px; height:54px; }
 img {border:0;}
 
 #imenu {width:320px;height:41px; margin:auto; text-align:center; background-image:url(./i/menu.png); background-position:0 0px;}
 #imenu a:hover {opacity:.5;}
 #button_game {background-image:url(./i/menu.png); display:block; float:left; width:72px; height:41px; background-position:0 0;}
 #button_highscore {background-image:url(./i/menu.png); display:block; float:left; width:110px; height:41px;background-position: -72px -41px;}
 #button_about {background-image:url(./i/menu.png); display:block; float:left; width:100px; height:41px; background-position: -182px -41px;}

 #score,#combo,#level {color:#ffffff;} 

 #button_xwuz {position:absolute; display:block; width:48px; height:57px; margin: 5px 0 0 267px; background-image:url(./i/xwuz.png);z-index:1; cursor:pointer;}

 #yourbest { text-align:center; font-weight:bold; color:#ffffff;font-size: 300%; margin: .5em auto .5em auto; background-image:url(./i/flekk.png); width:296px; height:65px; padding-top:15px;}
 .fontostext {color: #ffffff;}

 #preload {width:320px;position:absolute; visibility:hidden; overflow:hidden;}
</style>

<script type="text/javascript" src="standard.js"  charset="utf-8"></script>
<script type="text/javascript" src="stack.js"  charset="utf-8"></script>
</head>
<body>


<div style="width:320px; height: 500px;">
<br;>
<div style="position: absolute;margin-top: 400px; width: 320px; heigth: 48px; background: #ffffff"></div>

<div id="alertbox"><div id="alertbox_flekk"></div><div id="alertbox_content"></div></div>
 <a id="button_xwuz" onClick="return menuswitch(document.getElementById('button_about'));" ontouchstart="return menuswitch(document.getElementById('button_about'));"></a>

<div id="imenu">
 <a id="button_game" href="#game" class="active" onClick="return menuswitch(this);" ontouchstart="return menuswitch(this);"><span style="display:none">重新开始</span></a>
 <a id="button_highscore" href="#highscore" onClick="return menuswitch(this);" ontouchstart="return menuswitch(this);"><span style="display:none">游戏排行榜</span></a>
 <a id="button_about" href="#/"  ontouchstart="return menuswitch(this);"><span style="display:none">更多游戏</span></a>
</div>

<div class="ibox" id="container"><div style="width:10000px;" id="container_scroller">
 <div id="ibox_game" class="iboxcontent ibc1" style="position: relative;">
  <div style="width: 237px; height:15px; overflow:hidden;margin-left: 13px;padding-top:10px; font-size:90%; position:absolute; z-index:20;">
  <div style="float:left"><div style="float:left" id="score_title">得分:&nbsp;</div><div id="score" style="float:left;  width:2em;">0</div></div>
  <div style="float:right"><div style="float:left">连击:&nbsp;</div><div id="combo" style="float:left; width:1.5em;">0</div></div>
  <div style="text-align:center">等级: <span id="level">1</span></div>
  </div>
  <div style="width:320px;height:316px; overflow:hidden; position: relative;" id="st_outerarea">
  </div>
 </div>
 <div id="ibox_highscore" class="iboxcontent ibc2">
  <h3>您目前的最高分是...</h3>
  <div id="yourbest"></div>
  <p>一般人努力点可以达到<span class="fontostext">2500</span> 分, 高手可以达到<span class="fontostext">3500</span> 分. 你可以分享给好友挑战下</p>
  <p>你已经玩了 <span id="gamesplayed" class="fontostext">0</span> 次 <span class="fontostext">堆木头</span>.</p>
  <p>点击右上角分享分数到朋友圈</p>


 </div>
</div></div>
<script type="text/javascript"><!--
firstinit();
ialert('<h1>堆木头</h1><p style="margin: 0 20px 0 20px; text-align:left;"><img src="i/icon.png" alt="堆木头!" style="width:64px; height:64px;float:left; margin-right:5px;"/> 当木头移动到木头堆正上方时，按下按钮放木头，尽可能的对齐木头.</p>'+
'<div style="width:110px; margin:30px auto -30px auto;"></div>','restartgame()');
//-->



function play68_init() {
	updateShare(0);
}

function updateShare(bestScore) {
	imgUrl = '#';
	lineLink = '#/';
	descContent = "创意跳高游戏，快来一起跳！";
	updateShareScore(bestScore);
	appid = '';
}

function updateShareScore(bestScore) {
	if(bestScore > 0) {
		shareTitle = "我跳我跳我跳跳跳到" + bestScore + "米，你跳你跳你跳跳跳看！";
	}
	else{
		shareTitle = "我跳我跳我跳跳跳，你跳你跳你跳跳跳！";
	}
}

play68_init();
</script>

</div>
</body>
</html>

JS代码(standard.js):

//// XWUZ standard code// Having thoughts? Ask here:xwuz@tjp.hu//// if (top.frames.length == 0 && navigator.userAgent.indexOf ('iPhone') == -1 && location.href.indexOf('i2.html') == -1 && location.href.indexOf('research') == -1){
	// location.href='game.html';
	//}
var ibox_active='game';
	var ibox_cur=0;
	var ibox_targets=Array();
	var ibox_scroll_timer;
	ibox_targets['game']=0;
	ibox_targets['highscore']=-320;
	ibox_targets['about']=-640;
	var now = new Date();
	var expire = new Date();
	expire.setTime(now.getTime() + 1000*60*60*24*90);
	//90 days var stispace=new Array();
	var myims;
	var gamesplayed;
	var theirbest;
	function imgpreload(ims){
	myims=new Array();
	ims.push('./i/b_yes.png');
	ims.push('./i/b_no.png');
	ims.push('./i/b_okay.png');
	for(i in ims){
	myims[i]=new Image();
	myims[i].src=ims[i];
}
}
function menuswitch(obj){
	var whereto=obj.href.split('#')[1];
	if(whereto=='game' && ibox_active == 'game'){
	pausegame();
	iconfirm('<h1>新游戏</h1>确定要<br />重新开始游戏吗?','restartgame();
	');
	return false;
}
if(ibox_active == 'game' && whereto!='game'){
	pausegame();
}
mse='';
	if(ibox_active != 'game' && whereto=='game'){
	mse='resumegame();
	';
}
tmp=new Array('game','highscore','about');
	tmp2=new Array();
	tmp2['game']=0;
	tmp2['highscore']='-72px';
	tmp2['about']='-182px';
	for(i in tmp){
	document.getElementById('button_'+tmp[i]).style.backgroundPosition=tmp2[tmp[i]]+' '+((tmp[i]==whereto)?(0):('-41px'));
}
if(whereto == ibox_active){
	return false;
}
else{
	ibox_start=ibox_targets[ibox_active];
	ibox_active=whereto;
}
for(i in ibox_targets){
	document.getElementById('button_'+i).className=(i==whereto)?('active'):('');
}
obj.className='active';
	tmp2=new Array();
	tmp=ibox_start;
	for(i=0;
	i<=5;
	i++){
	tmp=(tmp+ibox_targets[whereto])/2;
	tmp2.push('document.getElementById(\'container_scroller\').style.marginLeft=\''+tmp+'px\';
	');
}
tmp2.push('document.getElementById(\'container_scroller\').style.marginLeft=\''+ibox_targets[whereto]+'px\';
	');
	if(mse!=''){
	tmp2.push(mse);
}
ttt=Math.random();
	stispace[ttt]=tmp2;
	setTI(ttt,50);
	return false;
}
function idismiss(){
	document.getElementById('alertbox').style.display='none';
	resumegame();
}
function ialert(iquestion,idoit){
	document.getElementById('alertbox_content').innerHTML=iquestion+'<br style="clear:both" /><br /><a href="#" onclick="idismiss();
	eval(\''+idoit+'\');
	return false;
	" ontouchstart="idismiss();
	eval(\''+idoit+'\');
	return false;
	"><img src="./i/b_okay.png" alt="确定" /></a>';
	document.getElementById('alertbox').style.display='block';
}
function iconfirm(iquestion,idoit){
	document.getElementById('alertbox_content').innerHTML=iquestion+'<br style="clear:both" /><br /><a href="#" ontouchstart="idismiss();
	eval(\''+idoit+'\');
	return false;
	" onclick="idismiss();
	eval(\''+idoit+'\');
	return false;
	"><img src="./i/b_yes.png" alt="Yes" /></a><a href="#" ontouchstart="idismiss();
	return false;
	" onclick="idismiss();
	return false;
	"><img src="./i/b_no.png" alt="No" /></a>';
	document.getElementById('alertbox').style.display='block';
}
function getCookie(Name){
	var search = Name + "=" if (document.cookie.length > 0){
	offset = document.cookie.indexOf(search) if (offset != -1){
	offset += search.length end = document.cookie.indexOf(";
	",offset) if (end == -1) end = document.cookie.length;
	return unescape(document.cookie.substring(offset,end))}
}
return('');
}
function setCookie(name,value){
	document.cookie = name + "=" + escape(value) + ((expire == null) ? "":(";
	expires=" + expire.toGMTString())+';
	domain=lapp.xinli001.com;
	path=/;
	');
}
function setTI(todos,interval){
	if(stispace[todos].length == 0){
	delete stispace[todos];
	return false;
}
eval(stispace[todos].shift());
	setTimeout('setTI('+todos+','+interval+')',interval);
}
function $(id){
	return document.getElementById(id);
}

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