「繪畫」不同大小的井字板

因此，我正在使用JavaScript和HTML作爲學校和老師的項目製作井字遊戲遊戲，要求我們能夠「繪製」不同大小的板子， 3x3或4x4。「繪畫」不同大小的井字板

這就是我想要做的。

window.addEventListener("load", onLoad, false) 
 

 
function onLoad() { 
 
    var wins = [7, 56, 448, 73, 146, 292, 273, 84]; 
 
    var mainDiv = document.getElementById("mainDiv"); 
 
    mainDiv.style.background = "#000000"; 
 
    mainDiv.style.width = "306px"; 
 
    mainDiv.style.height = "306px"; 
 
    mainDiv.style.border = "solid"; 
 
    mainDiv.style.borderColor = "#79BDEB"; 
 
    mainDiv.style.position = "absolute"; 
 
    mainDiv.style.left = "10px"; 
 
    mainDiv.style.top = "70px"; 
 
    //select.addEventListener("change", onChange, false); 
 
} 
 

 
function onChange() { 
 
    var select = document.getElementById("mySelect").value; 
 
    var main = document.getElementById("mainDiv"); 
 
    if (select == 3) { 
 
    three(); 
 
    } else if (select == 4) { 
 
    four(); 
 
    } else if (select == 5) { 
 
    five(); 
 
    } else { 
 
    six(); 
 
    } 
 
    main.innerHTML = ""; 
 
    counter = 0; 
 
} 
 

 
function three() { 
 
    var main = document.getElementById("mainDiv"); 
 
    for (var i = 0; i < 3; i++) { 
 
    for (var j = 0; j < 3; j++) { 
 
     var small = document.createElement("div"); 
 
     main.appendChild(small); 
 
     small.style.background = "#52498F"; 
 
     small.style.width = "100px"; 
 
     small.style.height = "100px"; 
 
     small.style.border = "solid"; 
 
     small.style.borderColor = "#000000"; 
 
     small.style.position = "absolute"; 
 
     small.style.left = j * 100 + "px"; 
 
     small.style.top = i * 100 + "px"; 
 
     small.addEventListener("mousedown", onDown, false); 
 
    } 
 
    } 
 
    var state = false; 
 

 
    function onDown(e) { 
 
    var small = e.target; 
 
    small.style.background = "#f0f0f0"; 
 
    small.style.fontSize = "72px"; 
 
    small.style.fontFamily = "Arial"; 
 
    if (!state) { 
 
     small.innerHTML = "x"; 
 
    } else { 
 
     small.innerHTML = "o"; 
 
    } 
 
    state = !state; 
 
    small.style.textAlign = "center"; 
 
    } 
 
} 
 

 
function four() { 
 
    var main = document.getElementById("mainDiv"); 
 
    for (var i = 0; i < 4; i++) { 
 
    for (var j = 0; j < 4; j++) { 
 
     var small = document.createElement("div"); 
 
     main.appendChild(small); 
 
     small.style.background = "#52498F"; 
 
     small.style.width = "75px"; 
 
     small.style.height = "75px"; 
 
     small.style.border = "solid"; 
 
     small.style.borderColor = "#000000"; 
 
     small.style.position = "absolute"; 
 
     small.style.left = j * 75 + "px"; 
 
     small.style.top = i * 75 + "px"; 
 
     small.addEventListener("mousedown", onDown, false); 
 
    } 
 
    } 
 
    var state = false; 
 

 
    function onDown(e) { 
 
    var small = e.target; 
 
    small.style.background = "#f0f0f0"; 
 
    small.style.fontSize = "60px"; 
 
    small.style.fontFamily = "Arial"; 
 
    if (!state) { 
 
     small.innerHTML = "x"; 
 
    } else { 
 
     small.innerHTML = "o"; 
 
    } 
 
    state = !state; 
 
    small.style.textAlign = "center"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Tic-tac-toe</title> 
 
    <script src="logic.js"></script> 
 
    <style> 
 
    #mySelect { 
 
     font-size: 24px; 
 
    } 
 
    #myColor { 
 
     font-size: 24px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <select id="mySelect" onchange="onChange()"> 
 
    <option value="3">3 x 3</option> 
 
    <option value="4">4 x 4</option> 
 
    <option value="5">5 x 5</option> 
 
    <option value="6">6 x 6</option> 
 
    </select> 
 
    <select id="myColor" onchange="color()"> 
 
    <option value="11">Blue</option> 
 
    <option value="12">Green</option> 
 
    <option value="13">Red</option> 
 
    </select> 
 
    <div id="mainDiv"></div> 
 
    <script type="text/javascript" src="cordova.js"></script> 
 
</body> 
 

 
</html>

而我的問題是，小div不會畫在mainDiv。奇怪的是，在我的一個朋友的個人電腦上，它完美的工作。但對於我和其他幾個朋友來說，它並不是。

來源

2014-09-28 Konrad Sznajder

多少onDown的，你呢？ – artm 2014-09-28 12:57:45

四。我知道我只能使用一個。現在我正在改變它。 – 2014-09-28 14:47:10

而且我的問題是，小的div不要在mainDiv畫

這是因爲你是第一繪製你的元素應用所需的FN循環，但事後你清除使用main.innerHTML = "";

此外，而不是像three()創建不同的功能，four()整個#mainDiv，five() ...
你可以簡單地創建一個單一的一個oneField(i, j, n)並傳遞給函數，你需要應用類似的迭代次數：

select.addEventListener("change", createMap, false); 

function createMap() { 
    main.innerHTML = ""; // Clear first, not afterwards! 
    var n = this.value; // 3, 4, 5, ... 
    for(var i=0; i<n; i++) for(var j=0; j<n; j++) oneField(i, j, n); 
    counter = 0; 
    turn = 0; 
}

其中n可用於通過簡單的數學fieldWidth = 300/n

設置字段單元格的寬度

關於您的HTML和樣式，我會創建一個表元素和TR與TD細胞，而不是DIV，但我不知道你的任務的細節。另外而是對每一個元素都重新創造的風格，我想簡單地創建一個style規則，如：

#mainDIv > div { 
    /* Cell styles here */ 
}

在任何情況下，這是一個使用DIV一個例子，你做的：

function el(id){ return document.getElementById(id); } 
 

 
function css(el, prop, val){ 
 
    if (typeof prop==="object") { 
 
    for(var key in prop) el.style[key] = prop[key]; 
 
    } else { 
 
    el.style[prop] = val; 
 
    } 
 
} 
 

 
var wins = [7, 56, 448, 73, 146, 292, 273, 84], 
 
    size = 300, 
 
    turn = 0, // 0=O, 1=X 
 
    counter = 0, 
 
    select = el("mySelect"), 
 
    color = el("myColor"), 
 
    main = el("mainDiv"); 
 

 
css(main, { 
 
     background : "#000", 
 
     width  : size+"px", 
 
     height  : size+"px", 
 
     border  : "3px solid #79BDEB", 
 
     position : "absolute", 
 
     left  : "10px", 
 
     top  : "70px" 
 
    }); 
 

 
select.addEventListener("change", createMap, false); 
 

 
function oneField(i, j, n){ 
 
    var field = document.createElement("div"), 
 
     w = size/n; 
 
    css(field, { 
 
     background : "#52498F", 
 
     width  : w-2 +"px", // -2 is to account 1px border 
 
     height  : w-2 +"px", 
 
     border  : "1px solid #000", 
 
     position : "absolute", 
 
     left  : j*w +"px", 
 
     top  : i*w +"px", 
 
     fontSize : w-20 +"px", 
 
     lineHeight : w-15 +"px", 
 
     textAlign : "center" 
 
    }); 
 
    main.appendChild(field); 
 
    field.addEventListener("mousedown", onDown, false); 
 
    //return field; // Return the created square field HTMLElement 
 
} 
 

 
function createMap() { 
 
    main.innerHTML = ""; 
 
    var n = this.value; 
 
    for(var i=0; i<n; i++) for(var j=0; j<n; j++) oneField(i, j, n); 
 
    counter = 0; 
 
    turn = 0; 
 
} 
 

 
function onDown(e) { 
 
    var targ = e.target; 
 
    css(targ, { 
 
    background : "#f0f0f0" 
 
    }); 
 

 
    turn ^= 1; // Toggle turn 1,0,1,0... 
 
    targ.innerHTML = turn ? "x" : "o" ; 
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    font: 16px/1 Helvetica, Arial, sans-serif; 
 
    color: #444; 
 
} 
 
#mySelect, 
 
#myColor { 
 
    font-size: 24px; 
 
}

<select id="mySelect"> 
 
    <option value="3">3 x 3</option> 
 
    <option value="4">4 x 4</option> 
 
    <option value="5">5 x 5</option> 
 
    <option value="6">6 x 6</option> 
 
</select> 
 

 
<div id="mainDiv"></div>

來源

2014-09-28 14:06:27

哇！非常感謝，這對我幫助很大。我創建div的原因是我們開始在課堂上這樣做。我會搗鼓，也許嘗試創建表。 – 2014-09-28 14:55:51

您爲什麼不使用表格，而不是使用div進行設計？這是簡單得多:)

這裏的的jQuery：

$("select").change(function(){ 
    var table = $("table").html(""); 
    var tr=""; 
    var size = $(this).val().charAt(0); 
    for(var i=1; i<=size; i++){ 
    for(var j=1; j<=size; j++) 
     tr+="<td></td>"; 
    $(table).append("<tr>"+tr+"</tr>"); 
    tr=""; 
    } 
});

DEMO

來源

2014-09-28 14:11:36

有趣的是，爲什麼'.charAt（0）'？ – 2014-09-28 14:42:38

由於選項的形式爲'N×N'（在

「繪畫」不同大小的井字板

回答