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

最新推荐文章于 2021-05-31 16:03:11 发布

cighao

最新推荐文章于 2021-05-31 16:03:11 发布

阅读量4.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： javascript javascript射击类游戏 javascript游戏

本文链接：https://blog.youkuaiyun.com/cighao/article/details/49429721

Web开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的太空射击游戏，包括游戏界面设计、动画实现和分数系统。

<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>