A space shooter game crossed with frogger's game

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

No:23626

←

Prev Next

→

A space shooter game crossed with frogger
Developer User10424｜Date and time 23/11/2 8:29:56
Build time 93.48 sec｜Game capacity 6.611KB｜

Script

Sure! Here's a simple implementation of a space shooter game crossed with Frogger using JavaScript, HTML, and pictograms. The game can be played on a smartphone.

Please note that this is a simplified implementation of the game and may require additional styling and artwork to enhance the visual experience. The code uses pictograms in the form of CSS background images for the player sprite and for asteroids. Ensure to replace `'emozi_all/game.png'` with the actual path to your asteroid image. Remember to save the image file as `'emozi_apple.png'` in the same directory as the HTML file for the pictogram to load correctly. Feel free to modify and enhance the game as needed.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple implementation of a space shooter game crossed with Frogger using JavaScript, HTML, and pictograms. The game can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Space Frogger</title>
    <style>
        #player {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .asteroid {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('asteroid.png');
            background-size: cover;
        }
        
        .bullet {
            position: absolute;
            width: 10px;
            height: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

function createPlayer() {
            var playerElement = document.createElement("div");
            playerElement.id = "player";
            player = {
                id: playerId++,
                element: playerElement,
                x: 0
            };
            gameContainer.appendChild(player.element);
        }

function shootBullet() {
            var bullet = document.createElement("div");
            bullet.className = "bullet";
            bullet.style.left = player.x + "px";
            bullet.style.bottom = "75px";
            gameContainer.appendChild(bullet);
            bullets.push(bullet);
        }

function createAsteroid() {
            var asteroid = document.createElement("div");
            asteroid.className = "asteroid";
            asteroid.style.left = Math.floor(Math.random() * (window.innerWidth - 50)) + "px";
            asteroid.style.top = "-50px";
            gameContainer.appendChild(asteroid);
            asteroids.push(asteroid);
        }

// Check for collision between asteroid and player
                    var rect1 = player.element.getBoundingClientRect();
                    var rect2 = asteroid.getBoundingClientRect();
                    if (rect1.top < rect2.bottom &&
                        rect1.bottom > rect2.top &&
                        rect1.left < rect2.right &&
                        rect1.right > rect2.left) {
                        // Collision occurred
                        gameOver();
                        break;
                    }
                }
            }
        }

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

function gameLoop() {
            moveBullets();
            moveAsteroids();
            updateScore();
            if (!gameOverFlag) {
                requestAnimationFrame(gameLoop);
            }
        }

function startGame() {
            gameContainer.innerHTML = "";
            createPlayer();
            gameContainer.addEventListener("mousemove", movePlayer);
            gameContainer.addEventListener("touchmove", movePlayer);
            gameContainer.addEventListener("click", shootBullet);
            gameLoop = requestAnimationFrame(gameLoop);
        }

function gameOver() {
            gameContainer.removeEventListener("mousemove", movePlayer);
            gameContainer.removeEventListener("touchmove", movePlayer);
            gameContainer.removeEventListener("click", shootBullet);
            cancelAnimationFrame(gameLoop);
            gameContainer.innerHTML = "<h1>Game Over!</h1><h2>Your score: " + score + "</h2>";
            gameOverFlag = true;
        }

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

Remember to save the image file as `'asteroid.png'` in the same directory as the HTML file for the pictogram to load correctly.

Feel free to modify and enhance the game as needed.