A simple game of any kind but with tricks to make it look 3d's game

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

No:33677

111

←

Prev Next

→

A simple game of any kind but with tricks to make ..ALL
Developer User3550｜Date and time 24/1/6 4:17:23
Build time 36.661 sec｜Game capacity 4.55KB｜

Script

Sure! Here's a simple game called "Pictogram Runner" that uses JavaScript to create a 3D effect and can be played on a smartphone. It's a running game where the player controls a character and avoids obstacles. Pictograms are used for visual representations.

To make it look more 3D, you can replace the 'emozi_all/player.png' and 'emozi_apple.png' with pictogram images that give the illusion of a 3D effect. Just ensure that the images are appropriately named and placed in the same directory as the HTML file. Please note that you'll need to replace 'emozi_all/player.png' and 'emozi_rabbit.png' with your own image URLs or image files to see the pictograms in the game. The code provided is a framework to get you started with the mechanics and functionality of the game. You can further enhance it by adding scoring, power-ups, or additional obstacles based on your game design preferences.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Runner</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            perspective: 800px;
            overflow: hidden;
        }
        
        #player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 50px;
            width: 50px;
            background: url('player.png') no-repeat center center;
            background-size: contain;
            transition: transform 0.1s ease-in-out;
        }
        
        .obstacle {
            position: absolute;
            bottom: 0;
            height: 50px;
            width: 50px;
            background: url('obstacle.png') no-repeat center center;
            background-size: contain;
            transition: transform 0.1s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>

// Function to generate random obstacles
        function generateObstacle() {
            var obstacle = document.createElement("div");
            obstacle.className = "obstacle";
            obstacle.style.left = Math.floor(Math.random() * 80) + 10 + "%";
            obstacles.push(obstacle);
            gameContainer.appendChild(obstacle);
        }

// Function to move the player left
        function moveLeft() {
            var left = parseInt(player.style.left) || 50;
            if (left > 10)
                player.style.left = (left - 5) + "%";
        }

// Function to move the player right
        function moveRight() {
            var left = parseInt(player.style.left) || 50;
            if (left < 90)
                player.style.left = (left + 5) + "%";
        }

// Function to check for collision and end the game
        function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            obstacles.forEach(function (obstacle) {
                var obstacleRect = obstacle.getBoundingClientRect();
                if (!(playerRect.right < obstacleRect.left ||
                    playerRect.left > obstacleRect.right ||
                    playerRect.bottom < obstacleRect.top ||
                    playerRect.top > obstacleRect.bottom)) {
                    endGame();
                }
            });
        }

// Function to end the game
        function endGame() {
            clearInterval(obstacleInterval);
            document.removeEventListener("keydown", handleKeyPress);
            alert("Game Over!");
        }

// Function to start the game
        function startGame() {
            document.addEventListener("keydown", handleKeyPress);

obstacleInterval = setInterval(function () {
                generateObstacle();
            }, 1000);

setInterval(function () {
                checkCollision();
            }, 100);

setTimeout(function () {
                endGame();
            }, 30000); // Ends the game after 30 seconds
        }

// Function to handle keypress events
        function handleKeyPress(e) {
            e.preventDefault();

if (e.keyCode === 37) { // Left Arrow
                moveLeft();
            } else if (e.keyCode === 39) { // Right Arrow
                moveRight();
            }
        }

startGame();
    </script>
</body>
</html>
```

To make it look more 3D, you can replace the 'player.png' and 'obstacle.png' with pictogram images that give the illusion of a 3D effect. Just ensure that the images are appropriately named and placed in the same directory as the HTML file.

Please note that you'll need to replace 'player.png' and 'obstacle.png' with your own image URLs or image files to see the pictograms in the game. The code provided is a framework to get you started with the mechanics and functionality of the game. You can further enhance it by adding scoring, power-ups, or additional obstacles based on your game design preferences.