公開日： 2016/06/12
最終更新日：2018/06/02

【JavaScript】○×ゲーム

マスをクリックすると、交互に○×が表示される。

ソースコード

■HTML

<table class="gameTable">
	<tr>
		<td onclick="check(this)"></td>
		<td onclick="check(this)"></td>
		<td onclick="check(this)"></td>
	</tr>
	<tr>
		<td onclick="check(this)"></td>
		<td onclick="check(this)"></td>
		<td onclick="check(this)"></td>
	</tr>
	<tr>
		<td onclick="check(this)"></td>
		<td onclick="check(this)"></td>
		<td onclick="check(this)"></td>
	</tr>
</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

■CSS

.gameTable {
	width:300px;
	height:300px;
	border: 1px #000000 solid;
}

.gameTable tr {
	width:32%;
	height:32%;
	border: 1px #000000 solid;
}

.gameTable tr td {
	font-size:40px;
	width:32%;
	height:32%;
	border: 1px #000000 solid;
	text-align:center;
}

.gameTable {

width:300px;

height:300px;

border: 1px #000000 solid;

}

.gameTable tr {

width:32%;

height:32%;

border: 1px #000000 solid;

}

.gameTable tr td {

font-size:40px;

width:32%;

height:32%;

border: 1px #000000 solid;

text-align:center;

}

■JavaScript

//○×ゲーム
var i=0;
var content;
function check(element) {

	if ( element.textContent != "" ) {
		window.confirm("そのマスは指定できません。");
		return;
	}
	
	if ( i++ %2 == 0 ) {
		content = "○";
		element.style.color = "red";
	}
	else {
		content = "×";
		element.style.color = "blue";
	}
	
	element.textContent = content;
}