JavaScriptは色反転ミニゲームを作ります.

8420 ワード

ゲームのルール:
ブロックをクリックして、クリックされたブロックと隣のブロックが変色します.すべての青い四角がオレンジ色になったら、次のレベルに進みます.



 
 

 
 

     
 
 

 

 
 
 
 
 
 

 
 

, , , , 。
0
0
0
var level = 1; var margin = 10; var clickNum = 0; var clickSumNum = 0; window.onload = function() { var mainNode = document.getElementById("main"); var mainWidth = mainNode.offsetWidth; var mainHeight = mainNode.offsetHeight; // var reset = document.getElementById("reset"); reset.onclick = function() { level = 1; createNewDiv(); }; // var resetLevel = document.getElementById("resetLevel"); resetLevel.onclick = function() { createNewDiv(); }; // function changeColor(obj) { if(obj.getAttribute("class")) { if(obj.getAttribute("class") == "blue") { obj.setAttribute("class", "orange"); }else { obj.setAttribute("class", "blue"); } } } // function nodesChangeColor(obj) { clickNum += 1; clickSumNum += 1; var clickNumNode = document.getElementById("clickNum"); clickNumNode.innerHTML = clickNum; var clickSumNumNode = document.getElementById("clickSumNum"); clickSumNumNode.innerHTML = clickSumNum; changeColor(obj); var obj_r = parseInt(obj.getAttribute("r")); var obj_c = parseInt(obj.getAttribute("c")); if(obj_r-1>0) { var topObj = document.getElementById("r"+(obj_r-1)+"_c"+obj_c); changeColor(topObj); } if(obj_c+1<=level) { var rightObj = document.getElementById("r"+obj_r+"_c"+(obj_c+1)); changeColor(rightObj); } if(obj_r+1<=level) { var bottomObj = document.getElementById("r"+(obj_r+1)+"_c"+obj_c); changeColor(bottomObj); } if(obj_c-1>0) { var leftObj = document.getElementById("r"+obj_r+"_c"+(obj_c-1)); changeColor(leftObj); } setTimeout(function() { // orange orangeDivNum(); },500); } // orange function orangeDivNum() { var o_nodes = document.getElementsByClassName("orange"); if(o_nodes.length == level*level) {// // level += 1; createNewDiv(); myAlert(); }else {} } // function createNewDiv() { var divWidth = mainWidth/level-margin; var divHeight = mainHeight/level-margin; mainNode.innerHTML = ""; for(var i=1;i<=level;i++) { for(var j=1;j<=level;j++) { var colorNodes = 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: 5px solid #555;"; } } var levelSpan = document.getElementById("level"); levelSpan.innerHTML = level; clickNum = 0; var clickNumNode = document.getElementById("clickNum"); clickNumNode.innerHTML = clickNum; } };