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

No:36961

104

←

Prev Next

→

Create a game set on Snake Island where players, a..ALL
Developer User15966｜Date and time 24/1/19 15:33:17
Build time 10.931 sec｜Game capacity 2.382KB｜

Script

Snake Island Builder

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Snake Island Builder</title>
<style>
    #canvas {
        background-color: #e6e6e6;
        border: 1px solid black;
    }
</style>
</head>
<body>
<h1>Snake Island Builder</h1>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    // Initialize canvas and context
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

// Game variables
    let playerX = 20;
    let playerY = 20;
    let snakeX = 200;
    let snakeY = 200;
    let snakeSpeed = 2;
    let score = 0;
    
    // Game functions
    function drawPlayer() {
        ctx.fillStyle = "blue";
        ctx.fillRect(playerX, playerY, 20, 20);
    }

function drawSnake() {
        ctx.fillStyle = "green";
        ctx.fillRect(snakeX, snakeY, 20, 20);
    }

function detectCollision() {
        if (playerX < snakeX + 20 &&
            playerX + 20 > snakeX &&
            playerY < snakeY + 20 &&
            playerY + 20 > snakeY) {
            // Player got bitten by snake
            score -= 10;
            playerX = 20;
            playerY = 20;
        }
    }

function updateScore() {
        ctx.font = "20px Arial";
        ctx.fillStyle = "black";
        ctx.fillText("Score: " + score, 10, 30);
    }

function updateGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        drawPlayer();
        drawSnake();
        detectCollision();
        updateScore();
        
        // Move snake
        snakeX += snakeSpeed;
        if (snakeX > canvas.width - 20 || snakeX < 0) {
            snakeSpeed *= -1; // Reverse direction if hits canvas edge
        }
        
        // Request next frame
        requestAnimationFrame(updateGame);
    }
    
    // Start the game
    updateGame();

// Keyboard controls
    window.addEventListener("keydown", function(event) {
        switch(event.keyCode) {
            case 37: // Left arrow key
                playerX -= 10;
                break;
            case 38: // Up arrow key
                playerY -= 10;
                break;
            case 39: // Right arrow key
                playerX += 10;
                break;
            case 40: // Down arrow key
                playerY += 10;
                break;
            default:
                break;
        }
    });

</script>
</body>
</html>