もぐらたたき 顔文字つぶしゲーム 無限プチプチ ストレス解消

※ 機動戦士ガンダム 水星の魔女及び、ミリオネ、スレッタ=マーキュリーとは一切関係ありません

人を叩き潰すゲーム 「やめさない！」っていいながらプレイしてね

連続で潰すと北斗百裂拳感ある

顔文字つぶし

view source

JavaScript

/*
手で叩き潰すゲーム
*/
document.addEventListener('contextmenu', e => {
  e.preventDefault();
});

$(function(){
  var t = 0;
  var kaoAry = ['😨','😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','😎','😍','🤩','🥰 ','🤑','😜','👽','🤪'];
  var mp3 = new Audio('crush.mp3');
  var w = document.body.clientWidth;
  var h = window.innerHeight;
  var $demo = $('#demo');

  var search = location.search.substring(1);
  var target;
  var enemy;
  if(search){
    const params = new URLSearchParams(search)
    target = params.get('target');
    console.log(search);
    console.log(target);
  }
  if(target === 'bsky'){
    enemy = 'bsky-boss.png';
    $('#demo').css({cursor:"url('bsky-card.png') 0 0, auto"});
    var style = $('<style>').text('.b:after{content:"";}.h:after{content:url("bsky-card2.png")}');
    $('#demo').append(style);
  }

  var iw = w/20;
/*
//cdn.bsky.social/imgproxy/LicK1WU2X7XWJhwjy6XV_na62KBcZXpBu4JBSiWS-X4/rs:fill:1000:1000:1:0/plain/bafkreigwxcrgddupuuewkhzhys6rbqfawd6srmija7rdstdvb7morawqgy@jpeg
*/

  function pushI(v, i){
    $i = $('<i>').addClass('e');
    var x = Math.floor(w/24) + Math.floor(Math.random() * w * 4/5);
    var y = Math.floor(h/24) + Math.floor(Math.random() * h * 4/5);
    var kao = kaoAry[Math.floor(Math.random() * kaoAry.length)];
    if(i === 0){
      kao = kaoAry[i];
    }
    $i.css({
      left:x,
      top:y,
    }).text(kao);

    if(target){
      src = target;
      if(enemy){
        src = enemy;
      }
      $img = $('<img>',{src:src,width:iw,height:iw,margin:-iw/2});
      $i.text('').append($img.clone());
    }
    $i.on('click', function(){
      var e = $(this);
      if(e.hasClass('e')){
        mp3.currentTime = 0;
        mp3.play();
        e.empty();
        e.removeClass('e');
        e.addClass('h');
        setTimeout(function(){
          e.removeClass('h');
          e.addClass('b');
        }, 199);
        setTimeout(function(){
          e.remove();
        }, 19999);
      }
    });
    setTimeout(function(){
      e.remove();
    }, 999999);
    $demo.append($i);
  }


  pushI('m', 0);
  setInterval(function(){
    t++;
    if(t % 3 === 0){
      pushI('e');
    }
  }, 199)
});

//https://soundeffect-lab.info/sound/battle/

CSS

/*
手で叩き潰すゲーム
*/
html,body{
  overflow:hidden;
}

h1,h2{
  display:none;
}
#demoA{
  opacity:0;
}
#demo{
  background-color:#000;
  cursor:url('hand.png') 0 0, auto;
  user-select:none;
}
i{
  display:inline-block;
  font-size:8vmax;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}
,b{
  z-index:1;
}
.b:after{
  display:inline-block;
  content:"🍁";
}
.h:after{
  display:inline-block;
  content:"🖐";
}
.e{
  z-index:4;
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-game-crush-by-hand/

ABOUT

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

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

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

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

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

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

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

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