感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="content">
<div id="green">
</div>
<div id="red">
<div id="blue">
<div id="yellow">
<div id="content">
<h1>
Simon
</h1>
<p>
--
</p>
<button>
start
</button>
xxxxxxxxxx
//按方块闪烁顺序点对方块长度加一,点错重新开始当前长度
$(document).ready(function(){
$("button").click(function(){
len=1;
gameOn();
});
})
var len,i,ind,arr=[];
function gameOn(){
arr=[];
i=0;
$("p").text(len);
var j=0;
while(len!=0){
arr.push(Math.floor(Math.random()*4));
len--;
}
len=arr.length;
console.log(arr);
console.log(ind);
time = setInterval(function(){
if (j<arr.length)
{
shine(arr[j]);
j++;
else{
clearInterval(time);
},1000) ;
$("div.content").children().not("#content").click(function(event){
var y = event.pageY-$(this).parent().offset().top;
var x = event.pageX-$(this).parent().offset().left;
if (x<200)
if (y<200)
ind = 0;
else
ind = 3;
ind = 1;
ind =2;
shine(ind);
compare();
function compare(){
if (arr[i]==ind)
i=i+1;
if (i==len)
len++;
function shine(order){
var oDiv =$("div.content").children().eq(order);
oDiv.css("opacity","1");
setTimeout(function(){
oDiv.css("opacity",".7");
},300);
body{
background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/retina_wood.png')
div.content{
background:black;
position:relative;
width:400px;
height:400px;
margin:50px auto;
border:none;
border-radius:50%;
#green,#red,#blue,#yellow{
border:180px solid;
position:absolute;
transform:rotate(-45deg);
top:15px;
left:15px;
border-color:transparent;
opacity:.7;
#green{
border-top-color:green;
#red{
border-right-color:red;
left:25px;
#blue{
border-bottom-color:blue ;
top:25px;
#yellow{
border-left-color:yellow;
#content{
width:200px;
height:200px;
background:#ECE7EE;
border:10px solid black;
box-sizing:border-box;
top:100px;
left:100px;
text-align:center;