AI game creator

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

No:15175

202

←

Prev Next

→

Snake Game
Developer User6546｜Date and time 23/9/6 23:35:20
Build time 83.948 sec｜Game capacity 5.09KB｜

Script

Sure, here's a simple implementation of the classic Snake game using JavaScript. You can copy this code into a single HTML file and enclose it within script tags. This version of the game is designed to be played on a smartphone and uses pictogram-like characters.

To play the game, simply copy the code into an HTML file and open it in a web browser on your smartphone. Use the arrow keys on your virtual keyboard to control the snake and avoid collisions with the walls and its own body. The objective is to eat the apples that appear randomly on the screen and grow the snake's body while avoiding game over. Enjoy playing the Snake game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: black;
        color: white;
        font-family: monospace;
        text-align: center;
        margin-top: 100px;
    }
</style>
</head>
<body>
<script>
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var width = 320;
    var height = 320;
    var blockSize = 20;
    var widthInBlocks = width / blockSize;
    var heightInBlocks = height / blockSize;
    var score = 0;
    var timeout;
    var delay = 100;
    var direction = "right";
    var gameOver = false;

var apple = {
        x: Math.floor(Math.random() * widthInBlocks),
        y: Math.floor(Math.random() * heightInBlocks)
    };

var snake = {
        body: [
            {x: 5, y: 5},
            {x: 4, y: 5},
            {x: 3, y: 5}
        ]
    };

function init() {
        canvas.width = width;
        canvas.height = height;
        canvas.style.border = "1px solid white";
        document.body.appendChild(canvas);
        drawScore();
        drawSnake();
        drawApple();
        document.addEventListener("keydown", changeDirection);
        timeout = setTimeout(gameLoop, delay);
    }

function drawBlock(ctx, position) {
        var x = position.x * blockSize;
        var y = position.y * blockSize;
        ctx.fillRect(x, y, blockSize, blockSize);
    }

function drawSnake() {
        snake.body.forEach(function (block) {
            drawBlock(ctx, block);
        });
    }

function drawApple() {
        drawBlock(ctx, apple);
    }

function drawScore() {
        ctx.font = "20px monospace";
        ctx.fillText("Score: " + score, 20, 30);
    }

function gameLoop() {
        ctx.clearRect(0, 0, width, height);
        drawScore();
        moveSnake();
        drawSnake();

if (gameOver) {
            clearTimeout(timeout);
            ctx.font = "40px monospace";
            ctx.fillText("Game Over", 75, height / 2 - 40);
            ctx.fillText("Score: " + score, 100, height / 2 + 10);
        } else {
            timeout = setTimeout(gameLoop, delay);
        }
    }

function moveSnake() {
        var newHead = {
            x: snake.body[0].x,
            y: snake.body[0].y
        };

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

if (isCollision(newHead)) {
            gameOver = true;
            return;
        }

snake.body.unshift(newHead);

if (newHead.x === apple.x && newHead.y === apple.y) {
            score++;
            delay -= 2;
            createApple();
        } else {
            snake.body.pop();
        }
    }

function isCollision(head) {
        if (
            head.x < 0 ||
            head.x >= widthInBlocks ||
            head.y < 0 ||
            head.y >= heightInBlocks
        ) {
            return true;
        }

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

function changeDirection(event) {
        var keys = {
            37: "left",
            38: "up",
            39: "right",
            40: "down"
        };

if (event.keyCode in keys) {
            if (
                (direction === "up" && keys[event.keyCode] !== "down") ||
                (direction === "down" && keys[event.keyCode] !== "up") ||
                (direction === "left" && keys[event.keyCode] !== "right") ||
                (direction === "right" && keys[event.keyCode] !== "left")
            ) {
                direction = keys[event.keyCode];
            }
        }
    }

function createApple() {
        apple = {
            x: Math.floor(Math.random() * widthInBlocks),
            y: Math.floor(Math.random() * heightInBlocks)
        };

for (var i = 0; i < snake.body.length; i++) {
            if (apple.x === snake.body[i].x && apple.y === snake.body[i].y) {
                createApple();
                break;
            }
        }
    }

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

To play the game, simply copy the code into an HTML file and open it in a web browser on your smartphone. Use the arrow keys on your virtual keyboard to control the snake and avoid collisions with the walls and its own body. The objective is to eat the apples that appear randomly on the screen and grow the snake's body while avoiding game over.

Enjoy playing the Snake game!