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>