攻守与征服游戏
代码语言:html
所属分类:游戏
代码描述:攻守与征服游戏
代码标签: 游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { --cols: 5; --rows: 8; --size: 12vmin; margin: 0; display: grid; place-content: center; width: 100vw; height: 100vh; background: #000; } button { cursor: pointer; transition: background 0.4s; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; } #board { margin: 0 auto 3vmin; border-spacing: 0; } #board td, #board button { border: 0; padding: 0; margin: 0; } #board td { width: var(--size); height: var(--size); line-height: 0; } #board button { width: 100%; height: 100%; box-shadow: inset 0 0 0 1px #333; font-size: 4vmin; outline: 0; } #board .last { box-shadow: inset 0 0 0 2px #222; } #ui { text-align: center; } #ui button { background: #444; border: 0; border-radius: 1vmin; font-size: 5vmin; width: 16vmin; padding: 5vmin 0; outline: 0; } #ui button:nth-child(2) { margin: 0 5vmin; } #ui.player1 button.current { background: rgb(100, 75, 225); } #ui.player2 button.current { background: rgb(255, 50, 120); } #ui #reset { position: absolute; top: 2vmin; right: 2vmin; border-radius: 50%; width: 10vmin; height: 10vmin; padding: 1vmin; background: #eee; } </style> </head> <body translate="no"> <div id="game"> <table id="board"></table> <div id="ui"> <button id="attack" class="current" title="Attacks vertical and horizontal not defended">🏹</button> <button id="defend" title="Defends from attacks">🛡️</button> <button id="conquer" title=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0