protect the octopus from the evil monster's game

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

No:36568

←

Prev Next

→

protect the octopus from the evil monster
Developer User16826｜Date and time 24/1/17 23:31:52
Build time 11.393 sec｜Game capacity 2.689KB｜

Script

Sure, here's a simple game implementation using JavaScript and HTML that you can play as a finished game on a smartphone:

🐙

👾

This implementation creates a game where you need to protect the octopus (represented by a octopus emoji) from the evil monster (represented by a monster emoji) on a smartphone screen. You can move the octopus around by touching and dragging it on the screen. If the octopus collides with the monster, a "Game Over!" message will appear, and the game will reset.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's a simple game implementation using JavaScript and HTML that you can play as a finished game on a smartphone:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Protect the Octopus Game</title>
    <script>
        window.onload = function() {
            var octopus = document.getElementById("octopus");
            var monster = document.getElementById("monster");

function moveOctopus(event) {
                var xPos = event.touches[0].clientX;
                var yPos = event.touches[0].clientY;
                octopus.style.left = xPos + "px";
                octopus.style.top = yPos + "px";

if (checkCollision()) {
                    alert("Game Over!");
                    resetGame();
                }
            }

function checkCollision() {
                var octopusRect = octopus.getBoundingClientRect();
                var monsterRect = monster.getBoundingClientRect();

return !(
                    octopusRect.right < monsterRect.left ||
                    octopusRect.left > monsterRect.right ||
                    octopusRect.bottom < monsterRect.top ||
                    octopusRect.top > monsterRect.bottom
                );
            }

function resetGame() {
                octopus.style.left = "50%";
                octopus.style.top = "50%";
            }

document.addEventListener("touchmove", moveOctopus);
        };
    </script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
        }

#game-container {
            height: 100%;
            position: relative;
            background-color: #f1f1f1;
            cursor: crosshair;
        }

#octopus {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            text-align: center;
        }

#monster {
            position: absolute;
            top: 20%;
            left: 20%;
            font-size: 48px;
        }

</style>
</head>
<body>
    <div id="game-container">
        <div id="octopus">🐙</div>
        <div id="monster">👾</div>
    </div>
</body>
</html>
```