最简单的弹一弹小游戏

最新推荐文章于 2019-01-02 17:13:28 发布

起風、

最新推荐文章于 2019-01-02 17:13:28 发布

阅读量2k

点赞数 2

文章标签：游戏前端娱乐

本文链接：https://blog.csdn.net/j123__/article/details/81142665

版权

最近弹一弹小游戏很火，分享一个自制的最简单的弹一弹小游戏！！

声明一下：该游戏使用H5+CSS+JS制作，功能简单，纯属娱乐，点开网页即可畅玩！！

首先，是整个界面的布局：

    <div id="tit">
		<p class="p1">弹一弹   分数：</p>
		<p class="p2">0</p>
	</div>
	<div id="di">
		<img src="img/ad.png">
		<input type="button" value="救生条" id="butt1">
	</div>
	<input type="button" onclick="fun()" value="开始" id="butt">

可以说没一点技术含量了，会一点点前端的就能看懂。

接着是CSS：

<style type="text/css">
		#tit{
			width: 500px;
			height: 40px;
			margin-top: -20px;
			
		}
		#tit .p1{
			font-size: 30px;
			color: blue;
			float: left;
		}

		#tit .p2{
			font-size: 30px;
			float: left;
			color: red;
		}
		#di{
			width: 500px;
			height: 520px;
			margin: 0 auto;
			border: 4px solid;
			border-bottom: 0px;
			position: relative;
		}

		img{
			width: 25px;
			height: 25px;
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#butt1{
			width: 45px;
			height: 10px;
			background: blue;
			position: absolute;
			bottom: 5px;
			left: 0px;
		}
</style>

再然后就是重中之重了 JS的使用：

实现鼠标点击按钮，然后开始按钮变成暂停按钮是通过下面的函数实现：

<script type="text/javascript">
	function fun(){
		but = document.getElementById('butt');
		if (but.getAttribute('value') == '开始'){
			but.setAttribute('value','暂停');
		}
		else{
			but.setAttribute('value','开始');
		}

		if (but.getAttribute('value') == '开始'){
			console.log('现在是开始');
		} 
		else{
			console.log('现在是暂停');
		}


	}
</script>

只需要将文本中的conslog.log()换为点击后你想要执行的函数或方法即可。

弹一弹难的一点就是反弹路径了，我们可以设置横向与纵向移动的像素数，当到达边界时，只需将这两个值取反即可实现反弹。

下面就是整个游戏的源代码：

<!DOCTYPE html>
<html>
<head>
	<title>弹一弹</title>
	<meta charset="utf-8">
	<style type="text/css">
		#tit{
			width: 500px;
			height: 40px;
			margin-top: -20px;
			
		}
		#tit .p1{
			font-size: 30px;
			color: blue;
			float: left;
		}

		#tit .p2{
			font-size: 30px;
			float: left;
			color: red;
		}
		#di{
			width: 500px;
			height: 520px;
			margin: 0 auto;
			border: 4px solid;
			border-bottom: 0px;
			position: relative;
		}

		img{
			width: 25px;
			height: 25px;
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#butt1{
			width: 45px;
			height: 10px;
			background: blue;
			position: absolute;
			bottom: 5px;
			left: 0px;
		}
	</style>
</head>
<body>
	<div id="tit">
		<p class="p1">弹一弹   分数：</p>
		<p class="p2">0</p>
	</div>
	<div id="di">
		<img src="img/ad.png">
		<input type="button" value="救生条" id="butt1">
	</div>
	<input type="button" onclick="fun()" value="开始" id="butt">
<script type="text/javascript">
	
	img1 = document.getElementsByTagName('img')[0];
	inp1 = document.getElementsByTagName('input')[0];
	p1 = document.getElementsByTagName('p')[1];
	//横向初始位置
	var x = 0;
	//纵向初始位置
	var y = 40;
	var inx = 0;
	//每次横向移动的像素数
	var xStep = 3;
	//每次纵向移动的像素数
	var yStep = 2;
	//分数
	var score = 0;
	
	function fun(){
		but = document.getElementById('butt');
		// alert(but.getAttribute('value'));
		if (but.getAttribute('value') == '开始'){
			but.setAttribute('value','暂停');
		}
		else{
			but.setAttribute('value','开始');
		}

		if (but.getAttribute('value') == '开始'){
			clearInterval(set);
		} 
		else{
			set = setInterval(function(){
			x += xStep;
			y += yStep;
			//当满足这个条件时，说明小球已到了最下方
			if(y >= 480 ){
				//如果条件成立，说明下方救生条接住了小球
				if(inx<=x+10 && x<=inx+50) {
					//小球继续移动
					yStep *= -1;
					//分数+10
					score += 10;
					//分数显示到页面
					p1.innerHTML = score;
				}
				//未接到小球，失败
				else fail();
			}
			else{
				//小球横向距离大于边界值，反弹
				if(x + 25 >500 || x<0){
					xStep *= -1;
				}
				//小球超出上方距离 反弹
			if(y<0)
				yStep *= -1;
		}	
				//小球移动
				img1.style.left = x +'px';
				img1.style.top = y +'px';
		
		},20);
		}
	}
	

	function fail(){
		clearInterval(set);
		alert('游戏结束！！您的分数为'+score);
	}

	document.onkeydown = function(evt){
		// 【<--】:37  【-->】:39
		//如果按键值等于37，说明按下了'<--'键
		if(evt.keyCode == 37){
			inx -= 4;
			//边界判断
			if(inx<=0){
				inx = 0;
			}
			inp1.style.left = inx +'px';
		}
		//如果按键值等于39，说明按下了'-->'键
		else if(evt.keyCode == 39){
			inx += 8;
			//边界判断
			if(inx>=455){
				inx = 455;
			}
			inp1.style.left = inx +'px';
		}

	}


</script>
</body>
</html>

欢迎大家积极评论！！新手上路，笔下留情。。