AI game creator

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

No:20799

←

Prev Next

→

Friday Night funkin
Developer User9148｜Date and time 23/10/11 2:02:58
Build time 23.482 sec｜Game capacity 2.884KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Friday Night Funkin' Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Player character position and size
    let playerX = 350;
    let playerY = 500;
    const playerWidth = 100;
    const playerHeight = 100;

// Arrow positions and sizes
    const arrowWidth = 100;
    const arrowHeight = 100;
    let arrowX;
    let arrowY = -100;

// Game speed and score
    let gameSpeed = 3;
    let score = 0;

// Arrow objects
    const arrows = [
      { x: 250, y: -100 },
      { x: 350, y: -100 },
      { x: 450, y: -100 },
      { x: 550, y: -100 }
    ];

// Event listener for arrow key press
    document.addEventListener("keydown", movePlayer);

// Function to move the player character
    function movePlayer(event) {
      if (event.key === "ArrowLeft" && playerX > 0) {
        playerX -= 100;
      } else if (event.key === "ArrowRight" && playerX + playerWidth < canvas.width) {
        playerX += 100;
      }
    }

// Function to draw player character
    function drawPlayer() {
      ctx.fillStyle = "blue";
      ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
    }

// Function to draw arrows on the screen
    function drawArrows() {
      for (let i = 0; i < arrows.length; i++) {
        const { x, y } = arrows[i];

ctx.fillStyle = "red";
        ctx.fillRect(x, y, arrowWidth, arrowHeight);
      }
    }

// Function to move arrows downwards
    function moveArrows() {
      for (let i = 0; i < arrows.length; i++) {
        arrows[i].y += gameSpeed;

if (arrows[i].y > canvas.height) {
          arrows[i].y = -100;
          score++;
        }

// Collision detection
        if (
          arrows[i].y + arrowHeight > playerY &&
          arrows[i].y < playerY + playerHeight &&
          arrows[i].x + arrowWidth > playerX &&
          arrows[i].x < playerX + playerWidth
        ) {
          gameOver();
        }
      }
    }

// Function to update the screen and keep the game running
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawArrows();
      moveArrows();

ctx.fillStyle = "black";
      ctx.font = "24px Arial";
      ctx.fillText("Score: " + score, 10, 30);

requestAnimationFrame(update);
    }

// Function to end the game
    function gameOver() {
      alert("Game Over! Your score is: " + score);
      location.reload(); // Reload the page to restart the game
    }

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