HOME  >>>  HTML整理ノート  >>> DHTML --  基本編  応用編

射て、タンクでゴーン!

戦車の緑色部分をクリックすれば弾丸発射。持ち弾は20発。連射は効かんゾ。1500点以上だすとナイスなご褒美あるで!! 


保有弾丸数==20
得点==0

 

 

 

 

 

 

 

 

 

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function Game(){    //[GameStart]ボタン
  if(bt.innerText == "GameStart"){
    bt.style.backgroundColor = "pink";
    bt.innerText = "GameStop";
    MatoDrop();
  }else{        //全てを初期化する
    clearTimeout(timerDrop);
    clearTimeout(timerMato);
    mato.style.visibility = "hidden";
    mato.style.pixelTop = 0;
    bt.style.backgroundColor = "";
    bt.innerText = "GameStart";
    tama_n = 20;
    sp1.innerText = tama_n;
    ten = 0;
    sp2.innerText = ten;
}
}

var ten = 0;    //得点(100点単位)
var dy;        //ドロップ量(下への移動量)
var timerMato,timerDrop;
function MatoDrop(){    //標的を落下さす
    mato.style.visibility = "visible";
    dy = Math.ceil(Math.random()*5);//1〜5の乱数を生じる
    Drop();
}
function Drop(){    //標的が落下する関数
    mato.style.pixelTop += dy;    //下にdyだけ移動
    timerDrop = setTimeout("Drop()",50);

  //標的が弾の軌道範囲に入ったとき   
  if(mato.style.pixelTop > 160
            && mato.style.pixelTop < 185){
    if(gon == 1){    //標的と弾がゴーンした時
        clearTimeout(timerDrop);
        mato.style.visibility = "hidden";
        mato.style.pixelTop = 0;   
        ten += 100;         //得点を増やし表示する
        sp2.innerText = ten;
        //2秒後、再度標的を落下さす    
        timerMato = setTimeout("MatoDrop()",2000);
    }
  //標的が下端まで達したら消し、再度上から落下さす
  }else if(mato.style.pixelTop > 220){
    clearTimeout(timerDrop);
    mato.style.visibility = "hidden";
    mato.style.pixelTop = 0;
    timerMato = setTimeout("MatoDrop()",2000);
  }
}

var gon = 0;//弾が標的の落下範囲内かどうかを区別
var flg = 0;//弾が発射中かどうか区別(連射を防ぐ)
var tama_n = 20;    //保有弾丸数
var timerTama;
function Gon(){        //戦車の緑部分がクリックされたら
  if(flg == 0){        //発射中でない場合
    tama.style.visibility = "visible";
    flg = 1;    //フラグ変数を発射中にする
    timerTama = setInterval("TamaMove()",2);
  }
}
function TamaMove(){    //弾が移動する関数
    tama.style.pixelLeft += 7;     //7ピクセルずつ右移動
    if(tama.style.pixelLeft > 300){
        tama.style.color = "red";
        gon = 1;    //弾が標的の落下範囲に入った
    }
    if(tama.style.pixelLeft > 320){
        tama.style.color = "";
        gon = 0;    //弾が標的の落下範囲から出た
    }
    //弾が右端に達した時の処理
    if(tama.style.pixelLeft > 330){
        clearInterval(timerTama);
        flg = 0;
        tama.style.visibility = "hidden";
        tama.style.pixelLeft = 117;
        tama_n --;    //弾丸数を1減らす
        sp1.innerText = tama_n;
        if(tama_n == 0){    //弾切れになったら
            if(ten > 1400){     //1500点以上の場合
                alert("お見事!!、ご褒美だ!!");
                dv.style.backgroundImage =
                    "url(../../images/hsru01.jpg)";
               
            }else{
                alert("大将、弾丸が切れたダス!!");
                dv.style.backgroundImage =
                    "url(../../soft/imgcpb1/backh04a.gif)";
            }
            Game();     //ボタンの[GameStop]を実行
        }
    }
}
//--></script>
</head>
<div id="dv" style="position:absolute;
    top:100;left:100;width:350;height:250;
    background:url(../soft/imgcpb1/backh04a.gif)">

<button id="bt" onclick="Game();">GameStart</button>
保有弾丸数==
    <span id="sp1" style="color:navy;font:bold 12pt">20</span>
得点==<span id="sp2" style="color:red;font:bold 12pt">0</span>

<img id="mato" style="position:absolute;
    top:0;left:310;visibility:hidden"
    src="../images/bt0711.gif" width="28" height="28">
<div style="position:absolute;
    top:175;left:0;width:40;height:25;background:green;
    border:1 solid;cursor:hand"
    onclick="Gon();"></div>
<div style="position:absolute;
    top:180;left:40;width:80;height:10;
    border-top:8 solid gray"></div>
<div id="tama" style="position:absolute;
    top:175;left:117;color:black;font:14pt;visibility:hidden">
    <p>●</p></div>
<div style="position:absolute;
    top:200;left:0;width:80;height:30;
    background:black;border:1 solid"></div>
<div style="position:absolute;
    top:230;left:0;width:60;height:10;
    background:saddlebrown;border:1 solid"></div>
</div>


end(最終更新:12/11/6)