Click here for free DL of the app version that can save data.

No:2401

183

←

Prev Next

→

Gomoku-array of pictograms
Developer User3559｜Date and time 23/6/21 10:23:26
Build time 37.495 sec｜Game capacity 3.216KB｜

Script

以下がJavaScriptを含む、スマホで遊べる5目並べのアプリです。

五目並べ

先手は❎、後手は🅾️です。

このアプリは、5目並べをプレイすることができます。先手は❎、後手は🅾️で、盤面をクリックすることで手を打てます。勝敗が決したらアラートが表示され、リセットボタンで盤面を初期化できます。スマホでも簡単に操作できるように、盤面のマス目は50x50に設定し、絵文字だけでなく文字列も表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

以下がJavaScriptを含む、スマホで遊べる5目並べのアプリです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>五目並べ</title>
    <style>
      .box {
        border: 1px solid black;
        width: 50px;
        height: 50px;
        display: inline-block;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>五目並べ</h1>
    <p>先手は❎、後手は🅾️です。</p>
    <div id="board">
      <div class="box" onclick="turn(this)"></div>
      <div class="box" onclick="turn(this)"></div>
      <div class="box" onclick="turn(this)"></div>
      <br>
      <div class="box" onclick="turn(this)"></div>
      <div class="box" onclick="turn(this)"></div>
      <div class="box" onclick="turn(this)"></div>
      <br>
      <div class="box" onclick="turn(this)"></div>
      <div class="box" onclick="turn(this)"></div>
      <div class="box" onclick="turn(this)"></div>
    </div>
    <br>
    <button onclick="reset()">リセット</button>

function draw() {
        const boxes = document.querySelectorAll('.box');
        boxes.forEach(function(box, index) {
          box.textContent = board[index];
        });
      }

function reset() {
        board.fill('');
        draw();
        turn = '❎';
        const message = document.querySelector('p');
        message.textContent = `先手は❎、後手は🅾️です`;
      }

draw();
    </script>
  </body>
</html>