Mountaning cycle rider's game

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

No:46999

123

←

Prev Next

→

Mountaning cycle rider
Developer User20357｜Date and time 24/2/27 3:06:42
Build time 12.062 sec｜Game capacity 3.258KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<html>
<head>
    <title>Mountain Cycle Rider</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        const player = {
            x: 200,
            y: 200,
            size: 20,
            color: 'blue',
            speed: 10
        };
        
        let obstacles = [];
        let score = 0;
        let gameSpeed = 1;
        
        function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.size, player.size);
        }
        
        function createObstacle() {
            const obstacle = {
                x: Math.random() * canvas.width,
                y: 0,
                size: Math.random() * 30 + 10,
                color: 'red'
            };
            obstacles.push(obstacle);
        }
        
        function drawObstacles() {
            for (let i = 0; i < obstacles.length; i++) {
                ctx.fillStyle = obstacles[i].color;
                ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].size, obstacles[i].size);
            }
        }
        
        function updateObstacles() {
            for (let i = 0; i < obstacles.length; i++) {
                obstacles[i].y += gameSpeed;
                if (obstacles[i].y > canvas.height) {
                    score++;
                    obstacles.splice(i, 1);
                }
            }
        }
        
        function checkCollision() {
            for (let i = 0; i < obstacles.length; i++) {
                if (player.x < obstacles[i].x + obstacles[i].size &&
                    player.x + player.size > obstacles[i].x &&
                    player.y < obstacles[i].y + obstacles[i].size &&
                    player.y + player.size > obstacles[i].y) {
                    alert('Game Over! Your score: ' + score);
                    obstacles = [];
                    score = 0;
                    gameSpeed = 1;
                }
            }
        }
        
        function updateScore() {
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText('Score: ' + score, 20, 30);
        }
        
        function updateGameSpeed() {
            if (score % 5 === 0) {
                gameSpeed += 0.2;
            }
        }
        
        function updateGameArea() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawObstacles();
            updateObstacles();
            checkCollision();
            updateScore();
            updateGameSpeed();
            requestAnimationFrame(updateGameArea);
        }
        
        function movePlayer(event) {
            if (event.key === 'ArrowLeft' && player.x > 0) {
                player.x -= player.speed;
            }
            if (event.key === 'ArrowRight' && player.x < canvas.width - player.size) {
                player.x += player.speed;
            }
        }
        
        document.addEventListener('keydown', movePlayer);
        setInterval(createObstacle, 1000);
        updateGameArea();
    </script>
</body>
</html>