view source

JavaScript

document.title = '画面を虫がカサカサ動く 猫用おもちゃアプリ';

$(function(){
  var $img = $('<img>', {src:'bug.gif'});
  $('#demo').append($img);
  var se = new Audio('/mp3/bu-n.mp3');
  var w = document.body.clientWidth;
  var h = window.innerHeight;
  var padding = 10;
  var x = w/4;
  var y = h/4;
  var vx = 0;
  var vy = 0;
  var ax = 0;
  var ay = 0;
  var deg = 0;
  var speed = 4;
  $img.css({top:x,left:y,transform:'rotate('+deg+'deg)'});

  $('#demo').on('click', function(e){
    full();
    var zx = e.offsetX;
    var zy = e.offsetY;
  });

  $img.on('click', function(e){
    se.play();
    jump();
  });
  $img.on('dblclick', function(){
    $img.attr({src:'goki.gif'});
  });

  function full(){
    document.body.requestFullscreen();
    w = document.body.clientWidth;
    h = window.innerHeight;
  }
  function jump(){
    x = (Math.random()*w*5/6);
    y = (Math.random()*h*5/6);
    deg += 90;
    var r = (Math.random()*11);
    if(r<2){change();}
    $img.css({top:x,left:y});
  }

  function change(){
    var src = $img.attr('src');
    if(src==='bug.gif'){
      $img.attr({src:'goki.gif'});
    } else if (src==='goki.gif'){
      $img.attr({src:'spider.gif'});
    } else {
      $img.attr({src:'bug.gif'});
    }
  }

  function move(){
    var sp = (Math.random()*speed);
    var rad = (deg-90)* Math.PI / 180;
    vx = sp * Math.cos(rad);
    vy = sp * Math.sin(rad);
    //console.log('x:' +x);
    //console.log('w:' +w);
    if(x<w*1/16){jump();}
    if(x>w*15/16){jump();}
    if(y<h*1/16){jump();}
    if(y>h*15/16){jump();}
    x+=vx;
    y+=vy;
    //deg = Math.atan(vy/vx);
    deg+= ((Math.random()*speed)-speed/2)*4;
    $img.css({top:y,left:x,transform:'rotate('+deg+'deg)'});
  }
  setInterval(function(){
    move();
  }, 19);
});

CSS

html,body{
  overflow:hidden;
  user-select:none;
}

#demo img{
  position:absolute;
  width:200px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-animation-bug/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。