game-arrow-hit.gif
game-ball-vs-cube.gif
game-bump-and-dip.gif
game-chainsaw-vs-devil.gif
game-fire-and-ice.gif
game-fireworks-hanabi.gif
game-fishing.gif
game-foot-stamp.gif
game-grape-blade.gif
game-gun-shooting-fps.gif
game-hex-rock.gif
game-house-racing.gif
game-ninja-star.gif
game-pachinko-pinball.gif
game-panels-all-green.gif
game-panels-hue.gif
game-panels-nopairs.gif
game-panels-sumsum.gif
game-panels-illust-puzzle.gif
game-pop-seed.gif
game-pull.gif
game-ring-rising.gif
game-slot.gif
game-spike-skip.gif
game-table-tennis-pinpon.gif
game-zigzag.gif
js-game-cookie-clicker-chocolate.gif
js-game-crush-by-hand.gif
js-game-dice-sicbo.gif
js-game-janken-hand.gif
js-game-roulette-casino.gif
js-game-roulette.gif
js-game-shiritori-picture.gif

tv-noize.gif
view source

JavaScript

document.title = 'ミニゲームの動作画面 アニメーションGIF';

$(function(){
  var $demo = $('#demo');
  var fileText = $('#files').text();
  $('#files').remove();
  var files = fileText.split('\n');
  files.pop();
  var imgPath =  '/img/ani-gif/';
  files.forEach(function(v){
    var aPath =  '/-game/';
    if(v.match(/js-/)){aPath='/demo/-js/';}
    var href = aPath+v.replace(/.gif/,'')+'/';
    var a = $('<a>',{href:href});
    var img = $('<img>',{src:imgPath+v,alt:v,lazyload:'lazyload'});
    a.append(img);
    $demo.append(a);
  });
})

CSS

#demo{
  font-size:0;
}
#demo a{
  display:inline-block;
  width:20%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  position:relative;
  left:0;
  top:0;
}
#demo img{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-game-ani-gif/

ABOUT

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

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

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

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

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

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

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

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