A rough like snake game's game

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

No:42386

←

Prev Next

→

A rough like snake game
Developer User18718｜Date and time 24/2/11 16:08:17
Build time 14.169 sec｜Game capacity 4.647KB｜

Script

Sure, here's a rough implementation of a snake game using HTML, JavaScript, and pictograms:

Please note that a complete snake game implementation can be more complex with additional features and optimizations. This is just a rough implementation to give you an idea of how it could be done. You can run this code in a browser and play the game using keyboard arrow keys to control the snake movement in four directions.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, here's a rough implementation of a snake game using HTML, JavaScript, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        body {
            background-color: #222;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

canvas {
            border: 1px solid #333;
            background-color: #111;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const tileSize = 20;
        const tileCount = canvas.width / tileSize;
        let snake = [];
        snake.push({ x: 10, y: 10 });
        let food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
        let score = 0;
        let direction = "";

// Handle keyboard input
        document.addEventListener("keydown", changeDirection);

// Game loop
        function gameLoop() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
            drawScore();

setTimeout(gameLoop, 200);
        }

function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

function moveSnake() {
            const head = { x: snake[0].x, y: snake[0].y };

if (direction === "LEFT") {
                head.x -= 1;
            } else if (direction === "UP") {
                head.y -= 1;
            } else if (direction === "RIGHT") {
                head.x += 1;
            } else if (direction === "DOWN") {
                head.y += 1;
            }

snake.unshift(head);

if (snake[0].x === food.x && snake[0].y === food.y) {
                score += 10;
                generateFood();
            } else {
                snake.pop();
            }
        }

function drawSnake() {
            snake.forEach(segment => {
                drawPictogram(segment.x, segment.y, snakePictogram);
            });
        }

function generateFood() {
            food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };

snake.forEach(segment => {
                if (segment.x === food.x && segment.y === food.y) {
                    generateFood();
                }
            });
        }

function drawFood() {
            drawPictogram(food.x, food.y, foodPictogram);
        }

function checkCollision() {
            const head = snake[0];

if (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= tileCount ||
                head.y >= tileCount ||
                snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                gameOver();
            }
        }

function drawScore() {
            context.fillStyle = "#fff";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 20);
        }

function drawPictogram(x, y, pictogram) {
            context.fillStyle = "#fff";
            context.font = "20px Arial";
            context.fillText(pictogram, x * tileSize, y * tileSize + tileSize);
        }

function gameOver() {
            clearInterval(gameLoop);
            alert("Game Over! Your score is: " + score);
            location.reload();
        }

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