"绘图“;不同尺寸的Tic-tac脚趾板
"Drawing" different sized Tic-tac-toe board
所以我正在制作一个Tic-tac-toe游戏，使用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不能在主div 中绘制
这是因为您首先绘制元素时应用了所需的fn循环，但之后使用main.innerHTML = ""; 清除了整个#mainDiv
此外，不创建不同的函数，如three()、four()、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和样式，我会用TD单元格而不是DIV创建Table元素和TR，但我不知道你的作业细节。此外，我不需要为每个元素重新创建样式，而是简单地创建一个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>与其在设计中使用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
相关文章：
- Tic-Tac-Toe using React JS
- Tic tac toe alpha-beta
- Tic Tac Toe游戏是't更换球员、更新比分或更换球员
- Tic-Tac-Toe绘图功能
- 宣布获胜者后，Tic-tac-Toe javascript停止切换回合
- Javascript Tic Tac Toe游戏获胜't验证对角线赢家
- Simple JavaScript/jQuery tic tac toe game
- Tic-Tac Toe:检查空方
- Tic-Tac-Toe:Sqaure不能被覆盖
- Tic-Tac-Toe in Javascript
- Javascript TIC TAC TOE - AI not working?
- "绘图“;不同尺寸的Tic-tac脚趾板
- 使用Minimax和Javascript的Tic-Tac Toe
- Tic-Tac-Toe——无限循环——我如何提示第二步
- 尝试用Javascript制作一个简单的Tic-Tac-Toe游戏.没有错误，但当我单击框时没有发生任何事情
- HTML/JavaScript Tic Tac Toe with a 2D array
- JavaScript Tic Tac Toe -查找数组中所有可能的数字组合
- 我如何随机选择一个单元格在我的TIC TAC TOE
- Coffeescript中Tic Tac Toe的极大极小解的Bug
- tic-tac-toe javascript重置按钮不工作
