今回は前回のプログラムを改変して、変化をつけてみます。
プログラムはこちら。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Sample</title>
<script type="text/javascript">
var ctx;
function load() {
var elmTarget = document.getElementById('target');
ctx = elmTarget.getContext('2d');
ctx.fillStyle = 'rgb(255, 0, 0)';
}
function paint() {
ctx.fillRect(10, 10, 20, 20);
}
function clean() {
ctx.clearRect(0, 0, 200, 400);
}
</script>
</head>
<body onload="load()">
<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
<input type="button" value="paint" onclick="paint()" />
<input type="button" value="clear" onclick="clean()" />
</body>
</html>functionに大幅な変更点がありますねー、あとはボタンの追加くらいでしょうか。
では、一つずつ見ていきましょう。
まず、今回は今までと違って最初にctx変数を生成しています。
これはボタンが押された後にどちらでも変化しやすいようにする為です。
そして、前回のプログラムがそれぞれfunctionごとに分かれている中にclearRectという新しいメソッドがあります。
cleanRectは背景色で指定の範囲を上から塗りつぶすという命令です、これを使って表示されている四角形を消そうということです。
次にbodyタグ内です。
今回は久々にbodyタグの中にonloadが復活しました。
このonloadでは画像の色を先に決めたりして表示の準備をしています。
そして肝となる２つのボタンのお出ましです。
これらはそれぞれfunction paintとfunction cleanを呼び出していて、動作は赤色四角形の表示と削除です。
あまり語ることのないプログラムなので動作などはスルーで。
次は、テトリスに使う際のブロックを配列で作ります。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Sample</title>
<script type="text/javascript">
var ctx;
var block = [
[1,1],
[0,1],
[0,1]
];
function load() {
var elmTarget = document.getElementById('target');
ctx = elmTarget.getContext('2d');
ctx.fillStyle = 'rgb(255, 0, 0)';
}
function paint() {
for (var y = 0; y < block.length; y ++) {
for (var x = 0; x < block[y].length; x ++) {
if (block[y][x]) {
ctx.fillRect(x * 20, y * 20, 20, 20);
}
}
}
}
function clean() {
ctx.clearRect(0, 0, 200, 400);
}
</script>
</head>
<body onload="load()">
<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
<input type="button" value="paint" onclick="paint()" />
<input type="button" value="clear" onclick="clean()" />
</body>
</html>var blockとpaint部分が肝ですねー。
まずblockですが、これは2次元配列としてブロックの形を決めるのに使っています。
そして、functionのpaintですがこちらは２重for文で2次元配列を回しながら画像を表示させています。
こちらも語ることが少ないです。
次々いってみましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Sample</title>
<script type="text/javascript">
var ctx;
var block = [
[1,1],
[0,1],
[0,1]
];
var posx = 0, posy = 0;
function load() {
var elmTarget = document.getElementById('target');
ctx = elmTarget.getContext('2d');
ctx.fillStyle = 'rgb(255, 0, 0)';
}
function paint() {
ctx.clearRect(0, 0, 200, 400);
for (var y = 0; y < block.length; y ++) {
for (var x = 0; x < block[y].length; x ++) {
if (block[y][x]) {
ctx.fillRect((x + posx) * 20, (y + posy) * 20, 20, 20);
}
}
}
posy = posy + 1;
}
</script>
</head>
<body onload="load()">
<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
<input type="button" value="paint" onclick="paint()" />
</body>
</html>ついにお待ちかねのブロック操作です。
段々複雑になってきましたがじっくり解剖すれば簡単ですので丁寧に見ていきましょう。
varの部分では新たにposxとposyが追加され、paintの中でそれらを操作するようになってます。
paintの中を見ると、2重for文の中にif文が追加されていますね。
これはblockの中身がもし０ならfalseで、１ならtrueとし四角形を描画するか判断しているのです。
そして、謎のposxとposyは今回ではposyの方しか使われていません。
どのように使われているかというとposy = posy + 1;として実行する度に下へ下がるようになっています。（座標の値としてはプラスになっていますが）
なのでギミックとしてボタンを押すたびに下へ図形が下がるようになるのです。
今回はここまで。
次回は自動で図形が動くようにします。
