JavaScript制作颜色反转小游戏
游戏规则:
单击方块,被单击的方块及相邻方块变色,当所有蓝色方块变为橙色时,完成任务,进入下一级。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <!--AlwaysforcelatestIErenderingengine(eveninintranet)&ChromeFrame Removethisifyouusethe.htaccess--> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <title>颜色翻转</title> <metaname="description"content=""> <metaname="author"content="jiamengkai"> <metaname="viewport"content="width=device-width;initial-scale=1.0"> <!--Replacefavicon.ico&apple-touch-icon.pngintherootofyourdomainanddeletethesereferences--> <linkrel="shortcuticon"href="/favicon.ico"> <linkrel="apple-touch-icon"href="/apple-touch-icon.png"> <styletype="text/css"> *{ margin:0; padding:0; font-family:"Microsoftyahei"; color:#000; } h1{ margin:10px0; font-size:300%; font-weight:bolder; } span{ display:block; text-indent:32px; } .title{ position:fixed; top:50%; left:50%; width:300px; height:600px; margin:-300px00-500px; } .main{ position:fixed; top:50%; left:50%; width:600px; height:600px; margin:-300px00-150px; background:#555; border-radius:8px; 1border:5pxsolid#555; } .blue,.orange{ margin:5px; } .blue{ background:#099; border-radius:8px; float:left; } .orange{ background:#D69C49; border-radius:8px; float:left; } .button{ 1display:inline-block; zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/ display:block; vertical-align:baseline; margin:8px5px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100%Arial,Helvetica,sans-serif; padding:.5em2em.55em; text-shadow:01px1pxrgba(0,0,0,.3); -webkit-border-radius:.5em; -moz-border-radius:.5em; border-radius:.5em; -webkit-box-shadow:01px2pxrgba(0,0,0,.2); -moz-box-shadow:01px2pxrgba(0,0,0,.2); box-shadow:01px2pxrgba(0,0,0,.2); } .button:hover{ text-decoration:none; } .button:active{ position:relative; top:1px; } .btn{ color:#fef4e9; border:solid1px#da7c0c; background:#f78d1d; background:-webkit-gradient(linear,lefttop,leftbottom,from(#faa51a),to(#f47a20)); background:-moz-linear-gradient(top,#faa51a,#f47a20); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20'); } .btn:hover{ background:#f47c20; background:-webkit-gradient(linear,lefttop,leftbottom,from(#f88e11),to(#f06015)); background:-moz-linear-gradient(top,#f88e11,#f06015); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015'); } .btn:active{ color:#fcd3a5; background:-webkit-gradient(linear,lefttop,leftbottom,from(#f47a20),to(#faa51a)); background:-moz-linear-gradient(top,#f47a20,#faa51a); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a'); } .operBtn{ margin-top:10px; width:200px; text-align:center; } .tipSpan{ display:inline-block; margin:5px2px; width:200px; text-align:right; font-size:18px; } .tipNum{ display:inline-block; margin-right:10px; text-align:right; width:60px; font-size:18px; } </style> </head> <body> <divclass="title"> <h1>颜色翻转</h1> <h2>游戏规则:</h2> <span> 单击方块,被单击的方块及相邻方块变色,当所有蓝色方块变为橙色时,完成任务,进入下一级。 </span> <divclass="operBtn"> <inputtype="button"class="buttonbtn"id="reset"value="重新开始"/> <inputtype="button"class="buttonbtn"id="resetLevel"value="重置本级"/> </div> <divclass="tipInfo"> <spanclass="tipSpan">级别:</span><divclass="tipNum"id="level">0</div> <spanclass="tipSpan">本级点击次数:</span><divclass="tipNum"id="clickNum">0</div> <spanclass="tipSpan">总点击次数:</span><divclass="tipNum"id="clickSumNum">0</div> </div> </div> <divclass="main"id="main"> </div> </body> <scripttype="text/javascript"src="common.js"></script> <scripttype="text/javascript"> varlevel=1; varmargin=10; varclickNum=0; varclickSumNum=0; window.onload=function(){ varmainNode=document.getElementById("main"); varmainWidth=mainNode.offsetWidth; varmainHeight=mainNode.offsetHeight; //重新开始 varreset=document.getElementById("reset"); reset.onclick=function(){ level=1; createNewDiv(); }; //重置本级 varresetLevel=document.getElementById("resetLevel"); resetLevel.onclick=function(){ createNewDiv(); }; //换颜色 functionchangeColor(obj){ if(obj.getAttribute("class")){ if(obj.getAttribute("class")=="blue"){ obj.setAttribute("class","orange"); }else{ obj.setAttribute("class","blue"); } } } //换颜色 functionnodesChangeColor(obj){ clickNum+=1; clickSumNum+=1; varclickNumNode=document.getElementById("clickNum"); clickNumNode.innerHTML=clickNum; varclickSumNumNode=document.getElementById("clickSumNum"); clickSumNumNode.innerHTML=clickSumNum; changeColor(obj); varobj_r=parseInt(obj.getAttribute("r")); varobj_c=parseInt(obj.getAttribute("c")); if(obj_r-1>0){ vartopObj=document.getElementById("r"+(obj_r-1)+"_c"+obj_c); changeColor(topObj); } if(obj_c+1<=level){ varrightObj=document.getElementById("r"+obj_r+"_c"+(obj_c+1)); changeColor(rightObj); } if(obj_r+1<=level){ varbottomObj=document.getElementById("r"+(obj_r+1)+"_c"+obj_c); changeColor(bottomObj); } if(obj_c-1>0){ varleftObj=document.getElementById("r"+obj_r+"_c"+(obj_c-1)); changeColor(leftObj); } setTimeout(function(){ //计算orange块的数量 orangeDivNum(); },500); } //计算orange块的数量 functionorangeDivNum(){ varo_nodes=document.getElementsByClassName("orange"); if(o_nodes.length==level*level){//完成全部翻转 //进入下一级 level+=1; createNewDiv(); myAlert(); }else{} } //进入下一级 functioncreateNewDiv(){ vardivWidth=mainWidth/level-margin; vardivHeight=mainHeight/level-margin; mainNode.innerHTML=""; for(vari=1;i<=level;i++){ for(varj=1;j<=level;j++){ varcolorNodes=document.createElement("div"); colorNodes.style.cssText="width:"+divWidth+"px;height:"+divHeight+"px;"; colorNodes.setAttribute("class","blue"); colorNodes.setAttribute("id","r"+i+"_c"+j); colorNodes.setAttribute("r",i); colorNodes.setAttribute("c",j); colorNodes.onclick=function(){ nodesChangeColor(this); }; mainNode.appendChild(colorNodes); mainNode.style.cssText="border:5pxsolid#555;"; } } varlevelSpan=document.getElementById("level"); levelSpan.innerHTML=level; clickNum=0; varclickNumNode=document.getElementById("clickNum"); clickNumNode.innerHTML=clickNum; } }; </script> </html>