こんにちは、パキラです。
今回はJavaScriptで○×ゲームを作っていきます。
初心者ですので、間違いがあったらご指摘ください。
記事は数回に分けていきます。
 |
JavaScript 第7版 [ David Flanagan ] 価格:5,060円 |
○×ゲームの画面作成
最初にhtmlで○×ゲームの画面を作成していきます。
まずは基本の形を書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○✖ゲーム</title>
</head>
<body>
</body>
</html>
 |
確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ] 価格:2,728円 |
ボタンの描画
まずは○×ゲームには○や✖を描くマスが必要です。
今回は<input type=”button”>を使っていきます。
こちらはinput要素のbutton型になります。
単純なプッシュボタンの描画されます。
value属性により中の値を入力して表示させることができます。
例えば
<input type="button" value="クリックしてね"></input>これでこのように表示されます
このinput要素のbutton型を使い、まるばつを書くマスを作成していきます。
<input type=”button”>を3つ書いたら、<div>要素で挟みます。
これで一行目のボタンの描画ができました。
この<div>要素で挟むことによって、3つボタンを描画されている行がひとつのブロックとして作成できます。
<div>
<input type="button"></input>
<input type="button"></input>
<input type="button"></input>
</div>
これで上の図のようにボタンが3つ描画ができました。
マスは３×３のマスにしたいので、このブロックを３段同じことを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○✖ゲーム</title>
</head>
<body>
<h1>○✖ゲーム</h1>
<p>○の番です</p>
<div>
<input type="button" value="○"></input>
<input type="button" value="✖"></input>
<input type="button"></input>
</div>
<div>
<input type="button"></input>
<input type="button"></input>
<input type="button"></input>
</div>
<div>
<input type="button"></input>
<input type="button"></input>
<input type="button"></input>
</div>
<input type="button" value="もう一度遊ぶ"></input>
</body>
</html>そしてこれをWebページ上ではこのように表示されます。
 |
JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ] 価格:3,080円 |
○✖ゲーム
○の番です
まとめ
これで○×ゲームの画面の土台ができました。
見た感じこれで遊べそうになってきましたね。
でもこれだけですと、ボタンを押しても何も起きませせん。
○×ゲームですので、ボタンを押したら○や✖が表示される。
3つが並んだら勝敗を決し、勝ち負けの判定をする。
そんなプログラミングをしないといけません。
次回はこの画面をCSSによってサイズ調整をしていきたいと思います。
ちなみに英語では○×ゲームを『Noughts and Crosses』や『Tic Tac Toe』と呼ぶそうです。
色々な呼び方があって面白いですね。
ここまで見ていただき、ありがとうございました。
 |
図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編 [ 中田 亨 ] 価格:2,640円 |
コメント