【H5游戏】-整一个简单的解压小游戏【抽纸巾】

本文链接：https://blog.csdn.net/qq_27185879/article/details/128870087

专栏简介
💒个人主页 📰专栏目录点击上方查看更多内容	📖心灵鸡汤📖 社会不相信庸俗，成功需要汗水和寂寞铸就。无数次的质疑或是嘲笑，这些都无所谓，记住自己是谁，自己想要什么就足够了!	不定时分享各种H5小游戏，欢迎订阅！收藏！

抽卫生纸

抽纸巾的小游戏，灵感来源于小游戏【抽卫生纸】，不过实现的比较简单，只是单纯的下滑操作，可以无限抽纸，沒有时间限制

游戏需求

解压小游戏，没有时间限制，可以一直下滑。

👇核心玩法👇

1️⃣.下滑屏幕，一直往下
2️⃣.计分规则，每下滑一定距离得一分

👇界面原型👇

1️⃣.开始界面。下滑开始

👇成品演示👇

在这里插入图片描述

游戏开发

下方仅贴出核心代码以供参考
下方仅贴出核心代码以供参考
下方仅贴出核心代码以供参考
下面就总结下实现过程。

1.游戏素材准备

素材来源于网络，如有侵权，联系删除！！！
在这里插入图片描述

以上素材作用如下👇

作用	图片
背景图	bg.jpg
抽纸	paper.jpg

2.代码实现

代码比较简单，这里直接贴出来

1.创建index.html页面

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="./css/main.css">
<title>抽纸</title>
</head>
<body>
	<div class="index">
		<div class="game">
			<div class="content">
				<div class="run" style="display:none">
					<p style="font-size: 20px;color:white;text-indent: 100px;">已抽出纸巾 
					<span class="content1"><span class="nowScore">0</span><span class="content2">m</span></span>
				</p>		
				</div>
				<div class="paper"></div>
			</div>
		</div>
	</div>

	<script>
		document.addEventListener('DOMContentLoaded', function(){
			var bgY = 0;
			score = 0;
			var a = {};
			var domGame = document.querySelector('.game');
			var domScore = document.querySelector('.game .nowScore');
			var domPaper = document.querySelector('.paper');
			domGame.addEventListener('touchstart', function(e){
				a.startY = e.touches[0].pageY;
				domGame.addEventListener('touchmove', touchMove);
				document.querySelector('.run').style.display = 'block';
			});
			touchMove = function(e){
				a.disY = e.touches[0].pageY - a.startY;
				a.startY = e.touches[0].pageY;
				bgY += a.disY;
				score += parseInt(a.disY/10);
				//设置垂直位子
				domPaper.style.backgroundPositionY = bgY + 'px';
				domScore.innerHTML = score;
			}
		});
	</script>
</body>

源码下载

源码下载
🙊营业公告🙊	源码获取 🔗
🕣工作日:早8:30-晚5:30
📢非工作日期间将无法访问，可在👇下方留言👇获取源码