js+css实现经典魂斗罗游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现经典魂斗罗游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CONTRA SPIRIT · 魂斗罗致敬版</title>
<link rel="icon" href="data:,">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg0:#040a07; --panel:#0d1f16; --line:#1e4433; --line2:#2c5a41;
  --amber:#ffb03c; --red:#ff4a3c; --green:#39d98a; --cyan:#57d7e0;
  --text:#cfe8d8; --dim:#6f957f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Noto Sans SC',sans-serif; color:var(--text); overflow-x:hidden;
  background:
    radial-gradient(1100px 560px at 78% -12%, #143726 0%, transparent 60%),
    radial-gradient(900px 520px at 6% 112%, #0e2b1e 0%, transparent 55%),
    linear-gradient(#07130d, var(--bg0));
  background-attachment:fixed;
}
body::before{ /* 像素网格 */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(87,215,224,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,215,224,.035) 1px, transparent 1px);
  background-size:26px 26px;
}
.fly{position:fixed; width:4px; height:4px; border-radius:50%; z-index:0; pointer-events:none;
  background:#ffd27a; box-shadow:0 0 8px 2px rgba(255,210,122,.7); opacity:.7;
  animation:drift 14s ease-in-out infinite alternate, flick 2.3s ease-in-out infinite;}
.fly:nth-child(1){left:8%;top:22%} .fly:nth-child(2){left:16%;top:70%;animation-delay:-3s,-1s;background:#7dffb0;box-shadow:0 0 8px 2px rgba(125,255,176,.6)}
.fly:nth-child(3){left:88%;top:30%;animation-delay:-6s,-.4s} .fly:nth-child(4){left:78%;top:80%;animation-delay:-9s,-1.6s;background:#7dffb0;box-shadow:0 0 8px 2px rgba(125,255,176,.6)}
.fly:nth-child(5){left:48%;top:12%;animation-delay:-11s,-.8s} .fly:nth-child(6){left:60%;top:90%;animation-delay:-4s,-2s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(60px,-90px)}}
@keyframes flick{0%,100%{opacity:.15}50%{opacity:.85}}

.wrap{max-width:1180px;margin:0 auto;padding:18px 22px 70px;position:relative;z-index:1}
header.marquee{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 4px 16px;border-bottom:2px solid var(--line);margin-bottom:22px}
.logo{font-family:'Press Start 2P',monospace;font-size:15px;color:var(--amber);
  text-shadow:2px 2px 0 #5a1408, 0 0 14px rgba(255,176,60,.4)}
.logo .zh{font-family:'ZCOOL QingKe HuangYou';font-size:19px;color:var(--green);margin-left:12px;letter-spacing:4px;text-shadow:0 0 10px rgba(57,217,138,.4)}
.coin{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--red);white-space:nowrap;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

main.grid{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:22px;align-items:start}
@media(max-width:980px){main.grid{grid-template-columns:1fr}}

/* ---- 街机机台 ---- */
.cabinet{background:linear-gradient(#131f17,#0b1510);border:3px solid #1c352a;border-radius:16px;
  padding:16px;box-shadow:0 30px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06)}
.screen{position:relative;border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 0 0 4px #0a0f0c, 0 0 0 6px #20301f, 0 0 46px rgba(57,217,138,.14), inset 0 0 90px rgba(0,0,0,.85)}
canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}
.scan{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px)}
.vig{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.5) 100%)}
.flicker{position:absolute;inset:0;pointer-events:none;z-index:3;background:rgba(160,255,200,.02);animation:crt 4s linear infinite}
@keyframes crt{0%,100%{opacity:.4}50%{opacity:.9}}
.bezel{display:flex;align-items:center;gap:12px;margin-top:12px;padding:2px 4px;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim)}
.led{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.bezel .model{letter-spacing:1px}
.bezel .hint{margin-left:auto;letter-spacing:0}
#muteBtn{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--cyan);background:#0a1a12;
  border:1px solid var(--line2);border-bottom:3px solid #06120c;border-radius:5px;padding:6px 9px;cursor:pointer;transition:.15s}
#muteBtn:hover{color:#fff;border-color:var(--cyan)}
#muteBtn:active{transform:translateY(2px);border-bottom-width:1px}

/* ---- 侧栏面板 ---- */
.panel{background:linear-gradient(#0e2117,#0a1810);border:2px solid var(--line);border-radius:10px;
  padding:16px 16px 14px;box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s, border-color .2s; animation:rise .6s both}
.panel:nth-of-type(2){animation-delay:.08s}.panel:nth-of-type(3){animation-delay:.16s}
.panel:hover{transform:translateY(-3px);border-color:#3a7a58}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.panel h2{font-family:'ZCOOL QingKe HuangYou';font-size:20px;color:var(--amber);letter-spacing:3px;
  display:flex;align-items:center;gap:8px;margin-bottom:12px}
.panel h2::before{content:"▸";color:var(--red)}
.panel h2::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--line2).........完整代码请登录后点击上方下载按钮下载查看