view source

JavaScript

$(function(){

  // リンク切れ画像の青い枠線を消す (ダミーの透過画像に置き換える)
  $('img').on('error', function(){
    $(this)[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
  });

  $('.mode-2').hide();
  $('.result, .confirm').hide();

  // 画面遷移
  $('.module a').click(function(){
    $(this).parents('.module').hide();
    var nextClass = $(this).attr('href').substr(1);
    $('.' + nextClass).show();
    return false;
  });


  
});

CSS

#wrap{
  width:320px;
  margin:0 auto;
}
.module{
  height:364px;
  margin:4px;
  background-color:#FE53B3;
  border:2px solid #FE53B3;
  border-radius:6px;
  text-align:center;
}
.module .body{
  height:320px;
  background-color:#FDF0FA;
  border-radius:4px;
  padding:0 0;
}
.module h2{
  height:44px;
  line-height:44px;
  color:#FFFFFF;
  font-size:32px;
  font-weight:bold;
}
.module h3{
  line-height:32px;
  font-size:24px;
}
.module p{
  line-height:16px;
  font-size:16px;
}

img.thumb{
  width:120px;
  height:120px;
  margin:8px;
  background-color:#FE53B3;
  border-radius:4px;
}
ul a{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:currentColor;
}

ul img{
  background-color:#FE53B3;
  border-radius:4px;
}

ul.items{
  width:304px;
  padding:3px 2px;
}
ul.items:after{
  display:block;
  content:"";
  clear:both;
}

ul.items li{
  width:72px;
  height:72px;
  margin:2px;
  background-color:#FE53B3;
  border-radius:4px;
  color:#FFFFFF;
  float:left;
}
ul.items li img{
  width:72px;
  height:72px;
}

ul.select{
  width:308px;
  padding:4px 0;
  margin:auto;
}
ul.select.ok{
  width:152px;
}
ul.select:after{
  display:block;
  content:"";
  clear:both;
}

ul.select li{
  width:148px;
  height:40px;
  line-height:40px;
  margin:2px;
  background-color:#FE53B3;
  border-radius:4px;
  color:#FFFFFF;
  float:left;
}

ul.list{
  width:100%;
}
ul.list:after{
  display:block;
  content:"";
  clear:both;
}

ul.list li{
  height:78px;
  border-top:2px solid #FE53B3;
  text-align:left;
  clear:both;
}
ul.list li:first-child{
  border-top:2px solid transparent;
}
ul.list li a{
  margin:6px;
}
ul.list li img{
  width:64px;
  height:64px;
  margin-right:8px;
  float:left;
}

HTML

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

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

ABOUT

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

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

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

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

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

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

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

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