逃离交警
by StormOwl12114 lines5.1 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
<title>逃离交警</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#111;overflow:hidden;font-family:system-ui}
canvas{display:block;background:#336644}
#ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.btn{pointer-events:auto;background:#2277dd;color:white;border:none;font-size:16px;padding:12px 14px;border-radius:8px;margin:4px}
.btn-red{background:#dd3333}
.btn-gold{background:#c49000}
.ui‑panel{background:rgba(0,0,0,0.75);color:#fff;padding:10px}
.ctrl{position:absolute;bottom:10px;left:10px;right:10px;display:flex;justify-content:space-between}
.left‑pad{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.right‑pad{display:flex;gap:6px}
</style>
</head>
<body>
<canvas id="game"></canvas>
<div id="ui">
<div id="menu" class="ui‑panel" style="inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center">
<h1>🚗逃离交警</h1>
<button class="btn" onclick="startGame('arcade')">开始游戏（街机）</button>
<button class="btn btn-red" onclick="startGame('normal')">正常模式‑交警追捕</button>
<button class="btn" onclick="openHelmetShop()">⛑头盔商店</button>
<button class="btn" onclick="openSkinShop()">👕皮肤商店</button>
<button class="btn" onclick="openSettings()">⚙设置</button>
</div>
<div id="hud" style="display:none" class="ui‑panel">
<span>分数：<span id="score">0</span></span>｜<span>金币：<span id="coin">0</span></span>
<div id="warn" style="color:red;font-weight:bold;display:none">⚠你已经违法！请尽快逃跑</div>
</div>
<div id="controls" class="ctrl" style="display:none">
<div class="left‑pad">
<button class="btn" id="btnUp">▲往前</button>
<button class="btn" id="btnDown">▼往后</button>
</div>
<div class="right‑pad">
<button class="btn" id="btnStop">停</button>
<button class="btn" id="btnBomb">💣炸弹</button>
</div>
</div>
</div>
<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");
function resize(){canvas.width=innerWidth;canvas.height=innerHeight}
resize();window.addEventListener("resize",resize);
const gameData={
state:"menu",mode:"arcade",score:0,coins:200,playerLane:1,speed:4,isStop:false,
helmet:0,invincible:false,invTime:0,
trafficLight:{phase:0,timer:0},
officers:[],pedestrians:[],obstacles:[],cars:[],illegal:false,illegalTimer:0
};
const helmets=[{name:"无头盔",cost:0},{name:"白色安全盔",cost:40},{name:"烈焰头盔",cost:120},{name:"霓虹头盔",cost:200},{name:"黄金头盔",cost:350},{name:"闪电头盔",cost:600,spark:true}];
let keys={up:false,down:false,stop:false,bomb:false};
document.getElementById("btnUp").addEventListener("touchstart",()=>keys.up=true);
document.getElementById("btnUp").addEventListener("touchend",()=>keys.up=false);
document.getElementById("btnDown").addEventListener("touchstart",()=>keys.down=true);
document.getElementById("btnDown").addEventListener("touchend",()=>keys.down=false);
document.getElementById("btnBomb").addEventListener("touchstart",()=>keys.bomb=true);
document.getElementById("btnBomb").addEventListener("touchend",()=>keys.bomb=false);
let stopBtn=document.getElementById("btnStop");
stopBtn.onclick=()=>{
gameData.isStop=!gameData.isStop;
stopBtn.innerText=gameData.isStop?"行驶":"停";
stopBtn.className="btn"+(gameData.isStop?" btn‑gold":"");
};
canvas.addEventListener("touchstart",e=>{
let x=e.touches[0].clientX;
if(gameData.state!=="play")return;
if(x<canvas.width*0.35&&gameData.playerLane>0)gameData.playerLane--;
if(x>canvas.width*0.65&&gameData.playerLane<2)gameData.playerLane++;
})
function startGame(mode){
gameData.state="play";gameData.mode=mode;gameData.score=0;gameData.speed=4;gameData.playerLane=1;gameData.isStop=false;
gameData.trafficLight={phase:0,timer:0};gameData.officers=[];gameData.pedestrians=[];gameData.cars=[];gameData.illegal=false;
document.getElementById("menu").style.display="none";
document.getElementById("hud").style.display="block";
document.getElementById("controls").style.display="flex";
}
function openHelmetShop(){alert("头盔商店："+helmets.map((h,i)=>i+":"+h.name+"‑"+h.coins+"币").join("\n"))}
function openSkinShop(){alert("皮肤商店开发中")}
function openSettings(){alert("设置：音量调节，彩蛋可开启无敌")}
function drawRoad(){
ctx.fillStyle="#444";ctx.fillRect(0,0,canvas.width,canvas.height);
let laneW=canvas.width/3;
ctx.strokeStyle="#fff";ctx.lineWidth=4;
ctx.beginPath();ctx.moveTo(laneW,0);ctx.lineTo(laneW,canvas.height);ctx.stroke();
ctx.beginPath();ctx.moveTo(laneW*2,0);ctx.lineTo(laneW*2,canvas.height);ctx.stroke();
ctx.fillStyle="#777";ctx.fillRect(0,0,laneW*0.35,canvas.height);
}
function drawPlayer(){
let lw=canvas.width/3;
let x=lw*gameData.playerLane+lw*0.2;
let y=canvas.height‑160;
ctx.fillStyle="#0099ff";ctx.fillRect(x,y,lw*0.6,90);
if(gameData.helmet>0){ctx.fillStyle="#eeee00";ctx.beginPath();ctx.arc(x+lw*0.3,y‑12,22,0,Math.PI*2);ctx.fill()}
}
function drawTrafficLight(){
let x=canvas.width‑110,y=120;
ctx.fillStyle="#333";ctx.fillRect(x,y,50,90);
let phaseGame Source: 逃离交警
Creator: StormOwl12
Libraries: none
Complexity: moderate (114 lines, 5.1 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-stormowl12" to link back to the original. Then publish at arcadelab.ai/publish.