JavaScript之射击类小游戏的简单示例

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cighao/article/details/49429721
<html>
	<head>
		<title>Space Shooter</title>
		<style>
			#range{
				position:absolute;
				width:100%;
				height:100%;
				left:0px;
				top:0px;
				background:url(space.jpg);
				cursor:crosshair;
			}
			#img1{
				position:absolute;
				border:none;
				left:0px;
				top:100px;
				padding:10px;
			}
			#score{
				font:16px normal arial,verdana, sans-serif;
				color:red;
				padding:10px;
			}
		</style>
		<script>
			var timer1 = null;
			var el = null;
			var score = 0;    // 分数
			var shots = 0;   // 总共射击的次数
			function moveIt(){
				// 图片动画
				if(parseInt(el.style.left) > (screen.width - 50))  
                    el.style.left = 0;  
                el.style.left = parseInt(el.style.left)+ 6 +'px';  
				el.style.top = 100 + (80*Math.sin(parseInt(el.style.left)/50))+'px';
				
				timer1 = setTimeout(moveIt,25);
			}
			function scoreUp(){
				//增加分数
				score++;
			}
			function scoreboard(){
				document.getElementById("score").innerHTML = "Shots: "+shots+" Score: "+score;
			}
			window.onload = function(){
				//显示分数
				el = document.getElementById("img1");
				el.onclick = scoreUp;   // 点击图片时增加分数
				document.getElementById("range").onclick = function(){  //更新总得点击次数
					shots++;
					scoreboard();  //更新分数板
				}
				scoreboard();     //初始化游戏
				el.style.left = '50px';
				moveIt();
			}
		</script>
	</head>
	<body>
		<div id="range"> 
			<div id="score"> </div>
			<img alt="Fire!" id="img1" src="ufo.jpg" />
		</div>
	</body>
</html>

展开阅读全文

没有更多推荐了,返回首页