AI game creator

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

No:12904

120

←

Prev Next

→

Fencing game
Developer User5619｜Date and time 23/8/24 23:37:44
Build time 45.175 sec｜Game capacity 4.66KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Fencing Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="500"></canvas>

// Player variables
    let playerY = 200;
    const playerHeight = 100;
    const playerWidth = 20;
    const playerSpeed = 10;

// Opponent variables
    let opponentY = 200;
    const opponentHeight = 100;
    const opponentWidth = 20;
    const opponentSpeed = 8;

// Ball variables
    let ballX = 200;
    let ballY = 250;
    const ballSize = 15;
    let ballSpeedX = 5;
    let ballSpeedY = 5;

// Keyboard event listeners
    document.addEventListener('keydown', movePlayer);

// Move player up or down based on key press
    function movePlayer(event) {
      if (event.keyCode === 38) { // Up arrow key
        playerY -= playerSpeed;
        if (playerY < 0) playerY = 0;
      } else if (event.keyCode === 40) { // Down arrow key
        playerY += playerSpeed;
        if (playerY + playerHeight > canvas.height) playerY = canvas.height - playerHeight;
      }
    }

// Start the game when screen is touched
    document.addEventListener('touchstart', startGame);

// Start the game and pause on subsequent touches
    function startGame() {
      if (gamePaused) {
        gamePaused = false;
        requestAnimationFrame(draw);
      } else {
        gamePaused = true;
      }
    }

// Collision detection for ball and players
    function collisionDetection() {
      // Player collision
      if (ballX <= playerWidth && ballY + ballSize >= playerY && ballY <= playerY + playerHeight) {
        ballSpeedX = -ballSpeedX;
        increaseDifficulty();
      }

// Opponent collision
      if (ballX >= canvas.width - (opponentWidth + ballSize) && ballY + ballSize >= opponentY && ballY <= opponentY + opponentHeight) {
        ballSpeedX = -ballSpeedX;
        increaseDifficulty();
      }
    }

// Increase ball speed after collisions
    function increaseDifficulty() {
      if (ballSpeedX > 0) {
        ballSpeedX += 1;
      } else {
        ballSpeedX -= 1;
      }

if (ballSpeedY > 0) {
        ballSpeedY += 1;
      } else {
        ballSpeedY -= 1;
      }
    }

// Update game elements and check for game over
    function update() {
      if (!gamePaused) {
        // Update ball position
        ballX += ballSpeedX;
        ballY += ballSpeedY;

// Opponent AI movement
        if (opponentY + (opponentHeight / 2) < ballY) {
          opponentY += opponentSpeed;
        } else {
          opponentY -= opponentSpeed;
        }

// Ball collision with top/bottom walls
        if (ballY <= 0 || ballY + ballSize >= canvas.height) {
          ballSpeedY = -ballSpeedY;
        }

// Check if ball went out of bounds (player scores)
        if (ballX + ballSize >= canvas.width) {
          playerScore++;
          resetBallPosition();
        }

// Check if ball went out of bounds (opponent scores)
        if (ballX <= 0) {
          opponentScore++;
          resetBallPosition();
        }

collisionDetection();
      }
    }

// Reset ball position to center of the canvas
    function resetBallPosition() {
      ballX = canvas.width / 2 - ballSize / 2;
      ballY = canvas.height / 2 - ballSize / 2;
    }

// Render game elements on canvas
    function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      ctx.fillStyle = '#000';
      ctx.fillRect(0, playerY, playerWidth, playerHeight);

// Draw opponent
      ctx.fillStyle = '#000';
      ctx.fillRect(canvas.width - opponentWidth, opponentY, opponentWidth, opponentHeight);

// Draw ball
      ctx.fillStyle = '#f00';
      ctx.fillRect(ballX, ballY, ballSize, ballSize);

// Draw scores
      ctx.font = '24px Arial';
      ctx.fillText(playerScore, 100, 50);
      ctx.fillText(opponentScore, canvas.width - 120, 50);

if (gamePaused) {
        ctx.font = '48px Arial';
        ctx.fillText('Tap to Start', canvas.width / 2 - 120, canvas.height / 2);
      }

update();

if (!gamePaused) {
        requestAnimationFrame(draw);
      }
    }

// Start the game initially
    startGame();
  </script>
</body>
</html>