Madoka Magica Chibi Simulator. Madoka Magica Chibi Fighting ROG's game

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

No:7508

1157

←

Prev Next

→

Madoka Magica Chibi Simulator. Madoka Magica Chibi..ALL
Developer User4045｜Date and time 23/7/8 8:18:35
Build time 21.308 sec｜Game capacity 3.348KB｜

Script

Score: 0

The above code is a Madoka Magica Chibi Fighting ROG game implemented as a single HTML file. It uses JavaScript to render the game canvas, handle chibi movement, generate random chibis, keep score, and respond to player clicks on the chibis. The chibis are represented using an image file (chibi.png) and each chibi has a random speed assigned to it. The player earns 10 points for successfully clicking on a chibi, and loses 10 points if a chibi reaches the bottom of the canvas without being clicked. The score is displayed on the screen for the player to keep track.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Madoka Magica Chibi Simulator</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }
    
    #canvas {
      border: 2px solid #444;
    }
    
    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <div id="score">Score: 0</div>

let score = 0;
    let chibis = [];

class Chibi {
      constructor(x, y, speed) {
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.width = 50;
        this.height = 50;
        this.image = new Image();
        this.image.src = "chibi.png";
      }

draw() {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      }
      
      update() {
        this.y += this.speed;
      }

isOutOfBounds() {
        return this.y > canvas.height;
      }
    }

function generateRandomChibi() {
      const x = Math.random() * (canvas.width - 50);
      const speed = Math.random() * 5 + 1;
      chibis.push(new Chibi(x, 0, speed));
    }

function updateChibis() {
      for (let i = 0; i < chibis.length; i++) {
        chibis[i].update();

if (chibis[i].isOutOfBounds()) {
          chibis.splice(i, 1);
          score -= 10;
          updateScore();
        }
      }
    }

function drawChibis() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < chibis.length; i++) {
        chibis[i].draw();
      }
    }

function updateScore() {
      document.getElementById("score").innerText = `Score: ${score}`;
    }

function startGame() {
      setInterval(() => {
        generateRandomChibi();
      }, 1000);

setInterval(() => {
        updateChibis();
        drawChibis();
      }, 30);

canvas.addEventListener("click", (event) => {
        const rect = canvas.getBoundingClientRect();
        const clickX = event.clientX - rect.left;
        const clickY = event.clientY - rect.top;

for (let i = 0; i < chibis.length; i++) {
          const chibi = chibis[i];

if (
            clickX >= chibi.x &&
            clickX <= chibi.x + chibi.width &&
            clickY >= chibi.y &&
            clickY <= chibi.y + chibi.height
          ) {
            chibis.splice(i, 1);
            score += 10;
            updateScore();
          }
        }
      });
    }

startGame();
  </script>
</body>
</html>
The above code is a Madoka Magica Chibi Fighting ROG game implemented as a single HTML file. It uses JavaScript to render the game canvas, handle chibi movement, generate random chibis, keep score, and respond to player clicks on the chibis. The chibis are represented using an image file (chibi.png) and each chibi has a random speed assigned to it. The player earns 10 points for successfully clicking on a chibi, and loses 10 points if a chibi reaches the bottom of the canvas without being clicked. The score is displayed on the screen for the player to keep track.