javaScript打气球小游戏

最新推荐文章于 2021-03-02 09:07:23 发布

qq_41925438

最新推荐文章于 2021-03-02 09:07:23 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： html javaScript css

本文链接：https://blog.csdn.net/qq_41925438/article/details/84401989

版权

本文分享了一款使用JavaScript编写的打气球小游戏。作者作为在校学生，希望通过分享代码与社区进行交流，共同进步。文章提供了游戏的实现代码，同时欢迎读者留言获取相关图片和资料。

摘要由CSDN通过智能技术生成

简介：游戏运用了javaScript,css,html等知识编写的，当点击左右三角形时，气球的移动速度和产生速度都会发生变化，数字越大，速度越快，同时气球上面的金额越大，气球的移动速度就越快，通过计时器控制游戏的时长，点击气球会消失。
	游戏效果图片：

在这里插入图片描述
具体代码如下：

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		body {
			background: url(img/bg.jpg) no-repeat;
			background-size: cover;
		}
		
		p {
			text-align: center;
			color: green;
			font-size: 24px;
		}
		
		span {
			color: red;
		}
		
		#dv {
			margin: auto;
			width: 1200px;
			height: 600px;
		}
		
		#max {
			width: 250px;
			height: 600px;
			position: fixed;
			right: 10px;
			top: 20px;
		}
		
		#num {
			position: absolute;
			margin-top: -150px;
			left: 65px;
		}
		
		.yx {
			width: 100px;
			height: 130px;
			line-height: 80px;
			text-align: center;
			color: #f00;
			bottom: 0px;
			position: absolute;
			font-wight: bolder;
			font-size: 40px;
		}
		
		#yy {
			font-size: 35px;
			font-weight: bold;
			color: green;
			position: absolute;
			bottom: 405px;
			left: 45px;
		}
	</style>
</head>

<body style="cursor:help;">
	<div id="dv">
		<div>