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

No:41297

←

Prev Next

→

Autorennen in der Wüste
Developer User18499｜Date and time 24/2/6 20:25:41
Build time 12.849 sec｜Game capacity 3.132KB｜

Script

Autorennen in der Wüste

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Autorennen in der Wüste</title>
</head>
<body>
<h1>Autorennen in der Wüste</h1>
<canvas id="gameCanvas" width="800" height="600"></canvas>

// Car properties
var carWidth = 50;
var carHeight = 100;
var carSpeed = 5;

// Obstacle properties
var obstacleWidth = 50;
var obstacleHeight = 50;
var obstacleSpeed = 4;
var maxObstacles = 10;

// Game properties
var gameInterval;
var gameRunning = false;

// Game initialization
function gameInit() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
    
    document.addEventListener('keydown', handleKeyPress);
    
    car = { x: canvas.width / 2 - carWidth / 2, y: canvas.height - carHeight - 10 };
    obstacles = [];
    score = 0;
    
    gameInterval = setInterval(update, 20);
    gameRunning = true;
}

// Handle key press events
function handleKeyPress(event) {
    if (event.keyCode === 37) {
        car.x -= carSpeed; // Move left
    } else if (event.keyCode === 39) {
        car.x += carSpeed; // Move right
    }
}

// Update game state
function update() {
    moveObstacles();
    checkCollision();
    draw();
}

// Move obstacles
function moveObstacles() {
    for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].y += obstacleSpeed;
    }
    
    if (obstacles.length < maxObstacles) {
        var newObstacle = { x: Math.floor(Math.random() * (canvas.width - obstacleWidth)), y: -obstacleHeight };
        obstacles.push(newObstacle);
    }
    
    for (var j = 0; j < obstacles.length; j++) {
        if (obstacles[j].y > canvas.height) {
            obstacles.splice(j, 1); // Remove obstacle from array once it's passed the canvas
        }
    }
}

// Check collision between car and obstacles
function checkCollision() {
    for (var k = 0; k < obstacles.length; k++) {
        if (car.x < obstacles[k].x + obstacleWidth &&
            car.x + carWidth > obstacles[k].x &&
            car.y < obstacles[k].y + obstacleHeight &&
            car.y + carHeight > obstacles[k].y) {
                gameRunning = false;
                clearInterval(gameInterval);
        }
    }
}

// Draw the game
function draw() {
    // Clear the canvas
    canvasContext.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw the car
    canvasContext.fillStyle = 'blue';
    canvasContext.fillRect(car.x, car.y, carWidth, carHeight);
    
    // Draw the obstacles
    canvasContext.fillStyle = 'red';
    for (var m = 0; m < obstacles.length; m++) {
        canvasContext.fillRect(obstacles[m].x, obstacles[m].y, obstacleWidth, obstacleHeight);
    }
    
    // Draw score
    canvasContext.fillStyle = 'black';
    canvasContext.font = '20px Arial';
    canvasContext.fillText('Score: ' + score, 10, 30);
    
    if (!gameRunning) {
        canvasContext.fillStyle = 'black';
        canvasContext.font = '40px Arial';
        canvasContext.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
    }
}

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