はじめに
Javascriptを使ってマルバツゲームを作ります。
マルバツを作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>まるばつげーむ</title>
</head>
<body>
<table id="game">
<tr>
<td><input type="submit" value=" "></td>
<td><input type="submit" value=" "></td>
<td><input type="submit" value=" "></td>
</tr>
<tr>
<td><input type="submit" value=" "></td>
<td><input type="submit" value=" "></td>
<td><input type="submit" value=" "></td>
</tr>
<tr>
<td><input type="submit" value=" "></td>
<td><input type="submit" value=" "></td>
<td><input type="submit" value=" "></td>
</tr>
</table>
<p id="switch"><input type="submit" value="りせっと"></p>
<p id="result" value=""></p>
<script src="work.js"></script>
</body>
</html>
work.js
var cell_val = "o"
var cells = document.querySelectorAll("table[id=game] input[type=submit]")
var reset = document.querySelector("p[id=switch] input[type=submit]")
var result = document.querySelector("p[id=result]")
var state = ""
// ボタンをクリックするとまるとばつが交互に表示される
cells.forEach(function(i){
i.addEventListener("click", function(e){
if (this.value == " " && state == "") {
this.value = cell_val
_check(cell_val)
if (cell_val == "x"){
cell_val = "o"
}
else{
cell_val = "x"
}
}
})
})
reset.addEventListener("click", function(e){
cells.forEach(function(i){
i.value = " "
cell_val = "o"
result.innerText = ""
state = ""
})
})
function _check(cell_val){
var buf = new Array(3)
for (var n = 0; n < 3; n++){
for (var m = 0; m < 3; m++){
buf[m] = cells[m+3*n].value
}
_result(buf, cell_val)
}
for (var n = 0; n < 3; n++){
for (var m = 0; m < 3; m++){
buf[m] = cells[n+3*m].value
}
_result(buf, cell_val)
}
for (var m = 0; m < 3; m++){
buf[m] = cells[m+m*3].value
}
_result(buf, cell_val)
for (var m = 0; m < 3; m++){
buf[m] = cells[(m+1)*2].value
}
_result(buf, cell_val)
}
function _result(buf, cell_val){
var cnt = 0
for (var m = 0; m < 3; m++){
if (buf[m] == cell_val){
cnt += 1
}
}
if (cnt == 3){
result.innerText = cell_val + "のかち"
state = "stop"
}
}
動作確認
まとめ
Javascriptでマルバツゲームを作りました。
コメント