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

No:41539

←

Prev Next

→

Survival games
Developer User18615｜Date and time 24/2/8 6:51:15
Build time 12.905 sec｜Game capacity 4.03KB｜

Script

Sure, I can create a simple survival game using JavaScript and HTML. Here's an example implementation as a single HTML file:

Survival Game

Score: 0

Survive!

Instructions:

Use the buttons below to move the player:

In this simple survival game, the player can move around using the provided buttons (up, down, left, right). The player's objective is to survive by avoiding obstacles and collecting food and water items. The score is updated whenever the player moves or collects items. The game uses pictogram images for the player, food, and water.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure, I can create a simple survival game using JavaScript and HTML. Here's an example implementation as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Survival Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

#game {
            width: 300px;
            margin: 0 auto;
        }

#instructions {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game">
        <h1>Survival Game</h1>
        <img src="pictogram1.png" alt="Player" id="player">
        <img src="pictogram2.png" alt="Food" id="food">
        <img src="pictogram3.png" alt="Water" id="water">
        <p id="score">Score: 0</p>
        <p id="status">Survive!</p>
    </div>

<div id="instructions">
        <h3>Instructions:</h3>
        <p>Use the buttons below to move the player:</p>
        <button onclick="movePlayer('up')">Up</button>
        <button onclick="movePlayer('down')">Down</button>
        <button onclick="movePlayer('left')">Left</button>
        <button onclick="movePlayer('right')">Right</button>
    </div>

function movePlayer(direction) {
            var player = document.getElementById("player");
            var currentPosition = getPlayerPosition();

if (direction === "up") {
                if (currentPosition.y > 0) {
                    player.style.top = (currentPosition.y - 50) + "px";
                    updateScore(1);
                }
            } else if (direction === "down") {
                if (currentPosition.y < 250) {
                    player.style.top = (currentPosition.y + 50) + "px";
                    updateScore(1);
                }
            } else if (direction === "left") {
                if (currentPosition.x > 0) {
                    player.style.left = (currentPosition.x - 50) + "px";
                    updateScore(1);
                }
            } else if (direction === "right") {
                if (currentPosition.x < 250) {
                    player.style.left = (currentPosition.x + 50) + "px";
                    updateScore(1);
                }
            }

checkCollision();
        }

function getPlayerPosition() {
            var player = document.getElementById("player");
            var playerRect = player.getBoundingClientRect();
            return { x: playerRect.left, y: playerRect.top };
        }

function updateScore(points) {
            score += points;
            var scoreElement = document.getElementById("score");
            scoreElement.textContent = "Score: " + score;
        }

function checkCollision() {
            var player = document.getElementById("player");
            var food = document.getElementById("food");
            var water = document.getElementById("water");

var playerRect = player.getBoundingClientRect();
            var foodRect = food.getBoundingClientRect();
            var waterRect = water.getBoundingClientRect();

if (isColliding(playerRect, foodRect)) {
                player.src = "pictogram4.png";
                updateScore(10);
            } else if (isColliding(playerRect, waterRect)) {
                player.src = "pictogram5.png";
                updateScore(10);
            }
        }

function isColliding(rect1, rect2) {
            return (
                rect1.left < rect2.right &&
                rect1.right > rect2.left &&
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top
            );
        }
    </script>
</body>
</html>
```