Click Chenge
- マウスのクリックでアニメーション画像を切り替えます。
【click_chenge.html】
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Click Chenge</title> <script type="text/javascript"> <!-- num = 0; //現在の画像 window.onmousedown = mousedown; function mousedown() { num = (num+1)%2; document.anime.src= "anime" + (num+1) + ".gif"; } // --> </script> </head> <body> <h1>Click でアニメーション画像を切り替える</h1> <img src="anime1.gif" name="anime"><br> </body> </html> - 単純な繰り返しのアニメーションなら animation gif の画像を使うと簡単です。
animation gif の描画は ３枚の画像を描画 を参照して下さい。
今回はマウスのクリックで animation gif の画像を切り替えます。
アニメーション画像を切り替える手法は [歩く/走る/ジャンプ] や [イベント] が発生した場合などに使います。
- window.onmousedown = mousedown; で、マウスがクリックされたとき mousedown 関数を呼び出します。
num は現在描画中の画像番号で、クリックする毎に 0 と 1 を切り替えます。
document.anime.src= "anime" + (num+1) + ".gif"; で、"anime" が設定された画像を切り替えます。
document.anime は img タグに設定された name="anime" の画像を指します。
Animation Start/Stop のようにインデックス(document.images[0]) で指定することも出来ます。
num = 0; //現在の画像 window.onmousedown = mousedown; function mousedown() { num = (num+1)%2; document.anime.src= "anime" + (num+1) + ".gif"; } - <body> では img タグで "anime1.gif" の画像を表示します。
name= に "anime" を設定して下さい。
mousedown() 関数から name に "anime" が設定された画像の src を切り替えます。
<img src="anime1.gif" name="anime"><br>
パラパラアニメーション
- 少女のパラパラアニメーションです。
"girl.css" をリンクして <img class="girl"> で表示するだけです。
【css_girl.html】
<head> <meta charset="UTF-16"> <title>Parapara Animation</title> <link rel="stylesheet" href="girl.css"> </head> <body> <img class="girl"> </body> </html>
- 少女のアニメーションに組み込む "girl.css" です。
【"girl.css" Source Code】.girl { width:128px; height:216px; margin:1em auto; overflow:hidden; background:url(girl.gif); animation:girl 1.0s steps(6,end) infinite; } @keyframes girl { 100% {background-position:-768px;} } - このページは Internet Explorer11 で実行を確認しました。
2017/09/12 Microsoft Edge でも実行を確認しました。
実行環境によっては、動かないかも知れません。 (^_^;)
- css_girl.html では link で "girl.css" をリンクします。
"girl.css" と "girl.gif" は css_girl.html と同じフォルダに格納して下さい。
- "girl.gif" は 128*216 の Sprite が横に７枚並んだ画像です。
width, height で Sprite のサイズを設定します。
1.0 秒がアニメーションを再生するスピードです。
steps(6,end) が Sprite の最後の番号(７枚目)です。
background-position:-768px; は７枚目の Sprite の左端座標です。
非常に簡単なソースですが、後は全て JavaScript が面倒を見てくれます。
- animation: の行を次のように修正して下さい。
再生されるスピードを 2.0 秒にして、一度だけ実行します。
animation:girl 2.0s steps(6,end);
Click Animation
- マウスのクリックで５枚の画像を順に切り替えます。
【click_anime.html】
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="javascript.css" type="text/css"> <title>Click Animation</title> <script type="text/javascript"> <!-- num = 0; //現在の画像 window.onmousedown = mousedown; function mousedown() { num = (num+1)%5; document.anime.src= "img/dog"+num+".gif"; } // --> </script> </head> <body> <h1>Javascript で Click Animation</h1> マウスのクリックで５枚の画像を順に切り替えます。<br> <img src="img/dog0.gif" name="anime"><br> <p>Mouse Click</p> </body> </html> - マウスのクリックで "img/dog0.gif" ～ "img/dog4.gif" の５枚の画像を順に切り替えます。
window.onmousedown = mousedown; で、マウスがクリックされたとき mousedown 関数を呼び出します。
num は現在描画中の画像番号で、クリックする毎に 0～4 を繰り返します。
document.anime.src= "img/dog"+num+".gif"; で、"anime" が設定された画像を dog+num+.gif に切り替えます。
document.anime は img タグに設定された name="anime" の画像を指します。
num = 0; //現在の画像 window.onmousedown = mousedown; function mousedown() { num = (num+1)%5; document.anime.src= "img/dog"+num+".gif"; } - <body> では img タグで "img/dog0.gif" の画像を表示します。
name= に "anime" を設定して下さい。
mousedown() 関数から name に "anime" が設定された画像の src を切り替えます。
<img src="img/dog0.gif" name="anime">
画像の移動
- Enemy の画像が往復します。
【img_move.html】
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8"> <link rel="stylesheet" href="javascript.css" type="text/css"> <title>Image Move</title> <script type="text/javascript"> <!-- x=0; v=2; function moveImage() { x+=v; if((x>224)||(x<0)) v= -v; document.Enemy.style.left= x; } // --> </script> </head> <body onLoad="setInterval('moveImage()',25)"> <h2>Image Move</h2> <img src="img/enemy1.gif" name="Enemy" style="position:absolute;left:0px;top:70px;"> </body> </html> - body の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
img タグの style で座標を設定して enemy1.gif を描画します。
style は 自由に配置 を参照して下さい。
<body onLoad="setInterval('moveImage()',25)"> <img src="img/enemy1.gif" name="Enemy" style="position:absolute;left:0px;top:70px;"> - moveImage() 関数の定義です。
document.Enemy は name="Enemy" が設定されたリソースを指します。
x は画像を描画するＸ座標で、Enemy.style.left= x; で座標を変えながら移動します。
v は移動速度で右端(左端)まで動くと折り返します。
x=0; v=2; function moveImage() { x+=v; if ((x>224)||(x<0)) v= -v; document.Enemy.style.left= x; }
キーで移動
- Animation GIF の画像をキー操作で動かします。
【img_key.html】
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="javascript.css" type="text/css"> <title>Image KeyMove</title> <script type="text/javascript"> <!-- document.onkeydown = KeyCode; x=300; y=200; function KeyCode() { if(document.all) kcode = event.keyCode; else if(document.getElementById) kcode = (event.keyCode)? event.keyCode: event.charCode; else if(document.layers) kcode = event.which; switch(kcode) { case 0x25: if (x>1) x-= 2; break; case 0x26: if (y>1) y-= 2; break; case 0x27: x+= 2; break; case 0x28: y+= 2; break; } } function moveImage() { document.Enemy.style.left= x; document.Enemy.style.top= y; } // --> </script> </head> <body onLoad="setInterval('moveImage()',25)"> <h1>矢印キーで画像を移動</h1> <img src="anime1.gif" name="Enemy" style="position:absolute;left:300px;top:200px;"> </body> </html> - body の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
- moveImage() では Enemy.style.left= x; Enemy.style.top= y; の座標に画像を移動します。
画像は img タグで name="Enemy" と style で座標を設定して anime1.gif を描画しています。
Animation GIF の画像を使うと、アニメーションしながら移動します。
<img src="anime1.gif" name="Enemy" style="position:absolute;left:300px;top:200px;">
- document.onkeydown = KeyCode; でキーが押されると KeyCode 関数が呼ばれます。
function KeyCode() では、上下左右のキーを判定して x=300; y=200; を更新します。
x=300; y=200; function KeyCode() { if(document.all) kcode = event.keyCode; else if(document.getElementById) kcode = (event.keyCode)? event.keyCode: event.charCode; else if(document.layers) kcode = event.which; switch(kcode) { case 0x25: if (x>1) x-= 2; break; case 0x26: if (y>1) y-= 2; break; case 0x27: x+= 2; break; case 0x28: y+= 2; break; } }
setTimeout Animation
- setTimeout で画像を切り替えてアニメーションします。
【anime1.html】
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="javascript.css" type="text/css"> <title>Animation</title> <script type="text/javascript"> <!-- imgnum = 5; //画像の枚数 images = new Array(); for(i=0; i<imgnum; i++) { images[i] = new Image(); images[i].src = "img/dog"+i+".gif"; } function change(imgno) { clearTimeout(timerID); if (imgno<images.length) { document.anime.src= images[imgno].src; timerID = setTimeout("change("+(imgno+1)+")",100); } else { timerID = setTimeout("change(0)",100); } } // --> </script> </head> <body onload="timerID=setTimeout('change(0)',100)"> <h2>Animation</h2> <img src="img/dog0.gif" name="anime"> </body> </html> - body の onload から setTimeout で change() 関数を呼び出します。
100 はアニメーションの速度です。
img タグで一枚目の画像(dog0.gif)を表示します。
name="anime" を設定して下さい。
<body onload="timerID=setTimeout('change(0)',100)"> <img src="img/dog0.gif" name="anime"> - head で images に画像をプレロードします。
"img/dog0.gif" ～ "img/dog4.gif" の画像を読み込みます。
"img/dog" + i + ".gif" の「+」は文字列の連結演算子です。
imgnum = 5; //画像の枚数 images = new Array(); for(i=0; i<imgnum; i++) { images[i] = new Image(); images[i].src = "img/dog"+i+".gif"; } - イメージを切り替える change() 関数です。
タイマー設定で呼び出されます。
document.anime.src は <img src="img/dog0.gif" name="anime"> で name に "anime" が設定されたリソースです。
このリソース(画像)を images[imgno].src に切り替えます。
imgno は change() 関数が呼ばれる毎にアップし、images.length になるとゼロに戻ります。
change() 関数の中から再び setTimeout() で change() 関数を呼び出しています。
これにより画像を切り替えながらアニメーションが描画されます。
"dog0.gif" ～ "dog4.gif" は透過 GIF では無いので、画像の周辺が白くなっています。
function change(imgno) { clearTimeout(timerID); if (imgno<images.length) { document.anime.src= images[imgno].src; timerID = setTimeout("change("+(imgno+1)+")",100); } else { timerID = setTimeout("change(0)",100); } } - プレロードしないで、もっと簡単にアニメーションします。
定期的に切り替えるときは setTimeout() よりも setInterval() の方が便利です。
setInterval('change()',100) で 100 ミリ秒ごとに change() 関数を呼び出します。
従って change() 関数の中から再び change() 関数を呼び出す必要はありません。
change() 関数では imgnum を次の画像番号に設定して document.anime.src に画像の名前を設定します。
【Source Code】imgcnt = 5; //画像の枚数 imgnum = 0; //表示する画像番号 function change() { imgnum = (imgnum+1)%imgcnt; document.anime.src="img/dog"+imgnum+".gif"; } <body onload="timerID=setInterval('change()',100)"> <img src="img/dog0.gif" name="anime">
Animation Start/Stop
- Start/Stop ボタンで、アニメーションを開始/停止します。
【anime2.html】
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8"> <title>Animation-2</title> <script type="text/javascript"> id = 0; //Interval のID ic = 0; //ic= 表示する画像番号 //Start ボタンがクリックされたとき //123 は画像を変える時間 function starts() { clearInterval(id); id=window.setInterval("upDate()",123); Disp(); } //Stop ボタンがクリックされたとき function stop() { clearInterval(id); Disp(); } //starts() から setInterval() で呼び出される //ic= 表示する画像番号 function upDate() { ic = ic+1; if (ic > 4) ic=0; Disp(); } //ic 番目の画像を描画 function Disp() { document.images[0].src="img/dog"+ic+".gif"; } </script> </head> <body bgcolor="white"> <center> <br> <table border="0"> <tr><td><img src="img/dog0.gif"></td></tr> </table> <br> <form name="Ctrl"> <input type="button" value="START" onClick="starts()"> <input type="button" value="STOP" onClick="stop()"> </form> </center> </body> </html> - 画像を切り替えてアニメーションする元の画像です。
<body bgcolor="white"> <center> <br> <table border="0"> <tr><td><img src="img/dog0.gif"></td></tr> </table> - "START" ボタンでアニメーションを開始、"STOP" ボタンで停止します。
<form name="Ctrl"> <input type="button" value="START" onClick="starts()"> <input type="button" value="STOP" onClick="stop()"> </form> </center> - JavaScript の関数です。
starts() 関数は Start ボタンがクリックされたときに呼ばれます。
window.setInterval("upDate()",123); で一定間隔で upDate() 関数を呼び出します。
123 は画像を切り替える間隔(ミリ秒)です。
<script type="text/javascript"> id = 0; //Interval のID ic = 0; //ic= 表示する画像番号 function starts() { clearInterval(id); id=window.setInterval("upDate()",123); Disp(); } - stop() 関数は Stop ボタンがクリックされたときに呼ばれます。
function stop() { clearInterval(id); Disp(); } - upDate() 関数はアニメーション画像を切り替える関数です。
Disp() 関数で ic で指示した画像に切り替えます。
function upDate() { ic = ic+1; if (ic > 4) ic=0; Disp(); } - Disp() 関数は ic 番目の画像に切り替える関数です。
document.images[0].src で画像を番号で識別します。
使っている画像は１枚だけなので images[0].src になります。
(二枚目の画像は images[1].src になります)
function Disp() { document.images[0].src="img/dog" + ic + ".gif"; } - 画像を番号で識別するよりも、次のように name を付けて参照する方が解り易いかも知れません。
<tr><td><img src="img/dog0.gif" name="anime"></td></tr> ・・・ document.name.src="img/dog" + ic + ".gif";
Walk Animation
- 矢印キーでキャクターが歩きます。
【walk.html】
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="javascript.css" type="text/css"> <title>Walk</title> <script type="text/javascript"> <!-- document.onkeydown = KeyCode; x=300; //X座標 y=200; //Y座標 dir=0; //進行方向 chg=0; //画像の切り替え function KeyCode() { if(document.all) kcode = event.keyCode; else if(document.getElementById) kcode = (event.keyCode)? event.keyCode: event.charCode; else if(document.layers) kcode = event.which; switch(kcode) { case 0x25: //← if (x>1) x-= 2; dir= 6; break; case 0x26: //↑ if (y>1) y-= 2; dir= 0; break; case 0x27: //→ x+= 2; dir= 2; break; case 0x28: //↓ y+= 2; dir= 4; break; } } function walk() { chg= (chg+1)%16; var n= dir+Math.floor(chg/8); document.char.src= images[n].src; document.char.style.left= x; document.char.style.top= y; } function preload() { imgnum = 8; //画像の枚数 images = new Array(); for(i=0; i<imgnum; i++) { images[i] = new Image(); images[i].src = "chr47_"+i+".gif"; } setInterval('walk()',50); } // --> </script> </head> <body onLoad="preload()"> <h1>矢印キーでキャクターが歩く</h1> <img src="chr47_0.gif" name="char" style="position:absolute;left:300px;top:200px;"> </body> </html> - このプログラムで使用する画像は chr47_0.gif ～ chr47_7.gif の８枚です。
元の画像は上に掲載している chr47.gif で、画像を切り分けるソフトを使って８枚の画像に切り分けます。
私のダウンロードサイトから提供している Map Editor にも画像を切り分ける機能を追加しました。
- ８枚の画像を preload() 関数で事前にロードしています。
function preload() { imgnum = 8; //画像の枚数 images = new Array(); for(i=0; i<imgnum; i++) { images[i] = new Image(); images[i].src = "chr47_"+i+".gif"; } setInterval('walk()',50); } - KeyCode() 関数で矢印キーを検出して、上下左右にアニメーションしながらキャラクターを動かします。
document.onkeydown = KeyCode; x=300; //X座標 y=200; //Y座標 dir=0; //進行方向 chg=0; //画像の切り替え function KeyCode() { if(document.all) kcode = event.keyCode; else if(document.getElementById) kcode = (event.keyCode)? event.keyCode: event.charCode; else if(document.layers) kcode = event.which; switch(kcode) { case 0x25: //← if (x>1) x-= 2; dir= 6; break; case 0x26: //↑ if (y>1) y-= 2; dir= 0; break; case 0x27: //→ x+= 2; dir= 2; break; case 0x28: //↓ y+= 2; dir= 4; break; } } - walk() 関数でキャラクター座標の更新と画像の切り替えを行います。
chg は２枚の画像の切り替えですが、50 ミリ秒ごとに walk() 関数が呼び出されるので、切り替速度を落としています。
function walk() { chg= (chg+1)%16; var n= dir+Math.floor(chg/8); document.char.src= images[n].src; document.char.style.left= x; document.char.style.top= y; }
前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)