jquery小游戏

MuFeng@

已于 2023-01-26 14:32:25 修改

阅读量2.6k

点赞数 1

分类专栏： jquery项目文章标签： jquery

于 2022-04-16 15:32:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/124214547

版权

jquery项目专栏收录该内容

4 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的互动小游戏。页面上会生成一个3x3的彩色圆圈矩阵，其中一个圆圈颜色与其他不同，玩家需要点击这个特殊的圆圈来进入下一关。每过一关，圆圈数量会增加，难度逐渐提升。如果点击错误，玩家可以选择重新开始或在10秒倒计时结束后继续游戏。这个游戏主要涉及前端开发中的DOM操作、事件监听和随机颜色生成等技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>-->
		<style type="text/css">
			
			#main{
				width: 900px;
				height: 900px;
				border: 3px solid pink;
				margin: 0 auto;
			}
			.yuan{
				border-radius: 100%;
				float: left;
			}
			.dian{
				border-radius: 100%;
				float: left;
			}
			
			img{
				position: absolute;
				width: 800px;
				left: 25%;
				display: none;
			}
			
		</style>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function get16Color(){
				var ys = "#";
				for (var i = 0; i < 3; i++) {
					ys += Math.floor( Math.random()*16 ).toString(16)
				}
				return ys;
			}
			function getRGBColor(){
				var ys = "rgb(";
				for (var i = 0; i < 3; i++) {
					ys += Math.floor( Math.random()*255 )+","
				}
				ys = ys.substring(0,ys.length-1);
				ys += ")"
				return ys;
			}
			
			//全局变量控制关数
			var level = 3;
			
			$(function(){
				// 3*3  9  4*4  16  5*5 25
				function guanka(gk){
//					下一关需要先清楚之前的
					$("#main").empty()
					
					//需要有一个和别的不一样
					var sjs = Math.floor( Math.random() * (gk*gk) )
					for (var i = 0; i < gk*gk; i++) {
						if(i==sjs){
							$("#main").append("<div class='dian'></div>")
						}else{
							$("#main").append("<div class='yuan'></div>")
						}
					}
					//生成完毕圆圈后， 需要动态的设定 宽和高
					var xs = 900/gk;
					$(".yuan").width(xs).height(xs).css("background-color",getRGBColor())
					$(".dian").width(xs).height(xs).css("background-color",get16Color())
				}
				
				guanka(level)
				
				$("#main").on("click",".dian",function(){
					guanka(++level)
				})
				$("#main").on("click",".yuan",function(){
					
					if( confirm("失败了！ 要继续吗？") ){
						$("img").show()
						setTimeout(function(){
							$("img").hide()
						},10000 )
					}else{
						level = 3 
						guanka(level)
					}
					
				})
			})
		</script>
	</head>
	<body>
		
		<img src="img/IMG_0621(20220416-113308).JPG"/>
		
		<div id="main">
		</div>
	</body>
</html>