慢速贪吃蛇小游戏

by GlitchFlare80
129 lines4.5 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>慢速贪吃蛇小游戏</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
        body{display:flex;flex-direction:column;align-items:center;background:#f5f5f5;padding:15px;}
        h1{color:#222;margin-bottom:10px;font-size:22px;}
        .score{font-size:18px;margin:8px 0;color:#333;}
        #gameBox{border:3px solid #333;background:#fff;}
        .btn-box{margin-top:20px;display:grid;grid-template-columns:repeat(3,60px);gap:8px;}
        .ctrl-btn{width:60px;height:60px;font-size:24px;border:none;border-radius:8px;background:#409eff;color:#fff;cursor:pointer;}
        .ctrl-btn:active{background:#2979cb;}
        .empty{visibility:hidden;}
        .tip{margin-top:15px;color:#666;font-size:14px;text-align:center;}
    </style>
</head>
<body>
    <h1>经典贪吃蛇</h1>
    <div class="score">得分：<span id="scoreNum">0</span></div>
    <canvas id="gameBox" width="360" height="360"></canvas>

    <div class="btn-box">
        <div class="empty"></div>
        <button class="ctrl-btn" data-dir="up">↑</button>
        <div class="empty"></div>
        <button class="ctrl-btn" data-dir="left">←</button>
        <button class="ctrl-btn" data-dir="down">↓</button>
        <button class="ctrl-btn" data-dir="right">→</button>
    </div>

    <div class="tip">键盘方向键/屏幕按钮均可操控，速度放缓</div>

    <script>
        const canvas = document.getElementById('gameBox');
        const ctx = canvas.getContext('2d');
        const scoreText = document.getElementById('scoreNum');
        const btns = document.querySelectorAll('.ctrl-btn');

        const size = 18;
        let snake = [{x:10,y:10}];
        let food = {};
        let dir = 'right';
        let nextDir = 'right';
        let score = 0;
        let gameTimer = null;

        btns.forEach(btn=>{
            btn.addEventListener('click',()=>{
                let d = btn.dataset.dir;
                if(d==='left'&&dir!=='right') nextDir='left';
                if(d==='right'&&dir!=='left') nextDir='right';
                if(d==='up'&&dir!=='down') nextDir='up';
                if(d==='down'&&dir!=='up') nextDir='down';
            })
        })

        function createFood(){
            food.x = Math.floor(Math.random()*20);
            food.y = Math.floor(Math.random()*20);
            snake.forEach(item=>{
                if(item.x===food.x&&item.y===food.y) createFood();
            })
        }

        function drawBlock(x,y,color){
            ctx.fillStyle = color;
            ctx.fillRect(x*size,y*size,size-1,size-1);
        }

        function render(){
            dir = nextDir;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            drawBlock(food.x,food.y,'red');
            snake.forEach((item,index)=>{
                drawBlock(item.x,item.y,index===0?'green':'#00aa00');
            })

            let headX = snake[0].x;
            let headY = snake[0].y;
            switch(dir){
                case 'up': headY--;break;
                case 'down': headY++;break;
                case 'left': headX--;break;
                case 'right': headX++;break;
            }

            if(headX<0||headX>=20||headY<0||headY>=20){
                clearInterval(gameTimer);
                alert(`游戏结束！得分：${score}`);
                location.reload();
                return;
            }

            snake.forEach(item=>{
                if(item.x===headX&&item.y===headY){
                    clearInterval(gameTimer);
                    alert(`游戏结束！得分：${score}`);
                    location.reload();
                }
            })

            snake.unshift({x:headX,y:headY});
            if(headX===food.x&&headY===food.y){
                score++;
                scoreText.innerText = score;
                createFood();
            }else{
                snake.pop();
            }
        }

        document.onkeydown = function(e){
            const key = e.keyCode;
            if(key===37&&dir!=='right') nextDir='left';
            if(key===38&&dir!=='down') nextDir='up';
            if(key===39&&dir!=='left') nextDir='right';
            if(key===40&&dir!=='up') nextDir='down';
        }

        createFood();
        // 改成250毫秒移动一次，速度变慢很多
        gameTimer = setInterval(render,250);
    </script>
</body>
</html>
Game Source: 慢速贪吃蛇小游戏

Creator: GlitchFlare80
Libraries: none
Complexity: moderate (129 lines, 4.5 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -glitchflare80" to link back to the original. Then publish at arcadelab.ai/publish.