There is one monster and one hero and heroine an a car's game

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

No:25676

←

Prev Next

→

There is one monster and one hero and heroine an a..ALL
Developer User12611｜Date and time 23/11/23 21:00:43
Build time 125.452 sec｜Game capacity 4.86KB｜

Script

Sure! Here's a simple game implementation using JavaScript within a single HTML file, featuring a monster, a hero, a heroine, and a car. The game is played by controlling the hero and heroine's car to dodge the monster.

In this game, you can control the hero and heroine's cars using the arrow keys for the hero and the W, A, S, D keys for the heroine. The objective is to maneuver the cars and dodge the monster. If either the hero's car or the heroine's car collides with the monster, the game is over and a message will be displayed. You can replace the placeholder "emozi_all/game.png" with an actual image file of a car to use as visual representations.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Monster Chase Game</title>
</head>
<body>
    <script>
        // JavaScript code for the game

// Create canvas and context for drawing
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild(canvas);

// Define game objects
        var hero = { x: canvas.width / 2, y: canvas.height - 100, width: 50, height: 50 };
        var heroine = { x: canvas.width / 2, y: canvas.height - 100, width: 50, height: 50 };
        var carImage = new Image();
        carImage.src = "car.png"; // Replace with a proper image file

var monster = { x: Math.random() * (canvas.width - 50), y: 50, width: 50, height: 50 };

// Check if hero or heroine's car collided with the monster
        function checkCollision() {
            if (hero.x < monster.x + monster.width &&
                hero.x + hero.width > monster.x &&
                hero.y < monster.y + monster.height &&
                hero.y + hero.height > monster.y) {
                alert("Game Over! The monster caught you.");
                location.reload(); // Restart the game after game over
            }

if (heroine.x < monster.x + monster.width &&
                heroine.x + heroine.width > monster.x &&
                heroine.y < monster.y + monster.height &&
                heroine.y + heroine.height > monster.y) {
                alert("Game Over! The monster caught you.");
                location.reload(); // Restart the game after game over
            }
        }

// Update game logic
        function update() {
            if (keyState['ArrowUp'] && hero.y > 0) {
                hero.y -= 7; // Move hero's car up
            }

if (keyState['ArrowDown'] && hero.y < canvas.height - hero.height) {
                hero.y += 7; // Move hero's car down
            }

if (keyState['ArrowLeft'] && hero.x > 0) {
                hero.x -= 7; // Move hero's car left
            }

if (keyState['ArrowRight'] && hero.x < canvas.width - hero.width) {
                hero.x += 7; // Move hero's car right
            }

if (keyState['w'] && heroine.y > 0) {
                heroine.y -= 7; // Move heroine's car up
            }

if (keyState['s'] && heroine.y < canvas.height - heroine.height) {
                heroine.y += 7; // Move heroine's car down
            }

if (keyState['a'] && heroine.x > 0) {
                heroine.x -= 7; // Move heroine's car left
            }

if (keyState['d'] && heroine.x < canvas.width - heroine.width) {
                heroine.x += 7; // Move heroine's car right
            }

checkCollision();

draw(); // Redraw the game screen
        }

// Draw game objects on the canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

context.drawImage(carImage, hero.x, hero.y, hero.width, hero.height);
            context.drawImage(carImage, heroine.x, heroine.y, heroine.width, heroine.height);

context.fillStyle = "red";
            context.fillRect(monster.x, monster.y, monster.width, monster.height);
        }

// Map key codes to key names
        var keyMap = {
            38: 'ArrowUp',
            40: 'ArrowDown',
            37: 'ArrowLeft',
            39: 'ArrowRight',
            87: 'w',
            83: 's',
            65: 'a',
            68: 'd'
        };

// Track current state of keys (pressed or not)
        var keyState = {};

// Add event listeners to capture key state changes
        document.addEventListener('keydown', function(event) {
            keyState[keyMap[event.keyCode]] = true;
        });

document.addEventListener('keyup', function(event) {
            keyState[keyMap[event.keyCode]] = false;
        });

// Start the game - call the update function in a loop
        setInterval(update, 20); // Refresh every 20 milliseconds
    </script>
</body>
</html>
```

In this game, you can control the hero and heroine's cars using the arrow keys for the hero and the W, A, S, D keys for the heroine. The objective is to maneuver the cars and dodge the monster. If either the hero's car or the heroine's car collides with the monster, the game is over and a message will be displayed. You can replace the placeholder "car.png" with an actual image file of a car to use as visual representations.