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

No:27378

160

←

Prev Next

→

Karate Fighter Simulator
Developer User13363｜Date and time 23/12/6 14:57:22
Build time 68.251 sec｜Game capacity 3.693KB｜

Script

Karate Fighter Simulator

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Karate Fighter Simulator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    canvas {
      border: 1px solid black;
    }
    #score {
      font-size: 24px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Karate Fighter Simulator</h1>
  <canvas id="gameCanvas" width="600" height="400"></canvas>
  <p id="score">Score: 0</p>
  
  <script>
    // Create the canvas and context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    // Player position and size
    let playerX = canvas.width / 2;
    const playerY = canvas.height - 50;
    const playerWidth = 50;
    const playerHeight = 50;
    
    // Player movement speed
    const playerSpeed = 5;
    
    // Right and left arrow key state
    let rightPressed = false;
    let leftPressed = false;
    
    // Enemies
    let enemies = [
      { x: 50, y: 50, width: 50, height: 50 },
      { x: 150, y: 80, width: 50, height: 50 },
      { x: 250, y: 110, width: 50, height: 50 },
      { x: 350, y: 140, width: 50, height: 50 },
      { x: 450, y: 170, width: 50, height: 50 }
    ];
    
    // Score
    let score = 0;
    
    // Keyboard event listeners
    document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);
    
    // Move the player based on arrow key states
    function movePlayer() {
      if (rightPressed && playerX < canvas.width - playerWidth) {
        playerX += playerSpeed;
      } else if (leftPressed && playerX > 0) {
        playerX -= playerSpeed;
      }
    }
    
    // Draw the player on the canvas
    function drawPlayer() {
      ctx.beginPath();
      ctx.rect(playerX, playerY, playerWidth, playerHeight);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
    }
    
    // Draw the enemies on the canvas
    function drawEnemies() {
      for (let enemy of enemies) {
        ctx.beginPath();
        ctx.rect(enemy.x, enemy.y, enemy.width, enemy.height);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }
    }
    
    // Update the score
    function updateScore() {
      score++;
      document.getElementById("score").textContent = "Score: " + score;
    }
    
    // Check collision between player and enemies
    function checkCollision() {
      for (let enemy of enemies) {
        if (
          playerX < enemy.x + enemy.width &&
          playerX + playerWidth > enemy.x &&
          playerY < enemy.y + enemy.height &&
          playerY + playerHeight > enemy.y
        ) {
          // Collision detected!
          updateScore();
          resetEnemy(enemy);
        }
      }
    }
    
    // Move the enemy back to the top
    function resetEnemy(enemy) {
      enemy.y = 0;
      enemy.x = Math.random() * (canvas.width - enemy.width);
    }
    
    // Game loop function
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      movePlayer();
      drawPlayer();
      drawEnemies();
      checkCollision();
      
      requestAnimationFrame(gameLoop);
    }
    
    // Keyboard event handlers
    function keyDownHandler(event) {
      if (event.key === "ArrowRight") {
        rightPressed = true;
      } else if (event.key === "ArrowLeft") {
        leftPressed = true;
      }
    }
    
    function keyUpHandler(event) {
      if (event.key === "ArrowRight") {
        rightPressed = false;
      } else if (event.key === "ArrowLeft") {
        leftPressed = false;
      }
    }
    
    // Start the game loop
    gameLoop();
  </script>
</body>
</html>