Make a snake game but with enemys's game

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

No:19455

←

Prev Next

→

Make a snake game but with enemys
Developer User8627｜Date and time 23/10/4 3:29:45
Build time 20.283 sec｜Game capacity 4.69KB｜

Script

Sure, here's an example of a simple snake game with enemies implemented using JavaScript within a single HTML file. This game is designed for smartphone operation and uses pictograms:

This HTML file includes a canvas element where the game is drawn. The snake is controlled by arrow keys or touch swipes on a smartphone. The objective is to eat the red enemies to increase the score. The game ends if the snake collides with the boundary or its own body.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple snake game with enemies implemented using JavaScript within a single HTML file. This game is designed for smartphone operation and uses pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Event listeners for smartphone controls
        document.addEventListener("keydown", changeDirection);
        document.addEventListener("swiped-left", function() { changeDirection({ keyCode: 37 }) });
        document.addEventListener("swiped-right", function() { changeDirection({ keyCode: 39 }) });
        document.addEventListener("swiped-up", function() { changeDirection({ keyCode: 38 }) });
        document.addEventListener("swiped-down", function() { changeDirection({ keyCode: 40 }) });

// Game initialization
        snake[0] = { x: 10, y: 10 };

// Main game loop
        function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Move snake
            var headX = snake[0].x;
            var headY = snake[0].y;

if (direction === "right") headX++;
            else if (direction === "left") headX--;
            else if (direction === "up") headY--;
            else if (direction === "down") headY++;

// Check collision with enemy
            if (headX === enemy.x && headY === enemy.y) {
                score++;
                spawnEnemy();
            } else {
                // Remove tail segment
                snake.pop();
            }

// Create new head segment
            var newHead = { x: headX, y: headY };
            snake.unshift(newHead);

// Draw snake
            for (var i = 0; i < snake.length; i++) {
                context.fillStyle = "yellow";
                context.fillRect(snake[i].x * 20, snake[i].y * 20, 20, 20);
            }

// Draw enemy
            context.fillStyle = "red";
            context.fillRect(enemy.x * 20, enemy.y * 20, 20, 20);

// Draw score
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);

// Check game over conditions
            if (headX < 0 || headX >= canvas.width / 20 || headY < 0 || headY >= canvas.height / 20 || checkCollision(headX, headY)) {
                resetGame();
            } else {
                // Repeat draw function every 100 milliseconds
                setTimeout(draw, 100);
            }
        }

// Helper function to check collision with snake body
        function checkCollision(x, y) {
            for (var i = 1; i < snake.length; i++) {
                if (x === snake[i].x && y === snake[i].y) return true;
            }
            return false;
        }

// Helper function to change snake's direction
        function changeDirection(event) {
            var keyCode = event.keyCode;

if (keyCode === 37 && direction !== "right") direction = "left";
            else if (keyCode === 38 && direction !== "down") direction = "up";
            else if (keyCode === 39 && direction !== "left") direction = "right";
            else if (keyCode === 40 && direction !== "up") direction = "down";
        }

// Helper function to spawn enemy in random location
        function spawnEnemy() {
            enemy.x = Math.floor(Math.random() * (canvas.width / 20));
            enemy.y = Math.floor(Math.random() * (canvas.height / 20));
            enemyCount++;
        }

// Helper function to reset the game
        function resetGame() {
            alert("Game Over! Score: " + score);
            score = 0;
            snake = [];
            enemyCount = 0;
            direction = "right";
            snake[0] = { x: 10, y: 10 };
            spawnEnemy();
        }

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