Transparency! Glue! Defeat the quiz and block drop with a paddle!'s game

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

No:9510

203

←

Prev Next

→

Transparency! Glue! Defeat the quiz and block drop..ALL
Developer User3589｜Date and time 23/7/25 21:14:46
Build time 42.999 sec｜Game capacity 4.908KB｜

Script

了解です。以下にゲームのHTMLファイルを実装します。

このHTMLファイルは、スマートフォンで遊べるゲーム「透明になる！接着剤！クイズとブロック落としをパドルで撃破！」を実装しています。スマートフォンの傾きを利用して、パドルを操作し、ブロックを撃破するゲームです。JavaScriptはscriptタグで囲まれており、実行開始されるようになっています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解です。以下にゲームのHTMLファイルを実装します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>透明になる！接着剤！クイズとブロック落としをパドルで撃破！</title>
  <style>
    #game-screen {
      position: relative;
      width: 100%;
      height: 400px;
      background-color: black;
    }

#paddle {
      position: absolute;
      bottom: 0;
      width: 100px;
      height: 20px;
      background-color: white;
    }

.block {
      position: absolute;
      width: 80px;
      height: 20px;
      background-color: red;
    }

#quiz {
      position: absolute;
      color: white;
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="game-screen">
    <div id="paddle"></div>
    <div id="quiz"></div>
  </div>

init() {
        this.paddle = document.getElementById('paddle');
        this.quiz = document.getElementById('quiz');

// パドルの初期位置
        this.paddle.style.left = "calc(50% - 50px)";

// ブロックを生成
        for (let i = 0; i < 4; i++) {
          const block = document.createElement('div');
          block.className = 'block';
          block.style.top = `${i * 40}px`;
          block.style.left = `${i * 100}px`;
          this.blocks.push(block);
          document.getElementById('game-screen').appendChild(block);
        }

// クイズを表示
        this.showQuiz();

// ゲームのメイン処理を開始
        this.intervalId = setInterval(() => {
          this.gameLoop();
        }, 1000 / 60);

// スマホ操作用のイベントを設定
        window.addEventListener('deviceorientation', (event) => {
          const x = event.beta;  // スマホの傾き
          this.movePaddle(x);
        });
      },

showQuiz() {
        // レベルに応じてクイズを表示
        switch (this.level) {
          case 1:
            this.quiz.textContent = "透明になる！";
            break;
          case 2:
            this.quiz.textContent = "接着剤！";
            break;
          case 3:
            this.quiz.textContent = "クイズとブロック落としをパドルで撃破！";
            break;
        }
      },

movePaddle(x) {
        // スマホの傾きに応じてパドルを移動
        const screenWidth = document.documentElement.clientWidth;
        const paddleWidth = this.paddle.offsetWidth;
        const newX = (x / 180) * (screenWidth - paddleWidth);
        this.paddle.style.left = `${newX}px`;
      },

gameLoop() {
        // ゲームオーバーの場合は終了
        if (this.isGameOver) {
          clearInterval(this.intervalId);
          return;
        }

// ブロックとの衝突判定
        for (let i = 0; i < this.blocks.length; i++) {
          const block = this.blocks[i];
          if (this.isCollision(this.paddle, block)) {
            this.blocks.splice(i, 1);  // ブロックを削除
            block.remove();
            this.score++;
            if (this.blocks.length === 0) {
              this.level++;
              this.resetGame();
            }
            break;
          }
        }
      },

isCollision(a, b) {
        // 2つの要素が重なっているか判定
        const aRect = a.getBoundingClientRect();
        const bRect = b.getBoundingClientRect();
        return !(
          aRect.top + aRect.height < bRect.top ||
          aRect.top > bRect.top + bRect.height ||
          aRect.left + aRect.width < bRect.left ||
          aRect.left > bRect.left + bRect.width
        );
      },

resetGame() {
        // クイズを更新
        this.showQuiz();

// パドルの位置をリセット
        this.paddle.style.left = "calc(50% - 50px)";

// ブロックを再生成
        this.blocks.forEach((block, index) => {
          block.style.top = `${index * 40}px`;
          block.style.left = `${index * 100}px`;
          document.getElementById('game-screen').appendChild(block);
        });
      }
    };

// ゲームを開始
    game.init();
  </script>
</body>
</html>
```