Pictogram Bubble Shoot's game

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

No:9696

179

←

Prev Next

→

Pictogram Bubble Shoot
Developer User4369｜Date and time 23/7/26 21:12:16
Build time 28.597 sec｜Game capacity 3.594KB｜

Script

以下は、絵文字バブルシュートの実装例です。

Score: 0

このコードでは、指定されたサイズのバブル（絵文字を表示したボタン）をランダムに生成し、クリックするとスコアが加算されるようになっています。ゲームが終了した場合には、アラートで最終スコアが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

以下は、絵文字バブルシュートの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>絵文字バブルシュート</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f2f2f2;
    }
    #game {
      display: flex;
      height: 100vh;
    }
    #board {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #score {
      font-size: 24px;
      font-weight: bold;
    }
    #canvas {
      position: relative;
      border: 2px solid #ccc;
      background-color: #fff;
    }
    #canvas button {
      position: absolute;
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      background-color: transparent;
      font-size: 24px;
      cursor: pointer;
    }
    #canvas button:disabled {
      cursor: not-allowed;
    }
    #canvas button:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="board">
      <div id="score">Score: 0</div>
      <div id="canvas"></div>
    </div>
  </div>

const emojis = ['😀', '😆', '😍', '🤩', '🤪', '😎', '😉', '🤗', '🙃'];
    const bubbleSize = 60;
    const canvasSize = 400;
    const numColumns = 6;
    const numRows = 8;
    const colors = ['#ff3333', '#ff9933', '#ffff33', '#33cc33', '#3399ff', '#9933ff'];

let score = 0;
    let isGameOver = false;
    
    const canvas = document.getElementById('canvas');
    const scoreElement = document.getElementById('score');

function getRandomEmoji() {
      const randomIndex = Math.floor(Math.random() * emojis.length);
      return emojis[randomIndex];
    }

function getRandomColor() {
      const randomIndex = Math.floor(Math.random() * colors.length);
      return colors[randomIndex];
    }

function createRow() {
      const row = document.createElement('div');
      row.style.display = 'flex';
      row.style.alignItems = 'center';
      row.style.justifyContent = 'center';
      return row;
    }

function checkGameOver() {
      if (document.querySelectorAll('#canvas button:enabled').length === 0) {
        isGameOver = true;
        alert('Game Over! Final Score: ' + score);
      }
    }

createBoard();
  </script>
</body>
</html>
```