Javascriptでマルバツゲームを作る

はじめに

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でマルバツゲームを作りました。

コメント

タイトルとURLをコピーしました