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

No:26987

276

←

Prev Next

→

YouTuber simulator
Developer User13363｜Date and time 23/12/3 20:55:32
Build time 37.006 sec｜Game capacity 3.668KB｜

Script

YouTuber 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>YouTuber Simulator</title>
    <style>
        #score {
            font-size: 30px;
            text-align: center;
        }

.button {
            display: block;
            margin: 20px auto;
            width: 200px;
            height: 80px;
            font-size: 20px;
            text-align: center;
            padding: 20px;
            background-color: #f2f2f2;
            color: #333;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        }

.button:hover {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">YouTuber Simulator</h1>
    <h2 id="score">Score: 0</h2>

// Player Variables
        var playerX = 200;
        var playerY = 550;
        var playerSpeedX = 5;
        var playerImage = new Image();
        playerImage.src = "player.png";

// Obstacle Variables
        var obstacleX = 200;
        var obstacleY = -50;
        var obstacleSpeedY = 2;

// Initialize the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");

setInterval(updateGame, 20); // Update the game every 20 milliseconds

canvas.addEventListener('mousemove', updatePlayerPosition);

drawEverything();
        }

// Update the game
        function updateGame() {
            moveEverything();
            drawEverything();
            checkCollision();
        }

// Move the game elements
        function moveEverything() {
            obstacleY += obstacleSpeedY;

if (obstacleY > canvas.height) {
                obstacleY = -50;
                obstacleX = Math.random() * (canvas.width - 50);
                score++;
            }
        }

// Draw the game elements
        function drawEverything() {
            // Clear the canvas
            colorRect(0, 0, canvas.width, canvas.height, "#f2f2f2");

// Draw the player
            canvasContext.drawImage(playerImage, playerX - 12, playerY - 12);

// Draw the obstacle
            colorRect(obstacleX, obstacleY, 50, 50, "red");

// Draw the score
            canvasContext.fillStyle = "#333";
            canvasContext.font = "24px Arial";
            canvasContext.fillText("Score: " + score, 10, 30);
        }

// Update player position based on mouse movement
        function updatePlayerPosition(event) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;

playerX = event.clientX - rect.left - root.scrollLeft;
        }

// Check collision between player and obstacle
        function checkCollision() {
            if ((playerX + 12 >= obstacleX && playerX - 12 <= obstacleX + 50) && (playerY + 12 >= obstacleY && playerY - 12 <= obstacleY + 50)) {
                alert("Game Over! Your final score is: " + score);
                score = 0;
                obstacleY = -50;
            }
        }

// Helper function to draw rectangles
        function colorRect(leftX, topY, width, height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(leftX, topY, width, height);
        }

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

</html>