Explosion game if you tap a lot's game

Click here for free DL of the app version that can save data.

No:1758

1477

←

Prev Next

→

Explosion game if you tap a lot
Developer User3403｜Date and time 23/6/19 0:33:13
Build time 27.163 sec｜Game capacity 2.561KB｜

Script

このゲームは、爆弾が敷き詰められたフィールドから、プレイヤーがドットをクリックすると、そのドットを中心に爆風が発生して、周りのドットが飛び散っていくゲームです。10回ドットをクリックすると、全てのドットが爆発します。ゲームの概念を理解したら、多めのスマホ用絵文字を使用して、楽しい爆風アニメーションを加えています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>爆発ゲーム</title>
      <style>
         body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
         }
         
         #game-board {
            width: 80vw;
            height: 70vh;
            border: 2px solid black;
            display: flex;
            flex-wrap: wrap;
            background-color: #87CEEB;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
         }
         
         #game-board div {
            width: 5vw;
            height: 5vw;
            margin: 0.5vw;
            border-radius: 50%;
            background-color: orange;
            position: absolute;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
         }
         
         #game-board div:hover {
            transform: scale(1.2);
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <div id="game-board">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
      </div>
      
      <script>
         let dots = document.querySelectorAll("#game-board div");
         dots.forEach((dot) => dot.addEventListener("click", () => dot.classList.add("boom")));
         dots.forEach((dot) => dot.addEventListener("animationend", () => dot.remove()));
      </script>
   </body>
</html>