用html语言做坦克大战

最新推荐文章于 2024-01-02 14:56:51 发布

梦醒...

最新推荐文章于 2024-01-02 14:56:51 发布

阅读量3.8k

点赞数

分类专栏： html语言

本文链接：https://blog.csdn.net/qq_41020768/article/details/79273769

版权

html语言专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的博客

给大家揭秘一下坦克大战是怎么做的吧，只有一部分!!看到文章底下！！

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、完整版下载