Network traffic simulation's game | AI game creator

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

No:9640

188

Network traffic simulation
Developer User4369｜Date and time 23/7/26 18:21:05
Build time 27.959 sec｜Game capacity 4.004KB｜

→ 　

1　

0　

　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>ネットワーク交通量シミュレーション</title>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

<script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        let score = 0;
        
        const car = {
            x: canvas.width / 2,
            y: canvas.height - 100,
            width: 50,
            height: 80,
            speed: 5,
            direction: 0,
            status: 'running',
            move(direction) {
                this.direction = direction;
            },
            draw() {
                ctx.fillStyle = 'blue';
                ctx.fillRect(this.x, this.y, this.width, this.height);
            },
            update() {
                this.x += this.direction * this.speed;
                if (this.x < 0) this.x = 0;
                if (this.x + this.width > canvas.width) {
                    this.x = canvas.width - this.width;
                }
            },
            checkCollision() {
                // Check collision with other cars or obstacles
                // TODO: implement collision detection logic
            },
        };
        
        const obstacles = [];
        
        const spawnObstacle = () => {
            const obstacle = {
                x: Math.floor(Math.random() * (canvas.width - 50)),
                y: 0,
                width: 50,
                height: 50,
                speed: Math.floor(Math.random() * (10 - 3 + 1)) + 3,
                draw() {
                    ctx.fillStyle = 'red';
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                },
                update() {
                    this.y += this.speed;
                },
            };
            obstacles.push(obstacle);
        };
        
        const updateScore = () => {
            ctx.font = '20px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText(`Score: ${score}`, 10, 30);
        };
        
        const gameLoop = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            car.draw();
            car.update();
            
            obstacles.forEach((obstacle, index) => {
                obstacle.draw();
                obstacle.update();
                
                if (obstacle.y > canvas.height) {
                    obstacles.splice(index, 1);
                    score++;
                }
                
                if (
                    obstacle.y + obstacle.height > car.y &&
                    obstacle.y < car.y + car.height &&
                    obstacle.x + obstacle.width > car.x &&
                    obstacle.x < car.x + car.width
                ) {
                    // Game over
                    car.status = 'gameover';
                }
            });
            
            if (car.status === 'running') {
                if (Math.random() < 0.01) {
                    spawnObstacle();
                }
                
                updateScore();
                
                requestAnimationFrame(gameLoop);
            } else {
                ctx.font = '30px Arial';
                ctx.fillStyle = 'black';
                ctx.fillText('Game Over', canvas.width / 2 - 80, canvas.height / 2);
            }
        };
        
        const handleKeyDown = (event) => {
            if (event.key === 'ArrowLeft') {
                car.move(-1);
            } else if (event.key === 'ArrowRight') {
                car.move(1);
            }
        };
        
        const handleKeyUp = (event) => {
            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
                car.move(0);
            }
        };
        
        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('keyup', handleKeyUp);
        
        gameLoop();
    </script>
</body>
</html>