AI game creator

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

No:24010

←

Prev Next

→

Slender game
Developer User11245｜Date and time 23/11/5 5:38:16
Build time 84.81 sec｜Game capacity 4.03KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Slender Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

canvas {
            display: block;
            background-color: #000000;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

// Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;

// Game variables
    const playerSize = 50;
    const playerSpeed = 10;
    const slendermanSize = 100;
    const numPages = 8;

let playerX = canvasWidth / 2;
    let playerY = canvasHeight / 2;
    let slendermanX = 0;
    let slendermanY = 0;
    let playerScore = 0;

// Generate random position for Slenderman
    function generateSlendermanPosition() {
        slendermanX = Math.random() * (canvasWidth - slendermanSize);
        slendermanY = Math.random() * (canvasHeight - slendermanSize);
    }

// Check collisions between two rectangles
    function checkCollision(rect1, rect2) {
        if (rect1.x < rect2.x + rect2.width &&
            rect1.x + rect1.width > rect2.x &&
            rect1.y < rect2.y + rect2.height &&
            rect1.y + rect1.height > rect2.y) {
            return true;
        }
        return false;
    }

// Render game objects on the canvas
    function render() {
        // Clear canvas
        context.clearRect(0, 0, canvasWidth, canvasHeight);

// Draw player
        context.fillStyle = '#FF0000';
        context.fillRect(playerX, playerY, playerSize, playerSize);

// Draw Slenderman
        context.fillStyle = '#0000FF';
        context.fillRect(slendermanX, slendermanY, slendermanSize, slendermanSize);

// Display player score
        context.fillStyle = '#FFFFFF';
        context.font = '24px Arial';
        context.fillText(`Score: ${playerScore}/${numPages}`, 10, 30);
    }

// Handle player movement
    function movePlayer(event) {
        const keyPressed = event.keyCode;
        if (keyPressed === 37 && playerX > 0) {   // Left arrow key
            playerX -= playerSpeed;
        } else if (keyPressed === 38 && playerY > 0) {   // Up arrow key
            playerY -= playerSpeed;
        } else if (keyPressed === 39 && playerX < canvasWidth - playerSize) {  // Right arrow key
            playerX += playerSpeed;
        } else if (keyPressed === 40 && playerY < canvasHeight - playerSize) {  // Down arrow key
            playerY += playerSpeed;
        }

// Check if player has collided with Slenderman
        const playerRect = {
            x: playerX,
            y: playerY,
            width: playerSize,
            height: playerSize
        };

const slendermanRect = {
            x: slendermanX,
            y: slendermanY,
            width: slendermanSize,
            height: slendermanSize
        };

if (checkCollision(playerRect, slendermanRect)) {
            alert('Game Over! Slenderman got you!');
            resetGame();
        }

// Check if player has collected all pages
        if (playerScore === numPages) {
            alert('Congratulations! You collected all the pages!');
            resetGame();
        }

render();
    }

// Handle player collecting page
    function collectPage() {
        playerScore++;
        generateSlendermanPosition();
        render();
    }

// Reset game state
    function resetGame() {
        playerX = canvasWidth / 2;
        playerY = canvasHeight / 2;
        playerScore = 0;
        generateSlendermanPosition();
        render();
    }

// Generate initial Slenderman position
    generateSlendermanPosition();

// Listen for arrow key presses
    window.addEventListener('keydown', movePlayer);

// Render initial game state
    render();
</script>
</body>
</html>