簡約俯視極速賽車

by SolarDolphin41
143 lines5.3 KB
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>簡約俯視極速賽車</title>
    <style>
        body{background:#1a1a1a;display:flex;flex-direction:column;align-items:center;color:white;font-family:微軟雅黑}
        #gameCanvas{border:3px solid #fff;background:#444}
        .info{font-size:20px;margin:8px 0}
    </style>
</head>
<body>
    <div class="info">分數：<span id="score">0</span>｜剩餘時間：<span id="time">60</span>秒｜圈數：<span id="lap">0</span>/3</div>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <p>操作：上下左右方向鍵控制汽車移動</p>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        let score = 0;
        let timeLeft = 60;
        let lap = 0;
        let gameOver = false;
        let speedBuffTimer = 0;

        // 玩家車輛設定
        const car = {x:300,y:300,w:22,h:32,speed:4,baseSpeed:4};
        let coins = [];
        let boosts = [];
        let blocks = [];

        // 偵測按鍵
        const keys = {};
        window.addEventListener('keydown',e=>keys[e.key]=true);
        window.addEventListener('keyup',e=>keys[e.key]=false);

        // 隨機生成金幣、加速道具、障礙物
        function createItems(){
            coins = []; boosts = []; blocks = [];
            for(let i=0;i<10;i++) coins.push({x:Math.random()*560+20,y:Math.random()*360+20,r:9});
            for(let i=0;i<4;i++) boosts.push({x:Math.random()*560+20,y:Math.random()*360+20,r:11});
            for(let i=0;i<6;i++) blocks.push({x:Math.random()*560+20,y:Math.random()*360+20,w:28,h:28});
        }
        createItems();

        // 倒數計時器
        setInterval(()=>{
            if(gameOver) return;
            timeLeft--;
            document.getElementById('time').innerText = timeLeft;
            if(timeLeft <= 0) gameOver = true;
        },1000);

        // 圓形碰撞檢測（金幣/加速道具）
        function circleCollision(obj1,obj2,radius){
            const dx = obj1.x - obj2.x;
            const dy = obj1.y - obj2.y;
            return Math.sqrt(dx*dx + dy*dy) < radius;
        }

        // 長方形障礙物碰撞
        function rectCollision(car, block){
            return car.x < block.x + block.w && car.x+car.w > block.x && car.y < block.y+block.h && car.y+car.h > block.y;
        }

        // 遊戲主畫面更新迴圈
        function gameLoop(){
            if(gameOver){
                ctx.fillStyle="rgba(0,0,0,0.75)";
                ctx.fillRect(0,0,600,400);
                ctx.fillStyle="#fff";
                ctx.font="32px 微軟雅黑";
                if(lap>=3) ctx.fillText("勝利！完成3圈，總分："+score,130,200);
                else ctx.fillText("時間用曬，挑戰失敗",160,200);
                requestAnimationFrame(gameLoop);
                return;
            }
            ctx.clearRect(0,0,600,400);

            // 車速增益倒數
            if(speedBuffTimer>0){
                speedBuffTimer--;
                car.speed = car.baseSpeed + 2;
            }else{
                car.speed = car.baseSpeed;
            }

            // 控制車輛移動
            if(keys['ArrowUp'] && car.y>0) car.y -= car.speed;
            if(keys['ArrowDown'] && car.y<400-car.h) car.y += car.speed;
            if(keys['ArrowLeft'] && car.x>0) car.x -= car.speed;
            if(keys['ArrowRight'] && car.x<600-car.w) car.x += car.speed;

            // 畫金幣（黃色圓形，拾取加10分）
            ctx.fillStyle="#ffd700";
            for(let i=coins.length-1;i>=0;i--){
                const c = coins[i];
                ctx.beginPath(); ctx.arc(c.x,c.y,c.r,0,Math.PI*2); ctx.fill();
                if(circleCollision(car,c,18)){
                    coins.splice(i,1);
                    score +=10;
                    document.getElementById('score').innerText = score;
                }
            }

            // 畫加速道具（綠色圓形，提速5秒）
            ctx.fillStyle="#32cd32";
            for(let i=boosts.length-1;i>=0;i--){
                const b = boosts[i];
                ctx.beginPath(); ctx.arc(b.x,b.y,b.r,0,Math.PI*2); ctx.fill();
                if(circleCollision(car,b,20)){
                    boosts.splice(i,1);
                    speedBuffTimer = 300;
                }
            }

            // 畫障礙物（紅色方塊，撞到減速3秒）
            ctx.fillStyle="#ff4444";
            for(let blk of blocks){
                ctx.fillRect(blk.x,blk.y,blk.w,blk.h);
                if(rectCollision(car,blk) && speedBuffTimer<=0){
                    car.speed = car.baseSpeed - 2;
                    setTimeout(()=>car.speed=car.baseSpeed,3000);
                }
            }

            // 畫玩家賽車
            ctx.fillStyle="#0099ff";
            ctx.fillRect(car.x,car.y,car.w,car.h);

            // 模擬完圈判斷（到達底線即一圈）
            if(car.y>370){
                lap++;
                document.getElementById('lap').innerText = lap;
                car.y = 50;
                createItems(); // 重新生成道具
                if(lap>=3) gameOver = true;
            }
            requestAnimationFrame(gameLoop);
        }
        gameLoop();
    </script>
</body>
</html>
Game Source: 簡約俯視極速賽車

Creator: SolarDolphin41
Libraries: none
Complexity: moderate (143 lines, 5.3 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: game-solardolphin41" to link back to the original. Then publish at arcadelab.ai/publish.