js+css实现一个军棋对战游戏代码
代码语言:html
所属分类:游戏
代码描述:js+css实现一个军棋对战游戏代码,玩法:红蓝双方各有25个棋子,包括军旗、地雷、炸弹和各种军衔棋子 棋子等级:司令>军长>师长>旅长>团长>营长>连长>排长>工兵 工兵可以挖地雷,炸弹可以与任何棋子同归于尽 相同棋子相遇,同归于尽 地雷和军旗不能移动 消灭对方军旗或所有可移动棋子获胜
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box } body { font-family: 'Microsoft YaHei',sans-serif; background: linear-gradient(135deg,#1a2a6c,#b21f1f,#fdbb2d); color: white; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px } header { text-align: center; margin-bottom: 20px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 10px; width: 100%; max-width: 800px } h1 { font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 10px } .game-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1200px; width: 100% } .board-container { background: rgba(0,0,0,0.4); border-radius: 10px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.5) } #gameCanvas { background: #8B4513; border: 2px solid #5D2906; border-radius: 5px; display: block } .info-panel { flex: 1; min-width: 300px; background: rgba(0,0,0,0.4); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5) } .player-info { background: rgba(255,255,255,0.1); border-radius: 10px; padding: 15px; text-align: center } .player-info h3 { font-size: 1.5rem; margin-bottom: 10px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5) } .player-info.active { background: rgba(255,215,0,0.2); border: 2px solid gold } .player-info.red { color: #FF6B6B } .player-info.blue { color: #4D96FF } .game-status { background: rgba(255,255,255,0.1); border-radius: 10px; padding: 15px; text-align: center } .game-status h3 { font-size: 1.5rem; margin-bottom: 10px } .controls { display: flex; flex-direction: column; gap: 10px } button { background: #4D96FF; color: white; border: 0; padding: 12px 20px; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: all .3s; font-weight: bold } button:hover { background: #3578E5; transform: translateY(-2px) } button:active { transform: translateY(1px) } .rules { background: rgba(0,0,0,0.4); border-radius: 10px; padding: 20px; margin-top: 20px; max-width: 800px; width: 100% } .rules h3 { font-size: 1.5rem; margin-bottom: 15px; text-align: center } .rules ul { list-style-type: none; padding-left: 20px } .rules li { margin-bottom: 10px; padding-left: 20px; position: relative } .rules li:before { content: "•"; color: #4D96FF; font-size: 1.5rem; position: absolute; left: 0; top: -5px } footer { margin-top: 20px; text-align: center; font-size: .9rem; opacity: .8 } @media(max-width: 768px) { .game-container { flex-direction:column; align-items: center } .info-panel { width: 100% } } </style> </head> <body> <header> <h1>军旗小游戏</h1> <p>红蓝双方对战,消灭对方军旗或所有可移动棋子获胜!</p> </header> <div class="game-container"> <div class="board-container"> <canvas id="gameCanvas" width="600" height="600"></canvas> </div> <div class="info-panel"> <div class="player-info red active"> <h3>红方</h3> <p> 剩余棋子:<span id="redPieces">25</span> </p> <p> 状态:<span id="redStatus">当前回合</span> </p> </div> <div class="player-info blue"> <h3>蓝方</h3> <p> 剩余棋子:<span id="bluePieces">25</span> </p> <p> 状态:<span id="blueStatus">等待中</span> </p> </div> <div class="game-status"> <h3>游戏状态</h3> <p id=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0