暴风追逐者 | 甜瓜小兵工作室

by NovaOwl89
328 lines13.5 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>暴风追逐者 | 甜瓜小兵工作室</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif}
body{background:#0b0b12;color:#fff;overflow:hidden}
/*商店启动页*/
.store-home{
  width:100vw;height:100vh;background:linear-gradient(160deg,#080818,#101028);
  position:fixed;top:0;left:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 0.6s;
}
.game-icon{
  width:140px;height:140px;border-radius:26px;background:linear-gradient(45deg,#4477ff,#22ccff);
  display:flex;align-items:center;justify-content:center;font-size:50px;font-weight:bold;
  box-shadow:0 0 30px #2299ff88;margin-bottom:16px
}
.game-title{font-size:32px;font-weight:bold;margin-bottom:6px}
.studio-text{color:#aaccff;font-size:15px;margin-bottom:12px}
.score-box{display:flex;gap:6px;margin-bottom:20px}
.star{color:#ffdd00;font-size:22px}
.score-num{font-size:18px;color:#fff;margin-left:6px}
.desc-text{max-width:360px;text-align:center;color:#bbd0ff;font-size:14px;line-height:1.6;margin-bottom:28px;padding:0 20px}
.play-btn{
  padding:12px 36px;border-radius:30px;border:none;background:linear-gradient(45deg,#2277ff,#22bbff);
  color:#fff;font-size:17px;font-weight:bold;cursor:pointer;box-shadow:0 0 16px #2288ff66
}
.play-btn:active{scale:0.96}
#gameWrap{width:100vw;height:100vh;display:none;position:relative}
.ctrl{position:fixed;top:10px;z-index:99;display:flex;gap:6px;flex-wrap:wrap;padding:0 10px}
.endBtnBox{position:fixed;top:180px;left:50%;transform:translateX(-50%);display:none;gap:10px;z-index:105}
button{padding:8px 11px;font-size:13px;border-radius:6px;border:none;background:#224488;color:#fff}
#mycar{
  width:180px;height:70px;background:#888888;position:absolute;left:-220px;top:55vh;
  transform-origin:center bottom;transition:left 1.2s,transform 0.4s,top 0.8s;
  border:2px solid #333;
}
#friendcar1{
  width:180px;height:70px;background:#888888;position:absolute;right:-220px;top:55vh;
  transform-origin:center bottom;transition:right 1.2s,transform 0.4s,left 1.5s,opacity 0.8s;
  border:2px solid #333;
}
#friendcar2{
  width:180px;height:70px;background:#777777;position:absolute;right:-220px;top:42vh;
  transform-origin:center bottom;transition:right 1.2s,transform 0.4s,left 1.8s,opacity 0.8s;
  border:2px solid #222;
}
.wheel{
  width:24px;height:24px;background:#1a1a1a;border-radius:50%;position:absolute;bottom:-12px;
  border:3px solid #555;
}
#mycar .wheel:nth-of-type(1){left:10px}
#mycar .wheel:nth-of-type(2){right:10px}
#friendcar1 .wheel:nth-of-type(1){left:10px}
#friendcar1 .wheel:nth-of-type(2){right:10px}
#friendcar2 .wheel:nth-of-type(1){left:10px}
#friendcar2 .wheel:nth-of-type(2){right:10px}
.base-plate{
  width:180px;height:46px;background:#3a3a3a;position:absolute;bottom:-8px;left:0;
  transition:bottom 0.8s;border:1px solid #222;
}
.lightL,.lightR{
  width:12px;height:8px;background:#fff;box-shadow:0 0 22px 9px #fff;
  position:absolute;top:12px;display:none;border-radius:2px;
}
#mycar .lightL{left:-10px}
#mycar .lightR{right:-10px}
#friendcar1 .lightL{left:-10px}
#friendcar1 .lightR{right:-10px}
#friendcar2 .lightL{left:-10px}
#friendcar2 .lightR{right:-10px}
.winddetect{
  width:32px;height:55px;background:#666;position:absolute;top:-35px;left:70px;
  border-radius:4px 4px 0 0;border:1px solid #333;
}
.windval{
  color:#0f0;font-size:12px;position:absolute;top:-45px;left:50px;font-weight:bold;
}
.levelTip{position:absolute;top:-65px;left:30px;color:#ff333;font-weight:bold;font-size:13px}
.anchor1,.anchor2{
  width:5px;height:0;background:#c5c5c5;border:2px solid red;
  position:absolute;bottom:0;transition:height 0.6s;
}
.anchor1{left:45px}.anchor2{left:130px}
.f1Anchor{
  width:5px;height:0;background:#c5c5c5;border:2px solid red;
  position:absolute;bottom:0;left:70px;transition:height 0.6s;
}
.f2Anchor{
  width:5px;height:0;background:#c5c5c5;border:2px solid red;
  position:absolute;bottom:0;left:70px;transition:height 0.6s;
}
.mark1,.mark2,.mark3{
  width:9px;height:9px;background:#b8b8b8;border-radius:50%;display:none;position:absolute;
  box-shadow:0 0 4px #aaa;
}
.mark1{left:32vw;top:64vh}
.mark2{left:55vw;top:64vh}
.mark3{left:62vw;top:52vh}
#man{
  width:18px;height:46px;background:#ffaa22;position:absolute;left:25vw;top:62vh;
  border:1px solid #995500;
}
.darkmask{
  width:100vw;height:100vh;background:rgba(90,90,90,0.85);position:fixed;top:0;left:0;
  opacity:0;pointer-events:none;transition:opacity 1s;z-index:99;
}
#tornado{
  width:90px;height:350px;background:linear-gradient(#444,#777,#aaa);
  border-radius:50% 50% 20% 20%;position:absolute;right:-100px;top:20vh;display:none;
}
.talkText{
  position:absolute;top:30vh;left:35vw;font-size:22px;color:#fff;text-shadow:0 0 8px #fff;display:none;z-index:100;
}
</style>
</head>
<body>
<div class="store-home" id="storePage">
  <div class="game-icon">风</div>
  <div class="game-title">暴风追逐者</div>
  <div class="studio-text">制作：甜瓜小兵工作室 | 开学缓更工作室</div>
  <div class="score-box">
    <span class="star">★★★★★</span>
    <span class="score-num">4.9 评分</span>
  </div>
  <div class="desc-text">五关EF分级龙卷风拦截游戏，三车物理翘头，风速达标车辆吹飞，锚钉固定车身</div>
  <button class="play-btn" onclick="startGame()">开始游戏</button>
</div>
<div id="gameWrap">
<div class="darkmask" id="dark"></div>
<div class="talkText" id="talk">谢谢你队友</div>
<div class="endBtnBox" id="endBox">
  <button onclick="restartLevel()">重新开始本关</button>
  <button onclick="nextLevel()">下一关</button>
</div>
<div id="ground">
  <div class="mark1"></div><div class="mark2"></div><div class="mark3"></div>
  <div id="tornado"></div>
  <div id="mycar">
    <div class="levelTip" id="levelShow">等级:EF0</div>
    <div class="wheel"></div><div class="wheel"></div>
    <div class="winddetect"></div>
    <div class="windval" id="windnum">0m/s</div>
    <div class="base-plate">
      <div class="anchor1"></div><div class="anchor2"></div>
    </div>
    <div class="lightL"></div><div class="lightR"></div>
  </div>
  <div id="friendcar1">
    <div class="wheel"></div><div class="wheel"></div>
    <div class="base-plate"><div class="f1Anchor"></div></div>
    <div class="lightL"></div><div class="lightR"></div>
  </div>
  <div id="friendcar2">
    <div class="wheel"></div><div class="wheel"></div>
    <div class="base-plate"><div class="f2Anchor"></div></div>
    <div class="lightL"></div><div class="lightR"></div>
  </div>
  <div id="man"></div>
</div>
<div class="ctrl">
  <button id="lightBtn">开启全部车灯</button>
  <button id="getInBtn">让地上队友上车</button>
  <button id="soundBtn">开启龙卷风音效</button>
  <button onclick="nextStep()">依次部署锚定</button>
  <span id="tip">第1关 | EF0 准备开局</span>
</div>
</div>

<audio id="windAudio" loop preload="auto" muted>
  <source src="https://assets.mixkit.co/sfx/preview/mixkit-storm-wind-gust-1290.mp3">
<audio id="plateSound" preload="auto" muted>
  <source src="https://assets.mixkit.co/sfx/preview/mixkit-metal-hydraulic-press-2698.mp3">
<audio id="nailSound" preload="auto" muted>
  <source src="https://assets.mixkit.co/sfx/preview/mixkit-metal-hammer-nail-on-metal-2791.mp3">
<audio id="peopleSound" preload="auto" muted>
  <source src="https://assets.mixkit.co/sfx/preview/mixkit-human-shout-voice-1254.mp3">

<script>
function startGame(){
  document.getElementById('storePage').style.opacity='0';
  setTimeout(()=>{
    document.getElementById('storePage').style.display='none';
    document.getElementById('gameWrap').style.display='block';
  },600)
}
document.body.addEventListener('click',()=>{
  document.querySelectorAll('audio').forEach(a=>{a.muted=false;a.volume=0.95})
})
const mycar = document.getElementById('mycar');
const fr1 = document.getElementById('friendcar1');
const fr2 = document.getElementById('friendcar2');
const plate = document.querySelector('.base-plate');
const a1 = document.querySelector('.anchor1');
const a2 = document.querySelector('.anchor2');
const f1A = document.querySelector('.f1Anchor');
const f2A = document.querySelector('.f2Anchor');
const mark1 = document.querySelector('.mark1');
const mark2 = document.querySelector('.mark2');
const mark3 = document.querySelector('.mark3');
const tornado = document.getElementById('tornado');
const dark = document.getElementById('dark');
const windnum = document.getElementById('windnum');
const levelShow = document.getElementById('levelShow');
const audioWind = document.getElementById('windAudio');
const audioPlate = document.getElementById('plateSound');
const audioNail = document.getElementById('nailSound');
const audioPeople = document.getElementById('peopleSound');
const soundBtn = document.getElementById('soundBtn');
const lightBtn = document.getElementById('lightBtn');
const tip = document.getElementById('tip');
const getInBtn = document.getElementById('getInBtn');
const talk = document.getElementById('talk');
const man = document.getElementById('man');
const endBox = document.getElementById('endBox');

let step = 0;
let nowLv = 1;
const maxLv = 5;
const lvWindLv = ["EF0","EF1","EF2","EF3","EF5"];
const lvMaxWind = [50,150,400,700,2000];

function resetObj(){
  step=0;
  mycar.style.left="-220px";mycar.style.top="55vh";mycar.style.transform="";
  fr1.style.right="-220px";fr1.style.left="";fr1.style.opacity="1";fr1.style.transform="";
  fr2.style.right="-220px";fr2.style.left="";fr2.style.opacity="1";fr2.style.transform="";
  plate.style.bottom="-8px";
  a1.style.height="0";a2.style.height="0";f1A.style.height="0";f2A.style.height="0";
  mark1.style.display="none";mark2.style.display="none";mark3.style.display="none";
  dark.style.opacity="0";tornado.style.display="none";
  mycar.querySelectorAll('.lightL,.lightR').forEach(e=>e.style.display='none');
  fr1.querySelectorAll('.lightL,.lightR').forEach(e=>e.style.display='none');
  fr2.querySelectorAll('.lightL,.lightR').forEach(e=>e.style.display='none');
  man.style.display="block";talk.style.display="none";endBox.style.display="none";
  windnum.textContent="0m/s";levelShow.textContent="等级:"+lvWindLv[nowLv-1];
  tip.textContent="第"+nowLv+"关 | "+lvWindLv[nowLv-1]+" 准备开局";
}
function restartLevel(){resetObj();}
function nextLevel(){
  if(nowLv<maxLv){nowLv++;resetObj();}
  else{tip.textContent="全部5关通关完成";}
}

lightBtn.onclick=()=>{
  [...mycar.querySelectorAll('.lightL,.lightR'),...fr1.querySelectorAll('.lightL,.lightR'),...fr2.querySelectorAll('.lightL,.lightR')].forEach(e=>e.style.display='block');
  tip.textContent="全部车辆车灯点亮";
}
getInBtn.onclick = function(){
  man.style.display='none';
  talk.style.display='block';
  setTimeout(()=>talk.style.display='none',2200);
  audioPeople.currentTime=0;audioPeople.play();
  tip.textContent="地上队友上车：谢谢你队友";
}
soundBtn.onclick = ()=>{
  audioWind.muted=false;
  if(audioWind.paused) audioWind.play();else audioWind.pause();
}

function nextStep(){
  let limitWind = lvMaxWind[nowLv-1];
  let grade = lvWindLv[nowLv-1];
  if(step==0){
    mycar.style.left='32vw';
    setTimeout(()=>{mycar.style.transform='rotateX(12deg)';setTimeout(()=>mycar.style.transform='rotateX(0deg)',400);},1200)
    tip.textContent="第一步：我方车左侧驶入停车翘头";
    step=1;
  }else if(step==1){
    fr1.style.right='38vw';
    setTimeout(()=>{fr1.style.transform='rotateX(12deg)';setTimeout(()=>fr1.style.transform='rotateX(0deg)',400);},1200)
    tip.textContent="第二步：一号队友车右侧驶入翘头";
    step=2;
  }else if(step==2){
    fr2.style.right='52vw';
    setTimeout(()=>{fr2.style.transform='rotateX(12deg)';setTimeout(()=>fr2.style.transform='rotateX(0deg)',400);},1200)
    tip.textContent="第三步：二号队友车右侧远处驶入翘头";
    step=3;
  }else if(step==3){
    windnum.textContent='75m/s';
    tip.textContent="第四步：基础风速75m/s";
    step=4;
  }else if(step==4){
    tornado.style.display='block';dark.style.opacity='1';audioWind.play();
    windnum.textContent=limitWind+"m/s";levelShow.textContent="等级:"+grade;
    if(grade !== "EF5"){
      setTimeout(()=>{fr1.style.left='110vw';fr1.style.opacity='0';},600)
      tip.textContent=grade+" 仅一号队友车被吹飞，二号车锚钉稳固不动";
    }else{
      setTimeout(()=>{fr1.style.left='110vw';fr1.style.opacity='0';},600)
      setTimeout(()=>{fr2.style.left='120vw';fr2.style.opacity='0';},1200)
      tip.textContent="EF5 2000m/s 一号、二号两车全部被狂风吹飞";
    }
    step=5;
  }else if(step==5){
    mycar.style.top = '57vh';
    plate.style.bottom = '-32px';
    audioPlate.currentTime=0;audioPlate.play();
    tip.textContent="第五步：我方底盘锚钉板落地";
    step=6;
  }else if(step==6){
    mycar.style.top = '56vh';
    audioPlate.currentTime=0;audioPlate.play();
    tip.textContent="第六步：车身与底盘齐平";
    step=7;
  }else if(step==7){
    a1.style.height='32px';a2.style.height='32px';f1A.style.height='32px';f2A.style.height='32px';
    mark1.style.display='block';mark2.style.display='block';mark3.style.display='block';
    audioNail.currentTime=0;audioNail.play();
    tip.textContent="第七步：所有车辆锚钉扎入地面";
    step=8;
  }else if(step==8){
    mycar.style.top = '53vh';
    audioPlate.currentTime=0;audioPlate.play();
    tip.textContent="第八步：本关完成，弹出过关按钮";
    setTimeout(()=>{endBox.style.display="flex"},800);
    step=9;
  }
}
resetObj();
</script>
</body>
</html>
Game Source: 暴风追逐者 | 甜瓜小兵工作室

Creator: NovaOwl89
Libraries: none
Complexity: complex (328 lines, 13.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: -novaowl89" to link back to the original. Then publish at arcadelab.ai/publish.