jQuery制作一个简单的打地鼠游戏(超详细讲解)

作者简介:练习时长两年半的Java up主
个人主页:老茶icon
ps:点赞是免费的,却可以让写博客的作者开兴好久好久
系列专栏:Java全栈,计算机系列(火速更新中)
格言:种一棵树最好的时间是十年前,其次是现在
动动小手,点个关注不迷路,感谢宝子们一键三连

目录

  • 课程名:Java
    • 内容/作用:知识点/设计/实验/作业/练习
    • 学习:jQuery制作一个简单的打地鼠游戏
  • 前言
  • 原理
    • 代码如下
  • 总结

课程名:Java

内容/作用:知识点/设计/实验/作业/练习

学习:jQuery制作一个简单的打地鼠游戏

前言

   综合CSS+JS+jQuery知识,简单实现打地鼠小游戏,实现结果过如下:

打地鼠小游戏

原理

   "打地鼠"游戏原理:

1.静态布局:n*n的div容器,默认无背景

2.随机显示:定义class,写上背景图的样式,所有的div开始随机,随机到的div拥有该class值,其余div移除该class值

3.点击消失同时计分:给所有div添加单击事件,判断单击的div是否拥有class值,如果有则移除,加分

4.控制游戏时长:开始后,使用setInterval()随机显示,使用setTimeout()在10s后移除setInterval()

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			#main {
				width: 740px;
				height: 500px;
				margin: 100px auto 0;
				background-color: gainsboro;
			}

			#main>div {
				width: 100px;
				height: 100px;
				float: left;
				background-color: #fff;
				margin-left: 20px;
				margin-top: 20px;
			}

			button {
				border: none;
				display: block;
				background-color: #999;
				width: 150px;
				height: 40px;
				margin: 50px auto;
				color: #fff;
				font-size: 20px;
			}

			/* 用于显示背景图的样式 */
			.show {
				background-image: url("img/dishu.jpg");
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<script>
				for (var i = 1; i <= 24; i++) {
					document.write("
"
) } </script> </div> <button>开始游戏</button> <script src="js/jquery-3.6.4.min.js"></script> <script> // 间隔器 var startGame; // 分数 var score = 0; // 获取所有的div,这里的divList是Jquery对象 var $divList = $("#main>div"); // 开始游戏按钮 $("button:eq(0)").click(() => { // 每次游戏重置分数 score = 0; $("button:eq(0)").attr("disabled", "true"); setTimeout(() => { alert("游戏结束,你的得分为【" + score + "】"); clearInterval(startGame); }, 10000); // 每隔0.8s startGame = setInterval(() => { $divList.removeClass("show"); var index = Math.floor(Math.random() * $divList.length); $("#main>div:eq(" + index + ")").addClass("show"); }, 800); }); // 所有div添加单击事件 $("#main>div").click(function() { if ($(this).hasClass("show")) { $(this).removeClass("show"); score++; } }); </script> </body> </html>

总结

   

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

你可能感兴趣的:(jQuery,jquery,游戏,javascript)