JS+CSS+HTML 实现战斗界面动画：酷炫的方框对决

以下是一个简单的实现战斗界面动画的示例代码：\n\nHTML (index.html):\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>战斗界面动画</title>\n <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n <div class="container">\n <div id="boxA" class="box">\n <div id="healthA" class="health-bar"></div>\n <div id="damageA" class="damage-text"></div>\n </div>\n <div id="boxB" class="box">\n <div id="healthB" class="health-bar"></div>\n <div id="damageB" class="damage-text"></div>\n </div>\n </div>\n \n <script src="script.js"></script>\n</body>\n</html>\n\n\nCSS (style.css):\ncss\n.container {\n display: flex;\n justify-content: space-around;\n margin-top: 100px;\n}\n\n.box {\n width: 150px;\n height: 150px;\n background-color: green;\n position: relative;\n}\n\n.health-bar {\n width: 100%;\n height: 20px;\n background-color: blue;\n position: absolute;\n bottom: 0;\n}\n\n.damage-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 18px;\n color: white;\n visibility: hidden;\n animation: shake 0.3s linear infinite;\n}\n\n@keyframes shake {\n 0% { transform: translate(-50%, -50%); }\n 10% { transform: translate(-55%, -50%); }\n 20% { transform: translate(-50%, -50%); }\n 30% { transform: translate(-55%, -50%); }\n 40% { transform: translate(-50%, -50%); }\n 50% { transform: translate(-55%, -50%); }\n 60% { transform: translate(-50%, -50%); }\n 70% { transform: translate(-55%, -50%); }\n 80% { transform: translate(-50%, -50%); }\n 90% { transform: translate(-55%, -50%); }\n 100% { transform: translate(-50%, -50%); }\n}\n\n.red-bg {\n background-color: red !important;\n}\n\n\nJavaScript (script.js):\njavascript\nvar healthA = 100;\nvar healthB = 100;\n\nvar boxA = document.getElementById("boxA");\nvar boxB = document.getElementById("boxB");\nvar healthBarA = document.getElementById("healthA");\nvar healthBarB = document.getElementById("healthB");\nvar damageTextA = document.getElementById("damageA");\nvar damageTextB = document.getElementById("damageB");\n\nfunction updateHealthBar() {\n healthBarA.style.width = healthA + "%";\n healthBarB.style.width = healthB + "%";\n \n if (healthA <= 20) {\n boxA.classList.add("red-bg");\n } else {\n boxA.classList.remove("red-bg");\n }\n \n if (healthB <= 20) {\n boxB.classList.add("red-bg");\n } else {\n boxB.classList.remove("red-bg");\n }\n}\n\nfunction showDamageText(damage, isPlayerA) {\n var damageText = isPlayerA ? damageTextA : damageTextB;\n damageText.innerHTML = "-" + damage;\n damageText.style.visibility = "visible";\n \n setTimeout(function() {\n damageText.style.visibility = "hidden";\n }, 500);\n}\n\nfunction attack(isPlayerA) {\n var damage = Math.floor(Math.random() * 10) + 1;\n \n if (isPlayerA) {\n healthB -= damage;\n showDamageText(damage, isPlayerA);\n \n if (healthB <= 0) {\n boxB.style.display = "none";\n alert("Player A wins!");\n }\n } else {\n healthA -= damage;\n showDamageText(damage, isPlayerA);\n \n if (healthA <= 0) {\n boxA.style.display = "none";\n alert("Player B wins!");\n }\n }\n \n updateHealthBar();\n}\n\nupdateHealthBar();\nsetInterval(function() {\n attack(Math.random() < 0.5);\n}, 1000);\n\n\n请将上述代码保存为三个文件：index.html，style.css和script.js，并在浏览器中打开index.html文件运行。战斗界面会显示两个方框AB，初始血量为100，背景为绿色。每秒钟随机选择一个方框进行攻击，攻击会随机扣除对方一定的血量，并显示扣血数量和抖动效果。当血量低于等于20时，背景会变成红色。当某个方框的血量降为0时，该方框会消失，并弹出提示获胜的消息框。