js实现双人贪吃蛇自动游戏模拟代码
代码语言:html
所属分类:游戏
代码描述:js实现双人贪吃蛇自动游戏模拟代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dual Autonomous Snake Game</title>
<style>
:root {
color-scheme: dark;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background:
radial-gradient(circle at top, #183126 0%, #0b1612 45%, #060b09 100%);
font-family: Arial, Helvetica, sans-serif;
color: #eef8f1;
}
.app {
width: min(96vw, 780px);
text-align: center;
}
h1 {
margin: 0 0 14px;
font-size: 28px;
font-weight: 800;
letter-spacing: 0.5px;
}
.hud {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.team,
.status,
button {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 10px 14px;
font-size: 15px;
backdrop-filter: blur(6px);
}
.team {
min-width: 160px;
font-weight: 700;
}
.team.green {
color: #8cff9f;
box-shadow: inset 0 0 0 1px rgba(140, 255, 159, 0.08);
}
.team.pink {
color: #ff9ab9;
box-shadow: inset 0 0 0 1px rgba(255, 154, 185, 0.08);
}
.status {
flex: 1;
min-width: 220px;
color: #dceee2;
font-weight: 700;
}
.actions {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 12px;
}
button {
color: #f6fff8;
cursor: pointer;
font-weight: 700;
transition: transform 0.12s ease, background 0.12s ease;
}
button:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0..........完整代码请登录后点击上方下载按钮下载查看
















网友评论0