AI game creator

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

No:16204

118

←

Prev Next

→

Snake game
Developer User7183｜Date and time 23/9/16 17:51:55
Build time 36.023 sec｜Game capacity 5.697KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file with JavaScript, enclosed in script tags:

To play the game, you can copy and save the above code in a single `.html` file, and then open it in a web browser on your smartphone. You can control the snake's direction using the arrow keys on your virtual keyboard. The objective of the game is to eat the red fruits (represented by squares) to increase your score. If the snake hits its own body, the game will restart and the score will be reset to zero.

←

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 implemented as a single HTML file with JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #fff;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        const scale = 20;
        const rows = canvas.height / scale;
        const columns = canvas.width / scale;
        
        let score = 0;
        
        let snake;
        let fruit;
        
        function init() {
            snake = new Snake();
            fruit = new Fruit();
            fruit.pickLocation();
            
            setInterval(() => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                fruit.draw();
                snake.update();
                snake.draw();
                
                if (snake.eat(fruit)) {
                    fruit.pickLocation();
                    score++;
                }
                
                if (snake.checkCollision()) {
                    snake.reset();
                    score = 0;
                }
                
                drawScore();
                
            }, 250);
            
            window.addEventListener("keydown", ((evt) => {
                const direction = evt.key.replace("Arrow", "");
                snake.changeDirection(direction);
            }));
        }
        
        function drawScore() {
            ctx.fillStyle = "black";
            ctx.font = "15px Arial";
            ctx.fillText("Score: " + score, canvas.width-70, 20);
        }
        
        class Snake {
            constructor() {
                this.x = 0;
                this.y = 0;
                this.xSpeed = scale;
                this.ySpeed = 0;
                this.total = 1;
                this.tail = [];
            }
            
            draw() {
                ctx.fillStyle = "green";
                for (let i = 0; i < this.tail.length; i++) {
                    ctx.fillRect(this.tail[i].x, this.tail[i].y, scale, scale);
                }
                
                ctx.fillRect(this.x, this.y, scale, scale);
            }
            
            update() {
                for (let i = 0; i < this.tail.length - 1; i++) {
                    this.tail[i] = this.tail[i+1];
                }
                
                this.tail[this.total - 1] = { x: this.x, y: this.y };
                
                this.x += this.xSpeed;
                this.y += this.ySpeed;
                
                if (this.x > canvas.width) {
                    this.x = 0;
                } else if (this.x < 0) {
                    this.x = canvas.width;
                }
                
                if (this.y > canvas.height) {
                    this.y = 0;
                } else if (this.y < 0) {
                    this.y = canvas.height;
                }
            }
            
            changeDirection(direction) {
                switch (direction) {
                    case "Up":
                        this.xSpeed = 0;
                        this.ySpeed = -scale;
                        break;
                    case "Down":
                        this.xSpeed = 0;
                        this.ySpeed = scale;
                        break;
                    case "Left":
                        this.xSpeed = -scale;
                        this.ySpeed = 0;
                        break;
                    case "Right":
                        this.xSpeed = scale;
                        this.ySpeed = 0;
                        break;
                }
            }
            
            eat(fruit) {
                if (this.x === fruit.x && this.y === fruit.y) {
                    this.total++;
                    return true;
                }
                return false;
            }
            
            checkCollision() {
                for (let i = 0; i < this.tail.length; i++) {
                    if (this.x === this.tail[i].x && this.y === this.tail[i].y) {
                        return true;
                    }
                }
                return false;
            }
            
            reset() {
                this.x = 0;
                this.y = 0;
                this.xSpeed = scale;
                this.ySpeed = 0;
                this.total = 1;
                this.tail = [];
            }
        }
        
        class Fruit {
            constructor() {
                this.x;
                this.y;
            }
            
            pickLocation() {
                this.x = (Math.floor(Math.random() * rows)) * scale;
                this.y = (Math.floor(Math.random() * columns)) * scale;
            }
            
            draw() {
                ctx.fillStyle = "red";
                ctx.fillRect(this.x, this.y, scale, scale);
            }
        }
        
        init();
    </script>
</body>
</html>
```