给女朋友写的h5（移动端）小游戏,超简单

最新推荐文章于 2024-07-30 10:31:47 发布

油焖程序员

最新推荐文章于 2024-07-30 10:31:47 发布

阅读量5.1k

点赞数 6

分类专栏：笔记文章标签： html5 jquery

本文链接：https://blog.csdn.net/qq_45487481/article/details/106477389

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

公司今天不太忙，给女朋友写了移动端个小游戏，直接上代码！

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			.w {
				width: 5rem;
				height: 10rem;
				position: relative;
				top: 0;
				left: 50%;
				transform: translateX(-2.5rem);
				border: #0000FF solid .01rem;

			}

			.ball {
				width: 0.6rem;
				height: 0.3rem;

				background: url(img/peng.png) center;
				background-size: cover;
				position: absolute;
				bottom: 0.2rem;
				left: 50%;
				transform: translateX(-0.15rem);
			}

			.but_box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 7rem;
				height: 1rem;
				position: relative;
				bottom: -0.5rem;
				left: 50%;

				transform: translateX(-3.5rem);
				border: greenyellow 0.02rem solid;
			}

			.newBall {
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 50%;
				background-color: blue;
				position: absolute;
				opacity: 1;
				
			}

			button {
				height: 0.5rem;
			}

			.sco {


				color: red;
				font-size: 0.56rem;
				position: absolute;
				bottom: 0rem;
				left: 50%;
				transform: translateX(-0.28rem);
			}
		</style>
	</head>
	<body>
		<div class="w">
			<div class="ball">
			</div>
		</div>
		<div class="but_box">
			<!-- <button class="add">加速</button> -->
			<button class="left">左</button>
			<button class="cut">停止</button>
			<button class="right">右</button>
		</div>
		<div class="sco">0</div>
	</body>
	<!-- <script src="js/rem.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		//rem.js
		! function(n) {
			var e = n.document,
				t = e.documentElement,
				i = 720,
				d = i / 100,
				o = "orientationchange" in n ? "orientationchange" : "resize",
				a = function() {
					var n = t.clientWidth || 320;
					n > 720 && (n = 720);
					t.style.fontSize = n / d + "px"
				};
			e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
		}(window);
		//定义按钮动作（速度可以自己调节）
		$('.left').click(function() {

			$('.ball').stop().animate({
				left: '0.15rem'
			}, 2000)
		})
		$('.right').click(function() {

			$('.ball').stop().animate({	
				left: '4.85rem'
			}, 4000)
		})
		$('.cut').click(function() {
			$('.ball').stop()
		})
		//随机生成掉落小球
		const arr = []
		var sco = 0
		var i = 0
		var w = 0.6
		function bron() {
			const x = Math.random() * 450 + 0.15;
			arr.push(Math.round(x))
			$(".w").append('<div class=' + "newBall" + i + '></div>');
			$('.newBall' + i).css({
				'left': arr[i] / 100 + "rem",
				'width': '0.3rem',
				'height': '0.3rem',
				'borderRadius': '50%',
				'background': 'url(img/pig.png) center',
				'background-size': 'cover',
				'position': 'absolute'
			}).animate({
				'top': '9.5001rem'
			}, 4000, function() {
				a = i - 1
		
				if ($('.newBall' + a).position().top == $('.ball').position().top && $('.newBall' + a).position().left >= $(
						'.ball').position().left - 15 && $('.newBall' + a).position().left <= $('.ball').position().left + 30) {
					sco = sco + 10
					$('.sco').text(sco)
					i = i - 1
					arr.pop()
					$('.newBall' + a).remove()
					w=w+0.01
					$('.ball').css({
						"width":w+"rem"
					})
		
				} else {
					// console.log('好可惜')
				}
		
			}, )
			i++
			if (i >= 10 || sco >= 200) {
				clearInterval(collide)
				alert('游戏结束,难易程度可调节')
			}
		}
		var collide = setInterval(bron, 4100)
	</script>
</html>

在这里插入图片描述