こんにちは。武田です。
今日も寒い夏ですね。
JavaScriptのライブラリでp5.jsというものがあります。Processingという以前からあったグラフィックを簡単に描く環境をJavaScriptに移植した環境です。
とても簡単にcanvasを使ったプログラムが記述できるので少し使ってみました。
HTMLファイルはシンプルです。
p5.jsを読み込ませているだけです。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> <meta charset="utf-8"> <title>p5.jsで落書き</title> <script src="p5.min.js"></script> <script src="game.js"></script> </head> <body> </body> </html>
上記で読み込ませているgame.jsがプログラム本体です。
こちらもかなりシンプルに記述できます。
game.js
/* game.js */
// 起動時に1回だけ実行する処理
function setup() {
createCanvas(500, 500);
background("#1e90ff");
}
// フレームごとの処理
function draw() {
}
// マウスを動かした時の処理
function touchMoved(){
line(mouseX, mouseY, pmouseX, pmouseY);
}
// ダブルクリック時の処理
function doubleClicked() {
background("#1e90ff");
}
500×500ピクセルのcanvasを作成して、青い背景色で塗りつぶしています。
マウスを動かしたときに線を引いてそれっぽく見せているだけです。
ダブルクリックした時、背景色と同じ色で塗りつぶして描いた線を消すようにしています。
今回draw関数は何もコードが記述されていませんが、draw関数に記述したプログラムは、毎秒30~60回ほど実行される処理になるので、ゲームなど作れそうではありませんか。
そういう訳で、JavaScriptファイル名をgame.jsという名前にしたのは、何かゲームでも作れるのかなぁと考えたからです。
わたしはプログラムに関してライブラリをあまり使わずに最初から最後まで全部自分で作るのが好きですが、こうしたライブラリを使うとプログラミング言語特有のお決まり呪文のような記述をしなくてよくなるので、結果的にプログラムの見通しが良くなるメリットがあります。
どんどん使うべきだと思います。
次回は、p5.jsを使って何かゲームでも作ってみようかと思います。