*Snake with portals*'s game

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

No:44795

114

←

Prev Next

→

*Snake with portals*
Developer User19470｜Date and time 24/2/19 5:50:52
Build time 13.959 sec｜Game capacity 4.125KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake with Portals</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

canvas {
        display: block;
        margin: 0 auto;
        background-color: #FFF;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const tileSize = 20;
    const portalSize = 40;
    const snakeColor = '#33cc33';
    const portalColor = '#ff0066';
    
    let snake = [{x: 10, y: 10}];
    let direction = 'right';
    let portals = [{x: 5, y: 5}, {x: 15, y: 15}];
    let score = 0;
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw snake
        ctx.fillStyle = snakeColor;
        for (let i = 0; i < snake.length; i++) {
            ctx.fillRect(snake[i].x * tileSize, snake[i].y * tileSize, tileSize, tileSize);
        }
        
        // Draw portals
        ctx.fillStyle = portalColor;
        for (let i = 0; i < portals.length; i++) {
            ctx.fillRect(portals[i].x * tileSize, portals[i].y * tileSize, portalSize, portalSize);
        }
        
        // Draw score
        ctx.fillStyle = '#FFF';
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 30);
    }
    
    function update() {
        const head = {x: snake[0].x, y: snake[0].y};
        
        // Move snake
        switch(direction) {
            case 'up':
                head.y -= 1;
                break;
            case 'down':
                head.y += 1;
                break;
            case 'left':
                head.x -= 1;
                break;
            case 'right':
                head.x += 1;
                break;
        }

// Teleport snake if it goes into a portal
        for (let i = 0; i < portals.length; i++) {
            if (head.x === portals[i].x && head.y === portals[i].y) {
                head.x = portals[(i + 1) % portals.length].x;
                head.y = portals[(i + 1) % portals.length].y;
            }
        }
        
        // Check if snake eats portals
        for (let i = 0; i < portals.length; i++) {
            if (head.x === portals[i].x && head.y === portals[i].y) {
                portals.splice(i, 1);
                portals.push({x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20)});
                score++;
            }
        }

// Check if snake collides with itself
        for (let i = 1; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) {
                alert('Game Over! Your score: ' + score);
                window.location.reload();
            }
        }
        
        // Check if snake goes out of bounds
        if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) {
            alert('Game Over! Your score: ' + score);
            window.location.reload();
        }
        
        snake.unshift(head);
        if (snake.length > score + 1) {
            snake.pop();
        }
        
        draw();
    }
    
    function onKeyDown(e) {
        switch(e.key) {
            case 'ArrowUp':
                if (direction !== 'down') {
                    direction = 'up';
                }
                break;
            case 'ArrowDown':
                if (direction !== 'up') {
                    direction = 'down';
                }
                break;
            case 'ArrowLeft':
                if (direction !== 'right') {
                    direction = 'left';
                }
                break;
            case 'ArrowRight':
                if (direction !== 'left') {
                    direction = 'right';
                }
                break;
        }
    }
    
    window.addEventListener('keydown', onKeyDown);
    
    draw();
    setInterval(update, 100);
</script>
</body>
</html>
```