web前端游戏项目-辨色大比拼【附源码】
web前端游戏项目-辨色大比拼【附源码】
《辨色大比拼》是一个旨在测试和提升玩家颜色识别能力的在线游戏。在游戏中，玩家将通过辨识颜色来解谜并推进游戏进程。辨色大比拼也是一个寓教于乐的游戏，它不仅提供了一个有趣的辨色挑战，还能帮助玩家提高颜色识别能力，增强对色彩的敏感度。通过与其他玩家竞争和比较分数，玩家可以提升自己的辨色技能，享受游戏的乐趣
运行效果：
HTML源码：
DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
<meta name="keywords" content="辨色大比拼">
<meta name="description" content="辨色大比拼通过有趣的心理游戏训练你的眼睛和大脑的反应协调能力">
<meta property="og:image" content="logo.jpg">
<title>最坑人的辨色大比拼!title>
<style type="text/css">
.green{color:#27ae60;}.red{color:#e74c3c;}.orange{color:#f39c12;}.yellow{color:#f6dd09;}.blue{color:#3498db;}.black{color:#000;}.brown{color:#795118;}.all_quest h1{font-size:40px;margin-top:30px;}
body{background:url(460.jpg) repeat left top;color:#61696a;font-family:'Bree Serif',serif;font-size:13px;margin:0;padding:0;-webkit-text-size-adjust:none}h1{color:#2e4053;font-size:28px;margin-top:10px}h2{border-top:1px dotted #61696a;margin-top:30px;padding-top:30px}a{color:#3498db;text-decoration:none;transition:all ease 1s;}a:hover{background:#f39c12;border-color:#f39c12;}p{margin:0}p.sequence{color:#2e4053;font-size:20px;margin:0 0 10px}span.blank{border:2px dotted #ffc000;color:#ffc000;padding:1px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}.wrapper{background:url(h.png) no-repeat center -15px;text-align:center;position:relative;height:480px;width:100%}.splash,.howto,ul.hud{position:absolute;left:50%}.splash{background:url(b.png) no-repeat center -200px;padding-top:189px;top:10px;margin-left:-90px;}.howto{margin-left:-120px;top:10px}.all_quest{position:relative;top:80px}.button{background:#e74c3c;border:2px solid #e74c3c;color:#fff;display:inline-block;font-size:16px;margin-top:5px;padding:5px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}ul{list-style-type:none;margin:0;padding:0}ul li{display:inline-block;margin:0;padding:0}ul.hud{top:30px;margin-left:-150px}ul.hud li{color:#61696a;margin:0 10px;text-align:left;width:105px}ul.hud li.timeCount{background:url(b.png) no-repeat left -62px;padding-left:25px}ul.hud li.totalQuest{background:url(b.png) no-repeat -148px -62px;padding-left:25px}.answer{margin-top:50px}.answer ul li{font-size:24px;margin:0 10px 10px}.answer ul li a{border:2px solid #ffc000;color:#ffc000;display:inline-block;padding:1px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}.answer ul li a.option_a:hover,.answer ul li a.option_b:hover,.answer ul li a.option_c:hover,.answer ul li a.option_d:hover{background-color:#0f591b}.answer ul li a.option_a{/*background:url(b.png) no-repeat 9px -5px*/}.answer ul li a.option_b{/*background:url(b.png) no-repeat -48px -5px*/}.answer ul li a.option_c{/*background:url(b.png) no-repeat -114px -5px*/}.answer ul li a.option_d{/*background:url(b.png) no-repeat -176px -5px*/}a.disable_click{pointer-events:none}.hint{height:20px;position:relative;top:85px}.tick{background:url(b.png) no-repeat left -110px;text-indent:-99999px;height:50px;width:55px}.cross{background:url(b.png) no-repeat -75px -110px;text-indent:-99999px;height:50px;width:55px}.result{margin:0 auto;position:relative;top:-45px}.result span.score{color:#27ae60;display:block;font-size:24px}.copyrights{position:absolute;margin-left:-173px;left:50%;top:375px;width:346px}.copyrights p{color:#7f888f;}.copyrights a{background: none;}.copyrights a:hover{background: none;}.fb_plugin{margin:0 auto;padding:0 20px;width:320px}.other_game{background:#222;margin:0 auto;overflow:hidden;padding:10px;width:708px}.other_game p{color:#ccc;font-family:Arial,Helvetica,sans-serif;font-weight:normal;font-size:14px;margin-top:0}.other_game ul{list-style-type:none;margin:0;padding:0}.other_game ul li{margin-top:10px;display:block;}.other_game ul li:first-child{margin:0}.other_game ul li img{float:left;margin-right:10px}.other_game a{display:block;color:#09c;font-size:14px;overflow:hidden;text-decoration:none}.other_game a:hover{background:#138c46;color: #fff;}.other_game a span{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#ccc}@media screen and (max-width:320px){.wrapper{overflow-x:hidden;width:320px;min-width:320px}.splash{margin-left:-160px;width:320px}.splash h1{font-size:18px}h2{margin-top:15px;padding-top:15px}.howto{margin-left:-150px;width:300px}.copyrights p{font-size:11px}.fb_plugin{width:280px;padding:0}.result{width:280px}.result span.score{font-size:16px}}
style>
<link href="bdsstyle.css" rel="stylesheet" type="text/css"><script src="logger.js">script>head>
<body style="zoom: 1;">
<div class="wrapper">
<div class="splash">
<h1><span class="green">红span> 还是 <span class="red">绿span>?h1>
<p><a href="honghaishilv.html" class="button">继续a>p>
div>
<div class="howto" style="display: none;">
<h1>怎么玩?h1>
<p>你的颜色敏感度测试? 你的右脑怎么样?<br>做完这个测试，你就知道了!p>
<p>下面让我们来测试下!p>
<h2>规则h2>
<p><strong>选择你看到的字的颜色!strong>p>
<p><a href="honghaishilv.html" class="button">开始游戏!a>p>
div>
<ul class="hud">
<li class="timeCount">li>
<li class="totalQuest" style="display: none;">问题 1 / 20li>
ul>
<div class="all_quest">
<div class="quest1" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="green">橙h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">红a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="dui">绿a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">橙a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">蓝a>li>
ul>
div>
div>
<div class="quest2" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="red">黑h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="dui">红a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">黄a>li>
ul>
div>
div>
<div class="quest3" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="yellow">黄h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="dui">黄a>li>
ul>
div>
div>
<div class="quest4" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="blue">红h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">黄a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">橙a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">红a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="dui">蓝a>li>
ul>
div>
div>
<div class="quest5" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="black">黑h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">橙a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="dui">黑a>li>
ul>
div>
div>
<div class="quest6" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="yellow">绿h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="dui">黄a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">红a>li>
ul>
div>
div>
<div class="quest7" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="orange">黄h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">黄a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="dui">橙a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">绿a>li>
ul>
div>
div>
<div class="quest8" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="blue">蓝h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="dui">蓝a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">黄a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">红a>li>
ul>
div>
div>
<div class="quest9" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="yellow">绿h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="dui">黄a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">黑a>li>
ul>
div>
div>
<div class="quest10" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="orange">红h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">红a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="dui">橙a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">绿a>li>
ul>
div>
div>
<div class="quest11" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="red">橙h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="dui">红a>li>
ul>
div>
div>
<div class="quest12" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="orange">黑h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="dui">橙a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">蓝a>li>
ul>
div>
div>
<div class="quest13" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="yellow">黄h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">橙a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="dui">黄a>li>
ul>
div>
div>
<div class="quest14" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="black">蓝h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="dui">黑a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">红a>li>
ul>
div>
div>
<div class="quest15" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="brown">绿h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">橙a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">黄a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="dui">褐a>li>
ul>
div>
div>
<div class="quest16" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="brown">褐h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="cuo">蓝a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">绿a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="dui">褐a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">黄a>li>
ul>
div>
div>
<div class="quest17" style="display: none;">
<p class="sequence">字的颜色是什么?p>
<h1 class="green">红h1>
<div class="answer">
<ul>
<li><a href="honghaishilv.html" class="option_a" data-verify="dui">绿a>li>
<li><a href="honghaishilv.html" class="option_b" data-verify="cuo">红a>li>
<li><a href="honghaishilv.html" class="option_c" data-verify="cuo">黑a>li>
<li><a href="honghaishilv.html" class="option_d" data-verify="cuo">橙a>li>