javascript 弹弹球小游戏

最新推荐文章于 2025-02-05 11:33:11 发布

流年似水的wanglf

最新推荐文章于 2025-02-05 11:33:11 发布

阅读量961

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 弹球小游戏

本文链接：https://blog.youkuaiyun.com/u014793936/article/details/45226079

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何利用JavaScript创建一款简单的弹球小游戏。通过控制台实现游戏逻辑，包括球的移动、碰撞检测以及得分系统。适合初学者了解JavaScript基础和动态效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>单机版弹球游戏</title>
		<link rel="stylesheet" type="text/css" href="css/util.css" />
		<script type="text/javascript">
			var step = 20;
			var qiuXFlag = true;
			var qiuYFlag = true;
			var intervalId = 0;

			function qiuMove() {
				intervalId = window.setInterval(function() {
					//根据按键的值移动板
					var ban = document.getElementById("showBan");
					var banX = parseInt(ban.style.left);
					var banH3 = document.getElementById("banH3");
					//接球的范围是
					banH3.innerHTML = "板的接球范围[min=" + banX + "][max=" + (banX + 100) + "]";
					//获取小球
					var qiu = document.getElementById("showQiu");
					var ban = document.getElementById("showBan");
					var qiuH3 = document.getElementById("qiuH3");
					//获取板的left的值
					var banX = parseInt(ban.style.left);
					//改变坐标
					var x = parseInt(qiu.style.left);
					var y = parseInt(qiu.style.top);
					//实现坐标信息
					qiuH3.innerHTML = "球的坐标为[x=" + x + "][y=" + y + "]";
					//判断X的大小
					if (qiuXFlag) {
						qiu.style.left = x + step + "px";
						if (x >= 380) {
							qiuXFlag = false;
						}
					} else {
						qiu.style.left = x - step + "px";
						if (x <= 20) {
							qiuXFlag = true;
						}
					}
					//判断Y的大小
					if (qiuYFlag) {
						qiu.style.top = y + step + "px";
						if (y == 420 && (x >= banX && x <= banX + 100)) {
							qiuYFlag = false;
						}
						if (y > 440) {
							window.clearInterval(intervalId);
							alert("Game Over");
						}
					} else {
						qiu.style.top = y - step + "px";
						if (y <= 20) {
							qiuYFlag = true;
						}
					}
				}, 100);
			}
			window.onkeydown = function(event) {
				//根据按键的值移动板
				var ban = document.getElementById("showBan");
				var banX = parseInt(ban.style.left);
				var banH3 = document.getElementById("banH3");
				//接球的范围是
				banH3.innerHTML = "板的接球范围[min=" + banX + "][max=" + (banX + 100) + "]";
				//获取事件
				var eve = event || window.event;
				//获取按键的值
				var code = eve.keyCode;
				//判断左右
				if (code == 37) {
					if (banX > 20) {
						ban.style.left = banX - step + "px";
					}
				} else if (code == 39) {
					if (banX < 300) {
						ban.style.left = banX + step + "px";
					}
				}
			}
			
		</script>
	</head>

	<body onload="qiuMove();">
		<div id="showDiv">
			<img id="showQiu" src="img/shz.gif" style="height: 20px;position: absolute;left: 200px;top: 0px;" />
			<input type="button" id="showBan" value=" " style="width: 100px;position: absolute;top: 460px;left: 150px;" />
		</div>
		<div id="">
			<h3 id="qiuH3"></h3>
			<h3 id="banH3"></h3>
		</div>
	</body>
</html>