キャンパス見学会 模擬講義（２）

Webプログラミング入門

‐動的なWebページの仕組み‐

高度情報化社会に主体的に参加することができるように、コンピュータやネットワークの基本的な仕組みを知りたい。 その最も効果的な方法は、プログラミングを勉強することである。
Webページにおいて、HTMLとJavaScriptがどのような役割を果たしているのかを理解するために、熊たたきゲームを作成してみよう。

  1. HTMLとは

  2. JavaScriptで、熊をたたくと、Ouch!と言うようにする

    JavaScriptはwebページを動的にする簡単な方法を提供してくれます。 熊の画像をクリックすると、"Ouch!"というダイアログボックスが表示されるようにして見ましょう。 
    
<h2><font color="pink">熊たたきゲーム</font></h2>

<img src="sbuc.gif" onClick="alert('Ouch!')">

  3. JavaScriptで、熊をたたくと、倒れるようにする

    熊の画像をクリックすると、更に、倒れるようにしてみましょう。 クリックした時の動作が複雑になるので、hit()という名前の関数にまとめることにします。 
    
<h2><font color="pink">熊たたきゲーム</font></h2>

<img src="sbuc.gif" id="bear" onClick="hit()">


<script type="text/javascript">
<!--

var IMG = document.getElementById('bear');

function hit()
{
    IMG.src = 'SB_down.gif';    
    alert('Ouch!');
}

//-->
</script>

  4. JavaScriptで、熊を動くようにする

    熊を動くようにするために、Animate()という関数を定義して、run()という関数で開始するようにします。 
    <h2><font color="pink">熊たたきゲーム</font></h2>

<img src="sbuc.gif" id="bear" onClick="hit()">


<script type="text/javascript">
<!--
var t = 0;
var IMG = document.getElementById('bear');
var myTimer = run();


function Animate(){
    IMG.style.position = 'absolute';
    IMG.style.left = Math.sin( t * 0.1 ) * 350 + 350 + "px";
    IMG.style.top = Math.cos( t * 0.5 ) * 20 + 150 + "px";
    t++;
}

function run()
{
    var myTimer = setInterval('Animate()', 80 );
    return myTimer;
}


function hit()
{
    IMG.src = 'SB_down.gif';    
    alert('Ouch!');
}

//-->
</script>

  5. JavaScriptで、倒れた熊を止める

    このままでは、熊がクリックされても、動き続けて変です。アニメーションを止めるには、JavaScriptのclearIntervalという関数を使います。 
    <h2><font color="pink">熊たたきゲーム</font></h2>

<img src="sbuc.gif" id="bear" onClick="hit()">


<script type="text/javascript">
<!--
var t = 0;
var IMG = document.getElementById('bear');
var myTimer = run();


function Animate(){
    IMG.style.position = 'absolute';
    IMG.style.left = Math.sin( t * 0.1 ) * 350 + 350 + "px";
    IMG.style.top = Math.cos( t * 0.5 ) * 20 + 150 + "px";
    t++;
}


function run()
{
    var myTimer = setInterval('Animate()', 80 );
    return myTimer;
}


function hit()
{
    IMG.src = 'SB_down.gif';    
    clearInterval(myTimer);
    alert('Ouch!');
}

//-->
</script>

  6. 問題：熊の動く速さを変えるにはどうすれば良いでしょうか？

    

    







Last update: 2008-06-28