三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
- Python3.6とOpenCVのインストール (Ubuntu18.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生存者予測
- 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編
- Ruby on Rails インストール
- AmazonEC2とVPCでネットワークとサーバーを構築しよう
- AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
- Linuxとは
- カート機能作成
- Ruby on Rails Academy
- ショッピングアプリケーション作成
- ダイナミックルーティング
- PostgreSQL – Python – Apache – Bootstrap
- 三目並べ – 1.ゲーム盤を作ろう
先攻後攻ボタンを追加しよう
まずは 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による自動入力を開始する。
採用情報
