• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ

三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)

  • Python3.8 と OpenCV のインストール (Ubuntu20.04LTS)
  • ルーティング
  • NAT
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • 三目並べ – 3.勝敗がつくようにしよう
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • Ruby on Rails を MySQLでセットアップ
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • VLAN
  • テスト
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Ubuntuの基本設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi - VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • NodeJSでWebアプリケーション開発 – Socket.IO編
  • CSV import & export – Node.js, mySQL – 2
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Academy 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)

先攻後攻ボタンを追加しよう

まずは index.html を開き、先攻後攻ボタンを追加します。

<!DOCTYPE html>
<html>

<head>
  ︙
</head>

<body>
  <div class="buttons">
    <h1>〇×ゲーム</h1>
    <button id="atk_first" class="attack">先攻</button><button id="atk_after" class="attack">後攻</button><br>
    <button id="start">スタート</button>
  </div>
  <div id="game" style="display: none;">
    ︙
  </div>
  <script src="./js/index.js"></script>
</body>

</html>

javascriptで操作をするために、2つとものボタンに attack クラスを付与しています。また、各ボタンには違う名前のidを付与します。

続いて style.css を開き、先攻後攻ボタンを押した際に、ボタンが押し続けられた状態になるスタイル(色をグレーにし、文字色を反転)を追加します。

.pushed {
  background-color: gray;
  color: white;
}

配置を真ん中に、周囲の余白を20px確保するように設定します。

 

index.js に処理を追加します。

先攻後攻ボタンについて、押したボタンにより先攻後攻を判断し man_attack 変数に結果を格納します。

押したボタンに pushed クラスを付与し、押下した状態を保持し続けるようにします。

$(function() {
  // 定数定義
  const FIRST = 0
  const LAST  = 1
  ︙
  let man_attack = FIRST  // 自分が先攻か後攻か
  ︙
  /**
   * 「スタート」ボタン押下
   */
  $("#start").click(function() {
    $("#game").css("display", "block")
  })
  ︙
  /**
   * 「先攻後攻」ボタン押下
   */
  $(".attack").click(function() {
    let id_name = $(this).attr("id")
    // 「先攻」ボタン押下時
    if (id_name == 'atk_first') { man_attack = FIRST }
    // 「後攻」ボタン押下時
    else { man_attack = LAST }
    $(this).addClass("pushed")
  })
})

 

COM入力処理とその制御をしよう

このページでは、空いているマス目からランダムに選択し、入力する処理を作成します。index.js に処理を追記します。

$(function() {
  // 定数定義
  let last_cells_count = 9
  let finished_com = true // COMによる自動入力が完了したかどうか
  ︙
  $("td").click(function() {
    // 入力済みのセルをタップした場合
    if ($(this).html()) {
      alert("入力できません")
    // 勝敗がついたあとに空のセルをタップした場合
    } else if (got_match) {
      alert("リセットボタンを押してください")
    } else {
      ︙
      // 決着がついていない場合、COMの操作を継続
      if (! got_match) {
        input_by_com()
      }
    }
  })
  ︙
  /**
   * COMによる自動入力
   */
  function input_by_com() {
    finished_com = false // 自動入力開始
    setTimeout(function() {
      let com_result_symbol = do_input_by_com()
      now_attack = !now_attack // 先攻後攻入れ替え
      last_cells_count--

      // 勝敗判定
      if (check_complete()) {
        got_match = !got_match
        alert(com_result_symbol + "の勝ち!")
      }

      // 引き分け判定
      if (! last_cells_count) {
        alert("引き分け!")
        return
      }
      finished_com = true // 自動入力完了
    }, 500)
  }

  /**
   * COMによる自動入力実行
   */
  function do_input_by_com() {
    // 現在の入力情報を取得
    let results = $("td").get()
    // COMのマーク
    let com_result_symbol = now_attack ? BATSU : MARU
    
    let empty_cells = [] // 未入力セル情報
    // ゲーム盤情報確認
    for (let cnt = 0; cnt < results.length; cnt++) {
      // 未入力の場合
      if (! $(results[cnt]).html()) {
        empty_cells.push(results[cnt])
      }
    }

    // 未入力セルがある場合
    if (empty_cells.length) {
      logic(empty_cells, com_result_symbol)
    }

    return com_result_symbol
  }

  /**
   * ロジック
   */
  function logic(empty_cells, com_result_symbol) {
    let target
    
    // ランダムに1つ取得
    target = empty_cells[Math.floor(Math.random() * empty_cells.length)]
    // 結果を入れる
    $(target).html(com_result_symbol)
  }
})

 

実際に表示してみよう

index.html ファイルを再度読み直してください。コンピュータ対戦ができていれば問題ありません。

 

演習

1. 先攻 or 後攻を押下後にもう一方を選択すると、下図のように2つとも選択される表示となります。

先攻と後攻の両方が選択されることは望ましくなく、どちらか一方のみの選択状態としたいです。

このような場合に、もう一方の選択状態を解除するようにしてください。

【ヒント】pushed クラスをjQueryで付与する前後で、片方のボタンに付与されている pushed クラスを削除する。

 

2.先攻・後攻を選択していなくても「スタート」を押せばゲームが始まってしまいます。ボタンを押していない場合、下図のように「先攻・後攻を選択してください。」というアラートを出し、ゲームを開始させないでください。

【ヒント】「スタート」ボタン押下時に、.attack クラスが付与されたボタンに .pushed クラスがついている要素があるかどうかを判定する。

 

3.COMが入力完了するまで、プレイヤーが入力できないように制御してください。現在、プレイヤーが入力完了してから0.5秒後に入力をするように制御していますが、0.5秒たたないうちにプレイヤーが入力可能な状態であり、競合する可能性があります。

【ヒント】冒頭にある、マス目をクリックした際の入力可否、画面リロードorリセットを促すアラートを出す箇所にて、COMが入力中である場合はアラートを出すように制御してください。

 

4. 「リセット」ボタンを押下した際に、先攻後攻の選択状態が解除されるように、実装を修正してください。

 

5.「後攻」を選択した場合、COMが先に入力するように制御してください。

【ヒント】「スタート」ボタン押下時に、先攻後攻フラグを確認し、後攻である場合にCOMによる自動入力を開始する。

 

採用情報

採用情報

Avinton SDGs

SDGsへの貢献

Search

タグ

21卒 22卒 AI ccna Deep Learning DX IoT LPIC Python Ruby SDGs Webエンジニア イベント インタビュー インフラエンジニア エンジニア オンラインセミナー サーバーエンジニア システム開発 セミナー データサイエンス データベース データ分析 データ解析 ネットワークエンジニア ビックデータ ベンチャー ボランティア 人工知能 会社行事 勉強会 医療 営業 就職活動 技術インターン 採用 新卒 新卒採用 新規事業 機械学習 派遣 深層学習 画像分類 社員インタビュー 経営者交流会
© 2021 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ
  • 日本語
    • English (英語)
Avinton Japan