こんにちは、パキラです
前回はCSSで〇✖ゲームの見た目を調整しました
今回からJavaScriptでプログラミングをしていきたいと思います
このプログラムは『OASYS Technologies』の動画を勉強として参考にしています
よりわかり易く、勉強したい方はそちらの動画をおすすめします
では、さっそくはじめます
まず前回のまでのhtmlに表示します
ついでにマス目のボタンにid属性をそれぞれ設定しておきます
この設定をすることでJavaScript側でそれぞれのボタンの値を変えたりことができて便利です
 |
JavaScript 第7版 [ David Flanagan ] 価格:5,060円 |
JavaScriptの記述場所
htmlファイルにJavaScriptのプログラムを読み込むためには、読み込むように記述しないといけません
今回はheadの中にJavaScriptのファイルを読み込むように記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○✖ゲーム</title>
これがJavaScriptを読み込む記述です
↓↓↓↓↓↓
<script src="main.js" defer></script>
</head>
<body>
<h1>○✖ゲーム</h1>
<p>○の番です</p>
<div class="box">
<div class="item1">
<input id="b1" class="block" type="button" value="○"></input>
<input id="b2" class="block" type="button" value="×"></input>
<input id="b3"class="block" type="button"></input>
</div>
<div class="item2">
<input id="b4"class="block" type="button"></input>
<input id="b5"class="block" type="button"></input>
<input id="b6"class="block" type="button"></input>
</div>
<div class="item3">
<input id="b7"class="block" type="button"></input>
<input id="b8"class="block" type="button"></input>
<input id="b9"class="block" type="button"></input>
</div>
</div>
<input type="button" value="もう一度遊ぶ"></input>
</body>
</html>今回、JavaScriptのファイルは『main.js』にしました
JavaScriptの拡張子は『js』になります
『defer』はhtmlを読み込むときにJavaScriptを最後に読み込むようにするための記述です
そうしないと、htmlを読み込むときにJavaScriptを読み込むのに時間が掛かり、ページの表示が遅くなってしまうためです
もしbody内にJavaScriptを書き込むときは最後の方に記述するのがおすすめです
そうすれば、ページが表示されてから、最後にJavaScriptのプログラムを読み込む順番になります
ではJavaScriptを読み込む記述をしたら、『main.js』にコードを書いていきたいと思います
最初にプログラミングをするときは、何から初めて良いかわかりません
まずは何をどうしたいのか書き出すと良いです
○✖ゲーム
○の番です
①マス目をクリックするとマークが表示する
②マークが〇✖交互に切り替わる
③勝敗が表示される
④リセットされる
書き出すと、とてもわかり易くなりますね
 |
確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ] 価格:2,728円 |
マス目のIDを取得する関数
まずは①のマスにマークを表示させるところからはじめます
//ID取得する関数
function $(id){
return document.getElementById(id);
}これはhtmlにあるIDを取得して、オブジェクトを返す関数を作りました
この関数を使用すればdocument.getElementById(id); を毎回記述する必要がなくなります
もちろん毎回記述しても結果は同じですが、プログラムは少なく、無駄がないのが美しいとのことです
まだ初心者の私にはよくわからないですね
冒頭でhtmlのボタンのそれぞれにid属性を設定しました
なぜ、すべてのボタンにidを設定したかというと、プレイする人がどこのボタンをクリックしたのかわかるようにするためです
例えば、ボタンが１つしかなければ、プレイする人はその１つのボタンをクリックするしかありません
しかし、これは９つのボタンがあり、ゲームの進行状況等によりクリックする場所が変わります
よってどのボタンがクリックされたのか把握するためにすべてのボタンにidを設定します
ちなみに//を記入するとその先はコメントとなります
メモを残すことができます
これはとても大切だと思います
メモを残すことにより、この処理が何の処理なのかすぐわかります
最初にコメントでこの処理をするというコメントをすると流れがわかり易くなります
ぜひ活用してください
 |
JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ] 価格:3,080円 |
クリックされたときの関数
では、次はクリックされたときの関数を作ります
今回の関数は『clickAction』という名前にします
//クリックされたときの処理
function clickAction(event){
//イベントからクリックされたマス目のIDを取得する
let id = event.target.id;
//IDからオブジェクトを取得する
let object = $(id);
//オブジェクト(マス目)にマークを設定する
object.value = "○"
}これでクリックされたときの処理は完成なんです
しかし、これだけでは何も起きません
作った関数を使う記述が必要になります
 |
いちばんやさしいJavaScriptの教本第2版 ECMAScript 2017（ES8）対応 人気 [ 岩田宇史 ] 価格:2,420円 |
マス目のイベントの関数
次にマス目のイベントを設定する関数を作ります
//画面を読み込んだときの処理
function onloadAction(){
//マス目にイベントを設定する
$("b1").onclick = clickAction;
}これで html でボタンに設定した id を取得してオブジェクトを呼び出します
『$(“b1”).onclick』は、この id のボタンがクリックされたときです
ここに先ほど作成した関数『clickAction』を設定します
こうすると、id が “b1” に設定されているボタンをクリックすると、関数『clickAction』が実行されるようになります
他のマス目にも同じようにイベントを設定します
//画面を読み込んだときの処理
function onloadAction(){
//マス目にイベントを設定する
$("b1").onclick = clickAction;
$("b2").onclick = clickAction;
$("b3").onclick = clickAction;
$("b4").onclick = clickAction;
$("b5").onclick = clickAction;
$("b6").onclick = clickAction;
$("b7").onclick = clickAction;
$("b8").onclick = clickAction;
$("b9").onclick = clickAction;
}これですべてのマス目にイベントが設定できました
しかしこれでは、まだ実行されません
 |
ゲームで学ぶ「JavaScript入門」 HTML5＆CSSも身につく！ [ 田中賢一郎 ] 価格:2,640円 |
画面を読み込んだときイベントを設定する関数
画面を読み込んだときの処理の関数『onloadAction』をいつ実行するか設定されていません
//画面読み込み時のイベントを設定
window.onload = onloadAction;これで画面が読み込まれたときにマス目にイベントが設定されるようになります
ここまで保存して実行します
○✖ゲーム
○の番です！
これでマス目をクリックするとマス目に○が表示されるようになりました
実際に動作してくれるとわくわくしますね
初心者の私にはこれでも達成感があります
|
確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ] 価格:2,728円 |
まとめ
ここまで読んでいただきありがとうございます
実際に自分がコードを入力して、ブラウザでしっかり動作してくれると嬉しいですね
次回はマス目がクリックされたときに○と×が交互になるプログラムを書きたいと思います
あと、このブログに載っているコードは全角のスペースが使われている場所があります
これはあとから修正したいと思います
ですのでコピペでは作動しませんので、ご了承ください
|
JavaScript 第7版 [ David Flanagan ] 価格:5,060円 |
コメント