JavaScriptで画像を動かす方法

TOP　ホームページ作成小技集　CSS

JavaScriptとは、プログラミング言語のことで、ホームページ上でキャラクラを動かしたり、フォームに入力された文字や数字を計算したり編集したりする場合等に利用します。

ここでは、簡単なサンプルプログラムをひとつ例に挙げて、言語の解説をしていくこととします。まずは、サンプルプログラム完成後の動作を確認してみてください。→　ウサギとカメ

それでは、実際にサンプルプログラム作ってみましょう。プログラミング言語は、ＨＴＭＬファイルをメモ帳で開いて編集できますが、ホームページ作成用のソフト（ビルダーやMX）をご利用であれば、ソースコード（プログラミング言語のこと）を編集するメニューがついてますのでそちらをご利用ください。

完成後のソースを以下に示します。意味不明なアルファベットが長々と書かれていてとても読む気が起きないと思います。逆にこれを無理して読もうとすると挫折してしまいますので、ここでは外観をざっと眺める程度に留めて置いてください。細かい説明は順を追って説明していきます。長いプログラムですが、灰色の文字の部分は、ＨＰ作成用のソフトでボタンやキャラクタを適当な位置に配置することによって自動的に作成してくれます。赤と青で強調した部分がユーザーが新たに入力していかなければならない部分です。それからプログラムは青→赤の順で実行されるので、この順番で説明していきます。
※なお、変数や配列といったプログラミングの基本点な用語も大雑把に説明していきますが、これだけでは良く分からなかった、という場合はプログラミングの基礎をご参照下さい。各ページの一番下にもリンクを貼っておきます。

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>無題ドキュメント</title>
</head>

<body bgcolor="#DBFA94" onLoad="haikei()">

<script language="JavaScript"><!--
uy=0;
ky=0;
function haikei()
{
     document.haikei.height=document.body.clientHeight;
}
function move()
{
     bottom=document.body.clientHeight-50;

     if(uy>bottom){
         if(document.RNAME.R1[0].checked==true)alert("的中！");
         else alert("残念！");
         uy=0;
         ky=0;
         return;
     }
     if(ky>bottom){
         if(document.RNAME.R1[1].checked==true)alert("的中！");
         else alert("残念！");
         uy=0;
         ky=0;
         return;
     }

     uy=uy+Math.random()*5;
     ky=ky+Math.random()*5;
     document.usa.style.top=uy;
     document.kame.style.top=ky;

     setTimeout("move()",50);

}
//--></script>

<img src="haikei.gif" width="200" height="208" name="haikei"
style="position:absolute;left:270px;top:0px;">
<img src="usagi1a.gif" width="50" height="50" name="usa"
style="position:absolute;left:290px;top:0px;">
<img src="kame1a.gif" width="50" height="50" name="kame"
style="position:absolute;left:390px;top:0px;">

<p>ウサギとカメ、勝つのはどっち？</p>

<form name="RNAME">
<p><input type="radio" checked name="R1" value="0">ウサギ</p>
<p><input type="radio" name="R1" value="1">カメ</p>
</form>

<p><input type="submit" value="スタート" onclick="move()"></p>

</body>
</html>

 

       次ページへ