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

ミニゲームの動作画面 アニメーションGIF

ミニゲームの動作画面 アニメーションGIF | ひまあそび-ミニゲーム hi0a.com

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/game/game-ani-gif/

ABOUT

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

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

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

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

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

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

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