HTML5のキャンバスを使って複数の画像を読み込んみ、キャラクターを動かしてアニメーションをさせます。
キャラクターは、オノッチさんが描いたキャラクターを使用させて頂きました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>オノッチ画伯キャラクターのお散歩</title>
<style>
#canvas {
display: block;
margin: 0px auto;
}
</style>
<script>
var canvas;
var interval = 0;
var images = [];
var nowImage = 1;
// タイマー
function OnTimer() {
// コンテキスト
var ctx = canvas.getContext( "2d" );
// キャンバスクリア
ctx.drawImage(
images[ 0 ]
, 0 // 描画開始位置X
, 0 // 描画開始位置Y
);
// 画像の取得
var charImg = images[ nowImage ];
// 描画位置算出
var posX = canvas.width - ( interval * 4 ) % ( canvas.width + charImg.width );
var posY = canvas.height - charImg.height - Math.cos( ( Math.PI * ( ( interval * 2 ) % 90 ) ) / 180 ) * 100;
// イメージの描画
ctx.drawImage(
charImg
, posX // 描画開始位置X
, posY // 描画開始位置Y
);
interval++;
}
// 初期化
function OnInit() {
// キャンバス取得
canvas = document.getElementById( "canvas" );
// マウスクリック処理
canvas.addEventListener( "mousedown", function ( e ) {
nowImage++;
if ( nowImage >= images.length ) {
nowImage = 1;
}
}
);
// タイマー
setInterval( "OnTimer()", ( 1000 / 100 ) );
}
// 画像ロード
function OnImageLoad( callback ) {
// 画像のロード
function LoadImage( index, files ) {
var img = new Image();
img.onload = function () {
console.log( "index = " + index );
images.push( this );
if ( files.length > index + 1 ) {
console.log( "index = " + index );
LoadImage( index + 1, files );
}
else {
OnInit();
}
}
img.src = files[ index ];
};
// ロードするイメージ
var files = [
"./img/onoty_bk_image.png"
, "./img/onoty_image2.png"
, "./img/onoty_image3.png"
, "./img/onoty_image1.png"
, "./img/onoty_image4.png"
];
// イメージのロード
LoadImage( 0, files );
}
function OnLoad() {
OnImageLoad( OnInit );
}
</script>
</head>
<body onload="OnLoad();">
<h1>オノッチ画伯キャラクターのお散歩</h1>
<canvas id="canvas" width="640" height="480"></canvas>
<p>
画面をクリックすると、キャラクターが変わるよ♥
</p>
</body>
</html>
