JavaScript+html+Canvas でゲーム作成（ドットアニメーション）
「JavaScript+html+Canvas でゲーム作成」基本部分を使って、ドットアニメーションを作ってみました。
昔のドットタイプのゲームの参考例としてスペースインベーダーの敵キャラクタを使用。
スペースインベーダーの敵キャラクタは検索すると出てくるのでそこからドット絵に変換。
アニメーション時間を設定して、アニメーションを実現。
以下、プログラム。
<html>
<head>
<style type="text/css">
<!-- canvas { background: #000 ; } -->
</style>
</head>
<body>
<canvas id="myCanvas" width="512" height="512"></canvas>
<script language="JavaScript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//-----<#### JavaScript+html+Canvas でゲーム作成 ベース上 ####>
//ドットアニメーションサンプル
// パラメータ
var RADIUS = 2; // 点の半径
var DDOT = 2; // 隣り合う点の間隔 x2（0以外の偶数）
// 変数
var XSIZE = canvas.width / DDOT; // Ｘサイズ（描画サイズは、XSIZE * DDOT）
var YSIZE = canvas.height / DDOT; // Ｙサイズ（描画サイズは、YSIZE * DDOT）
// インベーダーキャラクタ
// 0 1 2 3 4 5 6 7 8 9 a b c d
//0:□□□□□■■■■□□□□□
//1:□□■■■■■■■■■■□□
//2:□■■■■■■■■■■■■□
//3:□■■■□□■■□□■■■□
//4:□■■■■■■■■■■■■□
//5:□□□■■■□□■■■□□□
//6:□□■■□□■■□□■■□□
//7:□□□■■□□□□■■□□□
var dottbl_0 = new Array(0x7e);
// ■の座標：xpos, ypos,,,,
dottbl_0 = [
0x05,0x00,0x06,0x00,0x07,0x00,0x08,0x00,
0x02,0x01,0x03,0x01,0x04,0x01,0x05,0x01,0x06,0x01,0x07,0x01,0x08,0x01,0x09,0x01,0x0a,0x01,0x0b,0x01,
0x01,0x02,0x02,0x02,0x03,0x02,0x04,0x02,0x05,0x02,0x06,0x02,0x07,0x02,0x08,0x02,0x09,0x02,0x0a,0x02,0x0b,0x02,0x0c,0x02,
0x01,0x03,0x02,0x03,0x03,0x03,0x06,0x03,0x07,0x03,0x0a,0x03,0x0b,0x03,0x0c,0x03,
0x01,0x04,0x02,0x04,0x03,0x04,0x04,0x04,0x05,0x04,0x06,0x04,0x07,0x04,0x08,0x04,0x09,0x04,0x0a,0x04,0x0b,0x04,0x0c,0x04,
0x03,0x05,0x04,0x05,0x05,0x05,0x08,0x05,0x09,0x05,0x0a,0x05,
0x02,0x06,0x03,0x06,0x06,0x06,0x07,0x06,0x0a,0x06,0x0b,0x06,
0x03,0x07,0x04,0x07,0x09,0x07,0x0a,0x07,
0xff,0xff]; // 終端
// 0 1 2 3 4 5 6 7 8 9 a b c d
//0:□□□□□■■■■□□□□□
//1:□□■■■■■■■■■■□□
//2:□■■■■■■■■■■■■□
//3:□■■■□□■■□□■■■□
//4:□■■■■■■■■■■■■□
//5:□□□□■■□□■■□□□□
//6:□□□■■□■■□■■□□□
//7:□■■□□□□□□□□■■□
var dottbl_1 = new Array(0x7c);
// ■の座標：xpos, ypos,,,,
dottbl_1 = [
0x05,0x00,0x06,0x00,0x07,0x00,0x08,0x00,
0x02,0x01,0x03,0x01,0x04,0x01,0x05,0x01,0x06,0x01,0x07,0x01,0x08,0x01,0x09,0x01,0x0a,0x01,0x0b,0x01,0x01,0x02,
0x02,0x02,0x03,0x02,0x04,0x02,0x05,0x02,0x06,0x02,0x07,0x02,0x08,0x02,0x09,0x02,0x0a,0x02,0x0b,0x02,0x0c,0x02,
0x01,0x03,0x02,0x03,0x03,0x03,0x06,0x03,0x07,0x03,0x0a,0x03,0x0b,0x03,0x0c,0x03,
0x01,0x04,0x02,0x04,0x03,0x04,0x04,0x04,0x05,0x04,0x06,0x04,0x07,0x04,0x08,0x04,0x09,0x04,0x0a,0x04,0x0b,0x04,0x0c,0x04,
0x04,0x05,0x05,0x05,0x08,0x05,0x09,0x05,
0x03,0x06,0x04,0x06,0x06,0x06,0x07,0x06,0x09,0x06,0x0a,0x06,
0x01,0x07,0x02,0x07,0x0b,0x07,0x0c,0x07,
0xff,0xff]; // 終端
var pos = new Array( XSIZE * YSIZE ); // 画面座標
const COLOR_BLACK = 0; // 黒
const COLOR_WHITE = 1; // 白
// 点描画
// xp : x座標
// yp : y座標
// colnum : 色番号(0:black, 1:white)
function draw_point( xp, yp, colnum ) {
var offset = yp * XSIZE + xp;
ctx.beginPath();
if( colnum == 0 ) {
ctx.fillStyle = "rgb(" + (~~0x00) + ", " + (~~0x00) + ", " + (~~0x00) + ")";
} else {
ctx.fillStyle = "rgb(" + (~~0xFF) + ", " + (~~0xFF) + ", " + (~~0xFF) + ")";
}
ctx.fillRect( pos[offset][0], pos[offset][1], RADIUS, RADIUS);
ctx.closePath();
}
// 指定された位置のパターンを描画
// dx : x座標
// dy : y座標
// dn : パターン番号
// dc : 色番号(0:black, 1:white)
function dot_pattern_put( dx, dy, dn, dc )
{
var i = 0;
if( dn == 0 ){
while (dottbl_0[i*2] != 0xff){
draw_point( dx + dottbl_0[i*2+0], dy + dottbl_0[i*2+1], dc);
i++;
}
} else {
while (dottbl_1[i*2] != 0xff){
draw_point( dx + dottbl_1[i*2+0], dy + dottbl_1[i*2+1], dc);
i++;
}
}
}
// 初期化
// 画面座標セット
for( var y = 0; y < YSIZE; y++ ){
for (var x = 0; x < XSIZE; x++) {
pos[y * XSIZE + x] = new Array(2); // x,y
pos[y * XSIZE + x][0] = x * ( DDOT & 0xfe ); // xpos
pos[y * XSIZE + x][1] = y * ( DDOT & 0xfe ); // ypos
}
}
const anim_time_max = 40; // アニメーションスピード 40/60 sec
var anim_time = anim_time_max; // アニメーション時間カウンタ
var anim_pattern = 0; // アニメーションパターン
var xpos = 0x20; // x座標
var ypos = 0x20; // y座標
function draw() {
// アニメーションタイミング
if( anim_time < anim_time_max ){
anim_time++;
}else{
anim_time = 0;
// 前回のアニメーションパターンを削除
dot_pattern_put( xpos, ypos,( anim_pattern + 1 ) & 1, COLOR_BLACK );
// 今回のアニメーションパターンを描画
dot_pattern_put( xpos, ypos,anim_pattern, COLOR_WHITE);
// 次のパターン番号セット
anim_pattern = ( anim_pattern + 1 ) & 1;
}
}
//-----<#### JavaScript+html+Canvas でゲーム作成 ベース下 ####>
/* draw()関数がsetIntervalの中で16ミリ秒おきに実行 */
setInterval(draw, 16);
</script>
</body>
</html>アニメーションパターンは以下
コード上の
// パラメータ
var RADIUS = 2; // 点の半径
var DDOT = 2; // 隣り合う点の間隔 x2（0以外の偶数）を以下のように変更すると
// パラメータ
var RADIUS = 3; // 点の半径
var DDOT = 4; // 隣り合う点の間隔 x2（0以外の偶数）大きく表示できます
この記事が気に入ったらサポートをしてみませんか？