★ジャンル別雑文集&ホームページ作成
&JavaScriptゲーム★

雑文の小部屋ホームページアドレス
★当サイトは"JavaScript"を有効にして
ご利用いただくと便利です★
ゲームを作成してみたいが作り方が分からない。
そもそも全くの素人にゲームなんか作れるの。
プログラミングの知識も無いのに作れるの。
パソコンの付属ソフトだけで作れるの。

大丈夫です。そんな超初心者向けのページです。
今回はJavaScriptゲームの作り方を紹介したいと思います。
作成するゲームは「じゃんけんゲーム(超簡単バージョン)」です。


<プログラムの見本>

<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<title>じゃんけんゲーム</title>
</head>
<body>
<div id="message1" style="position:absolute; left:10px; top:10px">
相手の選択は ?
</div>
<div id="message2" style="position:absolute; left:10px; top:40px">
勝敗の結果は ?
</div>
<form style="position:absolute; left:10px; top:70px">
あなたの選択は 
<select id="mySelect">
<option>グー</option>
<option>チョキ</option>
<option>パー</option>
</select>
<input type="button" value="決定" onclick="myGame()">
</form>

<script>
function myGame(){
myNumber = document.getElementById("mySelect").selectedIndex;
hisNumber = Math.floor(Math.random()*3);
if( hisNumber == 0 ){
hisHand = "グー";
}
if( hisNumber == 1 ){
hisHand = "チョキ";
}
if( hisNumber == 2 ){
hisHand = "パー";
}
if( myNumber - hisNumber == -2 ){
judge = "あなたの 負け";
}
if( myNumber - hisNumber == -1 ){
judge = "あなたの 勝ち";
}
if( myNumber - hisNumber == 0 ){
judge = "両者の 引き分け";
}
if( myNumber - hisNumber == 1 ){
judge = "あなたの 負け";
}
if( myNumber - hisNumber == 2 ){
judge = "あなたの 勝ち";
}
document.getElementById("message1").innerHTML = "相手の選択は "+hisHand;
document.getElementById("message2").innerHTML = "勝敗の結果は "+judge;
}
</script>

</body>
</html>

<ゲーム作成の手順>

上記の見本をコピーして、エディタ(メモ帳等)で保存する。
保存する際の拡張子は「.txt」ではなく「.html」とする。
(事前に拡張子を常時表示する設定に変更しておいた方が無難)
文字コードは「Shift_JIS」(メモ帳の場合は「ANSI」)とする。
続いて、その保存したファイルをブラウザで開く。
制限されている旨の警告が出た場合は許可する。
ブラウザの設定でJavaScriptが無効の場合は有効にする。
そうすると下記の枠内と同じ画面が表示されるはず。
実際にボタンをクリックして文字が変われば成功。

相手の選択は ?
勝敗の結果は ?
あなたの選択は 

成功しましたか。文字が変わりましたね。
でも、コピーしただけで作っていないと嘆くあなた。
このプログラムを自分なりに修正していって下さい。
そうすれば自分の作品に生まれ変わっていきます。
ただし、修正するには最低限の知識が必要です。
それではプログラミングの勉強を始めましょう。

<プログラムの説明>

<!DOCTYPE html>
<html>
<head>
ここにheadの内容を記述
</head>
<body>
ここにbodyの内容を記述
</body>
</html>

上記がプログラム全体の構成である。
先頭行はDOCTYPE宣言で、この例ではHTML5で作成されたものであると宣言。
<html> <head> <body> が開始タグ、
</html> </head> </body> が終了タグで、それぞれセットになっている。
html両タグの内側にhead両タグとbody両タグがある。
head部分は先に、body部分は後に配置するのがルール。
head部分とbody部分にそれぞれ必要な内容を記述する。

<meta charset="Shift_JIS">
<title>じゃんけんゲーム</title>

この2行がheadの内容である。
1行目は文字コードの宣言で、ここでは「Shift_JIS」とする。
宣言したコードと保存したコードが異なれば文字化けの原因になる。
2行目はページタイトルなのでtitleタグ内の文字は変更可能。

<div id="message1" style="position:absolute; left:10px; top:10px">
相手の選択は ?
</div>

ここからがbodyの内容である。
1行目がdivの開始タグ、3行目が終了タグ。
divは両タグに囲まれた部分を一つのかたまりとして扱う場合に使う。
開始タグにはこの例のようにidやstyleを指定することも可能。

idは要素を識別する為のもの。
この例ではid名を「message1」としている。
id名は自由に付けられるので、変更することも可能。
ただし、同じページで同じ名前を付けるのは不可、
数字も使えるが1文字目はアルファベット、
大文字と小文字を区別しているので要注意。
変更した場合はそのid名を呼び出している箇所も変更が必要。

styleは見栄えの情報(css(スタイルシート))を指定する為のもの。
cssの記述方法は3通りあるが、ここではタグに記述する方法を採用する。
「position:absolute」は画面左上からの位置を指定する場合に使う。
pxはピクセルと読み、コンピュータが扱う単位の一つ。
この例では、左leftから10px、上topから10pxの位置を指定している。
その結果、その位置に「相手の選択は?」が表示されるという仕組み。
leftとtopの数値を変更すれば、文字を移動させることが可能。
ただし、変更する際に「:」「;」を消してしまわないよう要注意。

<div id="message2" style="position:absolute; left:10px; top:40px">
勝敗の結果は ?
</div>

前項の説明でもう十分ですよね。
id名を「message2」にして重複しないようにしている。
topから40pxの位置を指定して、前項の文字と重ならないようにしている。

<form style="position:absolute; left:10px; top:70px">
あなたの選択は 
<select id="mySelect">
<option>グー</option>
<option>チョキ</option>
<option>パー</option>
</select>
<input type="button" value="決定" onclick="myGame()">
</form>

formはデータ送信用のフォームを作成する場合に使う。
今回のゲームであれば、必ずしもformを使う必要はないが、
ここではformを使い、2種類のフォーム部品を配置することにする。
つまり、form両タグの内側にselect両タグとinputタグを記述する。
1行目のform開始タグにstyleで表示位置を指定しておく。
2行目のようにform内に文字を入れることもできる。

3~7行目がselect部分で、そのすぐ内側にoption部分がある。
セレクトメニューを表示させる場合はselectとoptionをセットで使う。
3行目のselect開始タグに任意のid名を付けておく。
4~6行目のoption両タグに囲まれた文字がメニューに表示される文字。
じゃんけんの選択は3通りなのでoptionも3つ必要。

inputはテキストボックスやボタンを表示させる場合に使う。
この例では「type="button"」なのでボタンが表示される。
valueの「決定」はボタン上に表示される文字なので変更自由。
onclickにはクリックした時の処理を書いておく。
この例ではJavaScriptの関数「myGame」が実行される仕組み。
関数とはプログラムを入れておく器のようなもの。
関数の中身は別途JavaScriptで定義する必要がある。
「myGame」は関数名で「()」を付けて記述するのがルール。
関数名は自由に付けられるので、変更することも可能。
ただしid名と同様の制限があるので要注意。
さらに「function」「if」のような定義済みの言葉は不可。
なおinputには終了タグが無いので</input>としてはダメ。

<script>
ここにJavaScriptの内容を記述
</script>

前項まではhtml(サイトを表示する為の言語)の記述方法。
ここからがJavaScript(動的なサイトを実現する為の言語)の説明である。
script両タグの内側にJavaScriptの内容を記述する。
この例ではbody部分の後半に配置しているが、body前半でもhead部分でも構わない。

function myGame(){
ここに関数名「myGame」の中身を記述
}

関数の中身を定義する場合は「function 関数名(){処理}」が基本形。
この例では1行目に「function myGame(){」と書いている。
そして改行後に実際の処理内容を記述している。
処理の最後は「}」で閉じて「myGame」の定義が終了。
たまたまこの例ではそこでJavaScriptの記述も終了。

myNumber = document.getElementById("mySelect").selectedIndex;
hisNumber = Math.floor(Math.random()*3);

左端に書かれた「myNumber」「hisNumber」を変数と呼ぶ。
変数とは値を一時的に入れておく器のようなもの。
その変数には数値や文字を入れることができる。
変数名は自由に付けただけなので、変更することも可能。
ただしid名や関数名と同様の制限があるので要注意。
「左辺=右辺」は右辺の値を左辺に代入するという意味。
代入によって「myNumber」「hisNumber」の値が置き換わる。

「document.getElementById("mySelect")」でid名「mySelect」を呼び出す。
「.selectedIndex」はセレクトメニューの何番目を選択したか。
1番目なら「0」2番目なら「1」のように「0」から始まるので要注意。
例えば「パー」なら3番目「2」なので「myNumber」の値も「2」になる。
なお、個々の処理の終わりには「;」を付けるのが一般的なルール。
これを付け忘れると区切りが認識できずエラーとなる場合がある。

「Math.floor」「Math.random」はあらかじめ定義されている関数。
「Math.floor()」で小数以下を切り捨てて整数にする。
「Math.random()」で0以上1未満の範囲で乱数を発生させる。
なので「Math.random()*3」は0以上3未満の小数を含んだ数値。
それを「Math.floor()」すると「0」「1」「2」のいずれかとなる。
そして、そのいずれかが「hisNumber」に代入される。
試しに「*3」を「*2」に変更すると「0」「1」の2通りとなり、
相手は「グー」か「チョキ」しか出さない仕様に変わる。

if( hisNumber == 0 ){
hisHand = "グー";
}
if( hisNumber == 1 ){
hisHand = "チョキ";
}
if( hisNumber == 2 ){
hisHand = "パー";
}

ここでは相手が乱数で選んだ数値を文字に変換する。
前項で説明した通り「hisNumber」は「0」「1」「2」のいずれか。
このような場合には「if(条件式){処理}」で処理を分岐させる必要がある。
なお、条件式で左辺と右辺が等しい場合は「==」を使う。
他の場合は「<」「>」「<=」「>=」「!=」を使い分ける。

1行目「if(hisNumber==0){」は、もし「hisNumber」が「0」なら、
2行目「hisHand」に「グー」を代入する。
「hisHand」は新たに名付けた任意の変数名。
「グー」は「""」で囲い「"グー"」と書く。
文字には「""」を付け、数値や変数には付けない。
3行目「}」で閉じて「0」の場合が終了。
「1」の場合と「2」の場合も同じ要領で記述する。

if( myNumber - hisNumber == -2 ){
judge = "あなたの 負け";
}
if( myNumber - hisNumber == -1 ){
judge = "あなたの 勝ち";
}
if( myNumber - hisNumber == 0 ){
judge = "両者の 引き分け";
}
if( myNumber - hisNumber == 1 ){
judge = "あなたの 負け";
}
if( myNumber - hisNumber == 2 ){
judge = "あなたの 勝ち";
}

ここでは数値化された両者の手を比較して勝敗を文字化する。
全ての可能性を考えると3×3で9通りになるが、
「myNumber-hisNumber」の計算結果で判定すれば5通りにできる。
「myNumber-hisNumber+3」を3で割った時の余りで判定すれば3通り。
ただし、かえって複雑になるので、ここでは5通りを採用する。

1行目「myNumber-hisNumber」が「-2」の場合なら、
2行目「judge」に「あなたの負け」を代入して、3行目で閉じている。
「judge」は新たに名付けた任意の変数名。
残りの4通りも同じ要領で記述していく。

document.getElementById("message1").innerHTML = "相手の選択は "+hisHand;
document.getElementById("message2").innerHTML = "勝敗の結果は "+judge;

「document.getElementById("message1")」でid名「message1」を呼び出す。
「.innerHTML」はその「message1」の表示内容で、動的に書き換えることが可能。
その結果「相手の選択はグー」というような文字が表示される。
「相手の選択は」は文字なので「""」で囲う。
「hisHand」は変数なので「""」を付けない。
間違えて「"hisHand"」とすると「hisHand」という文字が表示される。
なお、文字と変数をつなぐ場合は「+」でつなぐ。
例えば「hisNumber+"なので"+hisHand+"でした"」というような書き方も可能。
表示させる文字は適当に変更してみて下さい。
2行目も同じ要領で「message2」の文字を書き換える処理を記述する。

<JavaScriptゲーム作成の奨め>

どうですか。作り方は理解できましたね。
id名や関数名や変数名を変更してみましたか。
表示する位置や表示する文字を変更してみましたか。
どう変わるのかを知ることによって理解が深まります。
でも、このゲームは地味過ぎると思うあなた。
どんどんバージョンアップしていって下さい。
例えば5回勝負で勝敗を決めるとか。
例えばコインを賭けて勝負するとか。
例えば相手の強さを選択できるとか。
例えばイラスト画像を使用するとか。
グーイラスト チョキイラスト パーイラスト
確かにイラスト有りの方が楽しそうですね。
この画像は他サイトからダウンロードさせてもらいました。
画像を扱う方法は「JSプログラミングサンプル」を参考にして下さい。
サンプルのように、画像を出す、消す、変える、動かす、
このような処理はJavaScriptを使えば簡単に実現できます。
よろしければ、私が作った「JavaScriptゲーム」もご覧下さい。
ブラウザでソース表示を選べばプログラムが表示されます。
疑問が生じた場合でも大半はネット検索で解消できる時代です。
これを機会にJavaScriptゲーム作成に挑戦してみてはいかがですか。
あなたも既にゲームプログラマーの一員ですよ。
皆様のご質問やご意見をお待ちしています。
下記バナー画像からメールが送信できます。
雑文の小部屋メールアドレス
JavaScriptゲームゲーム作り方JSサンプル
JSツール便利ツールリンク集
Copyright (C) 2012-2018 雑文の小部屋 All Rights Reserved