Create a snake game and eating coconut to grow bigger in a cage's game

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

No:25199

110

←

Prev Next

→

Create a snake game and eating coconut to grow big..ALL
Developer User12288｜Date and time 23/11/19 2:38:44
Build time 90.566 sec｜Game capacity 5.217KB｜

Script

Sure, here's the implementation of a simple snake game where the snake grows bigger by eating coconuts within a cage. The game is designed to be played on a smartphone using pictograms.

Please note that you need to have a coconut image named "emozi_all/coconut.png" in the same directory as the HTML file for the coconut pictogram to be displayed correctly.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure, here's the implementation of a simple snake game where the snake grows bigger by eating coconuts within a cage. The game is designed to be played on a smartphone using pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        
        .snake, .coconut {
            width: 20px;
            height: 20px;
            position: absolute;
        }
        
        .snake {
            background-color: green;
        }
        
        .coconut {
            background-image: url('coconut.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Initialize game
        function startGame() {
            createSnake();
            placeCoconut();
            setInterval(moveSnake, 200);
            window.addEventListener("keydown", changeDirection);
        }

// Create snake
        function createSnake() {
            snake.forEach((segment) => {
                var div = document.createElement("div");
                div.className = "snake";
                div.style.left = segment.x + "px";
                div.style.top = segment.y + "px";
                gameBoard.appendChild(div);
            });
        }

// Place coconut at random position
        function placeCoconut() {
            var x = Math.floor(Math.random() * (gameBoard.offsetWidth - 20));
            var y = Math.floor(Math.random() * (gameBoard.offsetHeight - 20));
            coconut.x = x - (x % 20);
            coconut.y = y - (y % 20);

var div = document.createElement("div");
            div.className = "coconut";
            div.style.left = coconut.x + "px";
            div.style.top = coconut.y + "px";
            gameBoard.appendChild(div);
        }

// Move snake
        function moveSnake() {
            var head = Object.assign({}, snake[0]);

switch (direction) {
                case "up":
                    head.y -= 20;
                    break;
                case "down":
                    head.y += 20;
                    break;
                case "left":
                    head.x -= 20;
                    break;
                case "right":
                    head.x += 20;
                    break;
            }

snake.unshift(head);

if (head.x === coconut.x && head.y === coconut.y) {
                score++;
                gameBoard.removeChild(gameBoard.lastChild);
                placeCoconut();
            } else {
                snake.pop();
            }

// Check for collision
            if (head.x < 0 || head.x >= gameBoard.offsetWidth || head.y < 0 || head.y >= gameBoard.offsetHeight || checkSelfCollision()) {
                alert("Game Over. Your score: " + score);
                resetGame();
            } else {
                updateSnake();
            }
        }

// Update snake position
        function updateSnake() {
            var segments = document.getElementsByClassName("snake");

for (var i = segments.length - 1; i > 0; i--) {
                segments[i].style.left = snake[i].x + "px";
                segments[i].style.top = snake[i].y + "px";
            }

segments[0].style.left = snake[0].x + "px";
            segments[0].style.top = snake[0].y + "px";
        }

// Check if snake collides with itself
        function checkSelfCollision() {
            var head = snake[0];

for (var i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }

return false;
        }

// Change snake direction
        function changeDirection(event) {
            var key = event.keyCode;

if (key === 37 && direction !== "right") {
                direction = "left";
            } else if (key === 38 && direction !== "down") {
                direction = "up";
            } else if (key === 39 && direction !== "left") {
                direction = "right";
            } else if (key === 40 && direction !== "up") {
                direction = "down";
            }
        }
        
        // Reset game
        function resetGame() {
            snake = [{x: 0, y: 0}];
            direction = "right";
            score = 0;
            while (gameBoard.lastChild) {
                gameBoard.removeChild(gameBoard.lastChild);
            }
            startGame();
        }
        
        // Start the game
        startGame();
    </script>
</body>
</html>
```

Please note that you need to have a coconut image named "coconut.png" in the same directory as the HTML file for the coconut pictogram to be displayed correctly.