JavaScriptとはブラウザを「動かす」ためのプログラム言語のことで、主にブラウザ内で実行します。たとえば、ボタンをクリックしたり、フォームに情報を入力したりする際に、ページが自動的に更新されたり、フィードバックが提供されたりすることが出来ます。 特徴としてはイベント駆動型であることです。ユーザーのアクション（例えばクリックやキーボード入力）に対して、プログラムが反応し、指定された処理を実行します。また、非同期処理の機能もあり、データをサーバーから取得する際などにページの読み込みを妨げることなく処理を行うことができます。 JavaScriptはHTMLやCSSなどと他のプログラミング言語と組み合わせて使うことで、ブラウザ上でアニメーションなどを稼働させることが出来ますが、近年では、Node.js（ノードジェイエス）という、ブラウザ側だけでなくサーバー側でも動くJavaScriptも普及してきています。
JavaScriptで作れるのはWEBゲームが主流です。有名なものを挙げるとslither.io
、SOKOMATHなどが挙げられます。
見てもらえばわかる通りキャンバス（背景が灰色の所）の真ん中には円と数字が描写されています。 キャンバスの下にあるクリックと書かれたボタンを押すと、真ん中にある現在所持するポイント数が増えて円も大きくなります。 その右にあるレベルアップというボタンを押すとポイントを10減らして一回のクリックで増えるポイントを増やします。 また、左上の数字は合計の数を表示しています。
まずはHTML、css、JavaScriptのファイルを作成しましょう。それぞれの拡張子は.html、.css、. jsです。
ここでは
<canvas>はHTMLの要素でスクリプトを使ってグラフを描いたり、写真を合成したり、簡単なアニメーションなどを作成することが出来ます。今回はこのキャンバスを使用してJavaScriptでゲームを描写したいと思います。
次のコードを
main.html
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<canvas id="canvas" width="480" height="320"></canvas>
<script src="main.js"></script>
</body>
</html>
main.css
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
main.js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(x, y, 100, 0, Math.PI * 2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
main.htmlではmain.cssとスクリプトとしてmain.jsを使用すると宣言し、canvasタグでキャンバスを描写しています。
main.cssではキャンバスの背景色を宣言しています。
main.jsでは最初にcanvas要素への参照をcanvasに保存しています。それから描画を担当するオブジェクト（描画コンテキスト）のctx定数を作成しています。
描写のための命令はctx定数に繋いで記述します。
その後キャンバス上に緑の円を描写するためのコードを記述しています。
canvasはパスと呼ばれるもので線や曲線、図形の外形を定義しています。
そのためbeginPath()でパスの定義を開始し、定義を書き、closePath()でパスの定義を終了しパスを閉じるのが一連の流れになります。
このコードではarc()で円を定義した後にfillStyleで円をどの色で塗りつぶすのか定義して、fill()で塗りつぶしています。円のほかに長方形や線などがあるため気になる人は調べてみてください。
ゲームに使う関数を用意したいと思います。JavaScriptにはvar、const、letと三種類のローカル関数があります。それぞれの特徴は
const…再宣言、再代入ともに不可能。ブロックごとに作られるスコープごとに仕様できるブロックスコープ
let…再宣言は不可能だが再代入可能。constと同じくブロックスコープ
ver…再宣言、再代入可能。全てのスコープからアクセスできるグローバルスコープ
となっています。簡単にまとめるとconstは再代入不可能なローカル定数。letは再代入可能なローカル変数。そしてvarは再宣言、再代入どちらも可能なグローバル変数です。
現在では再宣言することが出来るという性質などよりverの使用は推奨されておらず、constとletの使用が推奨されています。
main.jsのコードを次のコードに書き換えてください。
main.jsのコード
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const x=canvas.width/2;
const y=canvas.height/2;
const radius=10;
let number=0;
let allnumber=0;
let Lv=1;
getElementById()は指定したidにマッチするドキュメント要素を取得するメゾットなのでbutton1とbutton2はそれぞれのidに一致するドキュメント要素を格納しています。
xとyはキャンバスの真ん中を指定するためにそれぞれキャンバスの幅と高さを取得してから割った数を格納しています。radiusは描写する円の最初の直径です。
これらの数はゲーム中に変更されると困るのでconstで宣言します。
numberは現在のポイント数、allnumberは消費した分も含めてのポイント数、Lvは現在のレベルを格納します。
これらの数はゲーム中に変更されないと困るのでletで宣言します。
クリックするボタンをHTMLで作成します。次のコードをmain.htmlのbodyタグ内に記述してください。
bodyタグ内のコード
<body> <canvas id="canvas" width="480" height="320"></canvas> <button id="button1">クリック</button> <button id="button2">レベルアップ</button> </body>
HTMLではbottonタグやinputタグでボタンを作成することが出来ます。ボタンタグ内に書かれている文字列がウェブ上で描写されるボタン内に表示されます。 今回はクリックするたびにポイントを増やすボタンとポイントを消費してレベルをあげるボタンの二つのボタンが必要なのでbuttonタグが二回記述されています。 buttonタグ内にあるidはJavaScriptでどのボタンが押されたのか検出するため記述しています。(ボタンの位置はそれぞれで調節してください)
ボタンクリックしたら円が大きくなる関数を作成していきます。次のコードをmain.jsの先ほど定義した関数の下に記述してください。
main.jsのコード
button1.addEventListener('click', buttonClick1);
button2.addEventListener('click', buttonClick2);
function buttonClick1() {
number +=1;
allnumber +=1;
}
function buttonClick2() {
}
ctx.fillStyle = "white";
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, radius+(0.1*number), 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
}
setInterval(draw, 10);
.addEventListener()はマウスによるクリックやキーボードからの入力といった様々なイベント処理を実行するメソッドです。button1.addEventListener('click', buttonClick1);はidがbutton1のボタンが押されたときにbuttpnClick1という関数を動かすと命令していることになります。
buttonClick1()はnumberとallnumberの値を1ずつ増やします。buttonClick2()の中身は後で記述します。
drawBall()では(x,y)を中心に直径が(radius+現在のポイント*0.1)の円を描写するように命令しています。draw()はキャンバスの描写を纏める関数です。最初に.clearRect()でキャンバスの描写をリセットしてdrawBall()で円を描写しています。
その後setInterval()でdrawを10ミリ秒ごとに繰り返しています。これでちゃんと円が拡大していくように見えます。
クリックした回数を表示する関数を作成します。次の関数をmain.jsに記述してdraw関数内に書き加えてください。
main.jsの関数
function drawnumber() {
ctx.fontSize = "240px";
ctx.textAlign = "center";
ctx.strokeText(number, x, y);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawnumber();
}
drawnumber()の中身は.fontSizeでフォントのサイズを変更し、textAlignで位置を調節しています。center以外にもstartやleftなど指定することが出来ます。
strokeText()では(x,y)にnumberを内側を塗りつぶさずに表示するように命令しています。
クリックするたびに1だけ増えるのはしんどいのでレベルアップすることでクリック時に増えるポイント数を増やせるようにします。buttonClick1()とbuttonClick2()を次のように書き換えてください。
main.jsの関数
function buttonClick1() {
number +=Lv;
allnumber +=Lv;
}
function buttonClick2() {
if(number>=10){
Lv+=1;
number -=10;
}
}
buttonClick1()で増えるポイントの数をLvの数にしました。こうすることでLvが上がるたびにポイントが増えます。
buttonClick2()では無条件にLvをあげることが出来ないようにif文を使って現在のポイントが10以上の時にポイントを10消費してレベルを1上げるよう指示しています。
これによって現在のポイントが10以上の時レベルアップのボタンを押すとレベルアップすることが出来るようになりました。
このままでは合計ポイントと現在のレベルを確認することが出来ないため、次の関数をmain.jsに記述してdraw関数内に書き加えてください。
main.jsの関数
function drawallnumber() {
ctx.textAlign = "start";
ctx.font = "bold 20px serif";;
ctx.strokeText(allnumber, 0, 20);
ctx.strokeText("Lv:"+Lv, 0, 40);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawnumber();
drawallnumber();
}
drawallnumber()の中身は.fontSizeでフォントのサイズや表示を変更し、textAlignで位置を調節しています。startはテキストをその行の標準的な先頭位置に配置することが出来ます。
strokeText()では(0,20)にallnumberを,(0,40)に"Lv:"とLvを合体した文字列を内側を塗りつぶさずに表示するように命令しています。
htmlのコード
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<canvas id="canvas" width="480" height="320"></canvas>
<button id="button1">クリック</button>
<button id="button2">レベルアップ</button>
<script src="main.js"></script>
</body>
</html>
cssのコード
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
JavaScriptのコード
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const x=canvas.width/2;
const y=canvas.height/2;
const radius=10;
let number=0;
let allnumber=0;
let Lv=1;
button1.addEventListener('click', buttonClick1);
button2.addEventListener('click', buttonClick2);
function buttonClick1() {
number +=Lv;
allnumber +=Lv;
}
function buttonClick2() {
if(number>=10){
Lv+=1;
number -=10;
}
}
ctx.fillStyle = "white";
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, radius+(0.1*number), 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
function drawnumber() {
ctx.fontSize = "240px";
ctx.textAlign = "center";
ctx.strokeText(number, x, y);
}
function drawallnumber() {
ctx.textAlign = "start";
ctx.font = "bold 20px serif";;
ctx.strokeText(allnumber, 0, 20);
ctx.strokeText("Lv:"+Lv, 0, 40);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawnumber();
drawallnumber();
}
setInterval(draw, 10);
これにてJavaScriptで作る簡単にしたクリッカーゲームはこれにて完成です!ここから図形の形を変えてみたりレベルアップの条件を変えてみたりなど アレンジなどをして自分だけのクリッカーゲームを作ってみてください。お疲れさまでした！
本コンテンツの作成時間（HTML/CSS/JavaScriptの設計・実装を含む）：約30時間