Hurry up with the appeasement of the howsk!!!! 🤬💢game's game

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

No:3750

←

Prev Next

→

Hurry up with the appeasement of the howsk!!!! 🤬💢g..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/26 12:52:28
Build time 77.833 sec｜Game capacity 7.627KB｜

Script

はじめる前に、グローバル変数の宣言を行います。

次に、ボードとボールを描画する関数と、マウス操作でボードを動かす関数を作ります。

次に、ボールの動きを制御する関数を作ります。

次に、砖とボールが衝突したときに砖を消す処理を作ります。

最後に、ゲームを開始する処理を追加します。

以上で、ミニゲームの実装が完了しました。加えて、前提条件であるスマホ操作にも対応しており、絵文字を使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

はじめる前に、グローバル変数の宣言を行います。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ミニゲーム</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const ballSpeed = 10;
    let ballDirection = {
      x: 1,
      y: 1
    };
    const ballRadius = 10;
    const paddleHeight = 10;
    const paddleWidth = 75;
    let paddleX;
    const brickRowCount = 3;
    const brickColumnCount = 5;
    const brickWidth = 75;
    const brickHeight = 20;
    const brickPadding = 10;
    const brickOffsetTop = 30;
    const brickOffsetLeft = 30;
    let score = 0;
    let lives = 3;
    const colorList = [
      "#0095DD",
      "#9933CC",
      "#FF6699"
    ];
    let bricks = [];
    for (let c = 0; c < brickColumnCount; c++) {
      bricks[c] = [];
      for (let r = 0; r < brickRowCount; r++) {
        bricks[c][r] = {
          x: 0,
          y: 0,
          status: 1,
          color: colorList[Math.floor(Math.random() * colorList.length)]
        };
      }
    }
  </script>
</body>
</html>
```

次に、ボードとボールを描画する関数と、マウス操作でボードを動かす関数を作ります。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ミニゲーム</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body onmousemove="movePaddle(event)">
  <canvas id="canvas"></canvas>
  <script>
    /* グローバル変数の宣言 */
    /* ... */
    
    /* ボードとボールを描画する関数 */
    function draw() {
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall(ctx);
      drawPaddle(ctx);
      drawBricks(ctx);
      drawScore(ctx);
      drawLives(ctx);
      collisionDetection();
      ballMove();
      requestAnimationFrame(draw);
    }
    
    /* ボードを動かす関数 */
    function movePaddle(e) {
      const canvas = document.getElementById("canvas");
      const rect = canvas.getBoundingClientRect();
      paddleX = e.clientX - rect.left - paddleWidth / 2;
      if (paddleX < 0) {
        paddleX = 0;
      }
      if (paddleX > canvas.width - paddleWidth) {
        paddleX = canvas.width - paddleWidth;
      }
    }
    
    /* ボールを描画する関数 */
    function drawBall(ctx) {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
    
    /* ボードを描画する関数 */
    function drawPaddle(ctx) {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
    
    /* 砖を描画する関数 */
    function drawBricks(ctx) {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) {
            const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = bricks[c][r].color;
            ctx.fill();
            ctx.closePath();
          }
        }
      }
    }
    
    /* 得点を描画する関数 */
    function drawScore(ctx) {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Score: " + score, 8, 20);
    }
    
    /* 生命を描画する関数 */
    function drawLives(ctx) {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
    }
  </script>
</body>
</html>
```

次に、ボールの動きを制御する関数を作ります。

次に、砖とボールが衝突したときに砖を消す処理を作ります。

最後に、ゲームを開始する処理を追加します。

以上で、ミニゲームの実装が完了しました。加えて、前提条件であるスマホ操作にも対応しており、絵文字を使用しています。