Animal School Simule's game

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

No:326

489

←

Prev Next

→

Animal School Simule
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/12 10:14:18
Build time 40.595 sec｜Game capacity 4.792KB｜

Script

※本プログラムは、イメージ画像としてplayer.png, enemy1.png, enemy2.png, enemy3.png, enemy4.pngを使用しました。また、スマートフォン上で操作する場合は、キーボードイベントの代わりにタッチイベントの処理を追加する必要があります。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>どうぶつスクールシミュレーター続編 動物ハンターライズサンブレイク</title>
    <style>
      body {
        font-size: 24px;
        font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        margin: 0;
        padding: 0;
      }
      canvas {
        width: 100%;
        height: auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
      const canvas = document.querySelector("canvas");
      const ctx = canvas.getContext("2d");
      
      const playerImg = new Image();
      playerImg.src = "player.png";
      
      const enemyImgs = [
        new Image(),
        new Image(),
        new Image(),
        new Image(),
      ];
      enemyImgs[0].src = "enemy1.png";
      enemyImgs[1].src = "enemy2.png";
      enemyImgs[2].src = "enemy3.png";
      enemyImgs[3].src = "enemy4.png";
      
      let playerX = canvas.width / 2;
      let playerY = canvas.height - 100;
      let playerSpeed = 10;
      let playerWidth = 64;
      let playerHeight = 64;
      let playerHP = 100;
      let playerScore = 0;
      
      const maxEnemyCount = 10;
      let enemyCount = 0;
      let enemies = [];
      let enemySpeed = 5;
      let enemyWidth = 64;
      let enemyHeight = 64;
      let enemyScore = 10;
      
      let isGameOver = false;
      
      document.addEventListener("keydown", (event) => {
        if (event.key === "ArrowLeft") {
          playerX -= playerSpeed;
        } else if (event.key === "ArrowRight") {
          playerX += playerSpeed;
        }
      });
      
      function update() {
        if (isGameOver) {
          return;
        }
        
        // player
        if (playerHP <= 0) {
          isGameOver = true;
          return;
        }
        if (playerX < 0) {
          playerX = 0;
        }
        if (playerX > canvas.width - playerWidth) {
          playerX = canvas.width - playerWidth;
        }
        
        // enemies
        if (enemies.length < maxEnemyCount) {
          const newEnemy = {
            x: Math.random() * canvas.width,
            y: -enemyHeight,
            img: enemyImgs[Math.floor(Math.random() * enemyImgs.length)],
            speed: enemySpeed + Math.random() * 5,
          };
          enemies.push(newEnemy);
          enemyCount++;
        }
        for (let i = 0; i < enemies.length; i++) {
          enemies[i].y += enemies[i].speed;
          if (enemies[i].y > canvas.height) {
            enemies.splice(i, 1);
            i--;
            enemyCount--;
            playerHP--;
          }
          
          const dx = playerX - enemies[i].x;
          const dy = playerY - enemies[i].y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          if (distance < playerWidth + enemyWidth) {
            enemies.splice(i, 1);
            i--;
            enemyCount--;
            playerHP -= 10;
          } else if (distance < playerWidth + enemyWidth * 2) {
            enemies.splice(i, 1);
            i--;
            enemyCount--;
            playerScore += enemyScore;
          }
        }
      }
      
      function draw() {
        // clear screen
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // player
        ctx.drawImage(playerImg, playerX, playerY, playerWidth, playerHeight);
        ctx.fillStyle = "#000";
        ctx.fillText(`HP: ${playerHP}`, 10, 30);
        ctx.fillText(`Score: ${playerScore}`, 10, 60);
        
        // enemies
        for (let enemy of enemies) {
          ctx.drawImage(enemy.img, enemy.x, enemy.y, enemyWidth, enemyHeight);
        }
        
        // game over
        if (isGameOver) {
          ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = "#fff";
          ctx.font = "48px sans-serif";
          ctx.textAlign = "center";
          ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
          ctx.font = "24px sans-serif";
          ctx.fillText("Refresh to restart", canvas.width / 2, canvas.height / 2 + 30);
        }
      }
      
      function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
      }
      
      requestAnimationFrame(loop);
    </script>
  </body>
</html>