慣性のある動き

(C)WorldWideSoftware

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>慣性のある動き</title>
 </head>
 <body>
  <canvas id="bg" width="800" height="600"></canvas><br>
  <a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
【説明】
カーソルキーで移動します。カニの動きには慣性が働きます。
キー入力で座標の変数を変化させるのではなく、<strong>“座標の変化量”を計算</strong>し、それを座標に加算します。
慣性を表現する最も基本的なプログラムです。
<br>
<a href="inertia00src.html">ソースコードの確認</a>

  <script>
  //描画面（キャンバス）の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");

  //キー入力
  var key = 0;
  window.onkeydown = function(event) { key = event.keyCode; }
  window.onkeyup = function(event) { key = 0; }

  //画像の読み込み
  var img = [], iOK = [];
  function loadImg(n, fname) {
   iOK[n] = false;
   img[n] = new Image();
   img[n].src = fname;
   img[n].onload = function() {iOK[n]=true;}
  }
  loadImg(0, "crab.png");//カニの画像
  loadImg(1, "water.png");//背景画像

  //変数
  var plX = 400, plY = 600;//プレイヤーキャラの座標
  var xp = 0, yp = 0;//移動量（慣性を持たせる）
  var tmr = 0;//タイマー　→　背景のスクロールで使用

  //メイン処理
  function mainProc() {
   tmr++;

   //水（背景）の描画　スクロールさせる
   if(iOK[1] == true) {
    ctx.drawImage(img[1], tmr%800-800, 0);
    ctx.drawImage(img[1], tmr%800, 0);
   }

   //プレイヤーキャラの移動
   if(key==38 && yp>-12) yp=yp-2;//カーソルキー↑
   if(key==40 && yp< 12) yp=yp+2;//カーソルキー↓
   if(key==37 && xp>-12) xp=xp-2;//カーソルキー←
   if(key==39 && xp< 12) xp=xp+2;//カーソルキー→
   if(key== 0) {//何も入力しないと
    xp = parseInt(xp*0.9);//左右の移動量を減らす
    if(yp < 12) yp++;//下に落ちていく
   }
   plX = plX + xp;
   plY = plY + yp;
   if(plX < -50) plX=850;//左端に行ったら右端にワープ
   if(plX > 850) plX=-50;//右端に行ったら左端にワープ
   if(plY <  80) {plY= 80; yp=0;}//画面上にめりこまないように
   if(plY > 600) {plY=600; yp=0;}//画面下にめりこまないように

   //プレイヤーキャラの表示
   if(iOK[0] == true) ctx.drawImage(img[0], plX-50, plY-80);
  }
  setInterval(mainProc, 50);
  </script>
 </body>
</html>
←動作確認に戻る