三目並べ – 4.「スタート」「リセット」ボタンをつけよう
- 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="start">スタート</button>
</div>
<div id="game" style="display: none;">
<table>
<tr><td id="0"></td><td id="1"></td><td id="2"></td></tr>
<tr><td id="3"></td><td id="4"></td><td id="5"></td></tr>
<tr><td id="6"></td><td id="7"></td><td id="8"></td></tr>
</table>
</div>
<script src="./js/index.js"></script>
</body>
</html>ここで、table要素全体を新たにdiv要素で囲み id=”game” style=”display: none;” を付与します。
この記載により、初期表示が非表示となります。
続いて style.css を開き、ボタンのレイアウトについて追加します。
.buttons {
text-align: center;
}
.buttons button {
margin: 20px;
}class=”buttons” である要素について、真ん中へ寄せ（text-align: center;）、その要素の中にあるbutton要素について、上下左右に余白を20ピクセルとるよるに（margin: 20px）設定する。
最後に index.js に処理を追加します。
「スタート」ボタンを押下でゲーム盤を表示し「リセット」ボタン押下で非表示とする処理です。
$(function() {
︙
/**
* 「スタート」ボタン押下
*/
$("#start").click(function() {
// ゲーム盤表示
$("#game").css("display", "block")
})
})javascriptでは、cssを操作することもできます。
実際に表示してみよう
index.html ファイルを再度読み直してください。以下の挙動となっていれば問題ありません。
演習
1.「リセット」ボタンをゲーム盤の下部に設置し、ボタン押下でゲーム盤を非表示にする処理を記述してください。
【ヒント】スタートボタン同様に、id属性を付与してjQueryでイベントを設定してください。
2.「リセット」ボタン押下で、ゲーム盤を非表示にするだけでなく、表示中の〇×マークをすべてクリアにする処理を加えてください。また、ゲームで使用している各種変数について、必要に応じて初期値に戻す処理も記載してください。
【ヒント】ゲームで使用している各種変数については、勝敗がついたかを示すものがあるはずです。
1と2の両方ができれば、以下のような挙動となります。
採用情報
