A lot of things come out of the magic circle.'s game

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

No:2864

1394

←

Prev Next

→

A lot of things come out of the magic circle.
Developer anonymous｜Date and time 23/6/23 0:09:35
Build time 37.679 sec｜Game capacity 3.843KB｜

Script

魔法陣を使って、ボールを打ち返すゲームです。スマホでもプレイできます。開始ボタンをクリックすると、ゲームが始まります。左右の矢印キーで移動する四角形を操作して、ボールを打ち返して点数を稼いでください。ボールは壁に当たると反転し、四角形にぶつかると点数が加算されます。ボールの速度は時間とともに増加し、ボールのサイズも大きくなります。停止ボタンをクリックすると、ゲームを停止します。楽しんでプレイしてください！ 🎉

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>魔法陣ゲーム</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <button id="start-button">開始</button>
    <button id="stop-button">停止</button>
    <script>
      const canvas = document.getElementById('canvas');
      const startButton = document.getElementById('start-button');
      const stopButton = document.getElementById('stop-button');
      const context = canvas.getContext('2d');
      let requestId = null;
      let score = 0;
      let circleX = canvas.width / 2;
      let circleY = canvas.height / 2;
      let circleRadius = 30;
      let circleSpeedX = 5;
      let circleSpeedY = 5;
      let rectX = 0;
      let rectY = canvas.height - 50;
      let rectWidth = 100;
      let rectHeight = 50;
      let rectSpeed = 10;

function drawCircle() {
        context.beginPath();
        context.arc(circleX, circleY, circleRadius, 0, Math.PI * 2, false);
        context.fillStyle = '#FF0000';
        context.fill();
        context.closePath();
      }

function drawRect() {
        context.beginPath();
        context.rect(rectX, rectY, rectWidth, rectHeight);
        context.fillStyle = '#0000FF';
        context.fill();
        context.closePath();
      }

function drawScore() {
        context.font = '24px Arial';
        context.fillStyle = '#000000';
        context.fillText('Score: ' + score, 10, 30);
      }

function moveCircle() {
        circleX += circleSpeedX;
        circleY += circleSpeedY;

if (circleX + circleRadius >= canvas.width || circleX - circleRadius <= 0) {
          circleSpeedX = -circleSpeedX;
        }

if (circleY + circleRadius >= canvas.height || circleY - circleRadius <= 0) {
          circleSpeedY = -circleSpeedY;
        }
      }

function moveRect(event) {
        switch (event.keyCode) {
          case 37: // Left arrow key
            rectX -= rectSpeed;
            break;
          case 39: // Right arrow key
            rectX += rectSpeed;
            break;
        }

if (rectX <= 0) {
          rectX = 0;
        }

if (rectX + rectWidth >= canvas.width) {
          rectX = canvas.width - rectWidth;
        }
      }

function collisionDetection() {
        if (circleX - circleRadius <= rectX + rectWidth && circleX + circleRadius >= rectX &&
            circleY + circleRadius >= rectY) {
          score++;
          circleSpeedX *= 1.05;
          circleSpeedY *= 1.05;
          circleRadius += 1;
        }
      }

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawCircle();
        moveCircle();

drawRect();
        collisionDetection();

drawScore();
      }

function start() {
        requestId = requestAnimationFrame(start);
        draw();
      }

function stop() {
        cancelAnimationFrame(requestId);
      }

startButton.addEventListener('click', start);
      stopButton.addEventListener('click', stop);
      document.addEventListener('keydown', moveRect);
    </script>
  </body>
</html>

魔法陣を使って、ボールを打ち返すゲームです。スマホでもプレイできます。
開始ボタンをクリックすると、ゲームが始まります。左右の矢印キーで移動する四角形を操作して、ボールを打ち返して点数を稼いでください。
ボールは壁に当たると反転し、四角形にぶつかると点数が加算されます。ボールの速度は時間とともに増加し、ボールのサイズも大きくなります。停止ボタンをクリックすると、ゲームを停止します。
楽しんでプレイしてください！ 🎉