给大家揭秘一下坦克大战是怎么做的吧,只有一部分!!看到文章底下!!
1、把这段代码复制到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>坦克大战主界面</title>
<script src="js/jquery-1.7.2.js"></script>
<style type="text/css">
body{
background:#cce8cf;
margin-top: 5%;
}
</style>
<script type="text/javascript">
$(function(){
var i=0; //用于判断音乐符号的标志
$("#music").click(function(){
if(i==0){
$("#img")[0].src="img/music.png";
$("audio")[0].pause();
i+=1;
}else{
$("#img")[0].src="img/mainBackground.png";
$("audio")[0].play();
i-=1;
}
});
});
</script>
</head>
<body>
<center>
<div>
<audio id="myaudio" autoplay="autoplay" loop="loop" hidden="true">
<source src="audio/main.mp3" type="audio/mpeg"></source>
</audio>
<img src="img/mainBackground.png" border="0" usemap="#Map" id="img"/>
<map name="Map" id="Map">
<area shape="rect" coords="689,249,849,304" href="#1" target="_self" id="jixu"/>
<area shape="rect" coords="557,359,706,412" href="index2.html?level=1" target="_self" id="startGame"/>
<area shape="rect" coords="704,465,832,519" href="level.html" target="_self"/>
<area shape="circle" coords="40,596,31" href="question.html" target="_self" id="question"/>
<area shape="circle" coords="217,598,36" href="#2" target="_self" id="music"/>
<area shape="rect" coords="261,563,349,629" href="ranking.html" target="_self" id="paihang"/>
<area shape="rect" coords="435,555,519,629" href="introduction .html" target="_self" id="more"/>
</map>
</div>
</body>
</center>
</html>
2、
把上面这段代码复制到index2.html中;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5坦克大战游戏简化版DEMO演示</title>
<style type="text/css">
body{
background:#cce8cf;
}
#bigBox{
margin: 10% auto;
}
.fadeOut{
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
-webkit-transform:translate(0,-100%);
transform:translate(0,-100%);
}
.fadeIn{
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
-webkit-transform:translate(0,-100%);
transform:translate(0,-100%);
}
</style>
<script src="js/modernizr-1.6.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
//获取当前的score值
document.getElementById("name").οnblur=function(){
document.getElementById("fenshu").value=localStorage.getItem("score");
};
//返回主界面
document.getElementById("goMain").οnclick=function(){
window.location.href="index.html";
};
//查看榜单
document.getElementById("showRank").οnclick=function(){
window.location.href="ranking.html";
};
//保存分数(按钮)
document.getElementById("saveScore").οnclick=function(){
if(confirm("保存分数后,必须重新开始\n确定继续吗?")){
document.getElementById("gameBox").setAttribute("class", "fadeOut");
document.getElementById("saveBox").setAttribute("class", "fadeIn");
document.getElementById("showRank").style.display="none";
document.getElementById("saveScore").style.display="none";
document.getElementById("goMain").style.display="none";
}
};
//"保存"按钮(书本背景)
document.getElementById("save").οnclick=function(){
var name=document.getElementById("name").value;
var fenshu=document.getElementById("fenshu").value;
if(name == ""||fenshu ==""){
alert("姓名和分数不能为空,请重新输入!");
}else{
localStorage.setItem(name,fenshu);
alert("您的姓名和记录已经保存!");
location.reload();
}
return false;
};
}
</script>
</head>
<body>
<div style="height:384px; width:80%;position: relative;overflow: hidden;" id="bigBox">
<div id="gameBox" class="" style="position: absolute;left: 30%;">
<audio id="myaudio" autoplay="autoplay" hidden="true">
<source src="audio/7301.mp3" type="audio/mpeg"></source>
</audio>
<canvas id="canvasOne" width="650" height="384" >Your browser does not support the HTML 5 Canvas. </canvas>
</div>
<div id="saveBox" class="" style="position: absolute;background: url(img/saveScoreBg.png) no-repeat center center; width:650px;height:384px; top: 384px; left: 30%;">
<form action="" method="get">
姓名:<input type="text" name="name" id="name" style="position:absolute; top:97px; right:150px;width:200px;height:40px;opacity: 0.5;" /><br>
分数:<input type="text" name="fenshu" id="fenshu" style="position:absolute; top:173px; right:150px;width:200px;height:40px;opacity:0.5;" /><br>
<button id="save" style="position:absolute;bottom:70px; right:100px;width:75px;height:75px; border-radius: 50%;opacity:0;cursor: pointer;" >保存</button>
</form>
</div>
<button id="showRank" style="position: absolute; bottom: 30px;left: 950px; width: 130px; height: 30px; opacity:0;cursor: pointer; "></button>
<button id="saveScore" style="position: absolute; bottom: 75px;left: 950px; width: 130px; height: 30px; opacity:0;cursor: pointer;"></button>
<button id="goMain" style="position: absolute; bottom: 120px;left: 950px; width: 130px; height: 30px; opacity:0;cursor: pointer;"></button>
</div>
</body>
</html>
3、
完整版下载