帮我用JS+CSS+html设计出一个战斗界面动画要求如下：两个方框AB初始满血100背景绿色。两个方框战斗A与B互相打架。随机扣血每一次扣血都会头部都会显示扣血数量并且会抖动一下。当血量剩余20以下的时候背景变红。谁的血量先达到0就消失。剩下的提示获胜。

以下是一个简单的实现战斗界面动画的示例代码：

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>战斗界面动画</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div id="boxA" class="box">
      <div id="healthA" class="health-bar"></div>
      <div id="damageA" class="damage-text"></div>
    </div>
    <div id="boxB" class="box">
      <div id="healthB" class="health-bar"></div>
      <div id="damageB" class="damage-text"></div>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

CSS (style.css):

.container {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}

.box {
  width: 150px;
  height: 150px;
  background-color: green;
  position: relative;
}

.health-bar {
  width: 100%;
  height: 20px;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

.damage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: white;
  visibility: hidden;
  animation: shake 0.3s linear infinite;
}

@keyframes shake {
  0% { transform: translate(-50%, -50%); }
  10% { transform: translate(-55%, -50%); }
  20% { transform: translate(-50%, -50%); }
  30% { transform: translate(-55%, -50%); }
  40% { transform: translate(-50%, -50%); }
  50% { transform: translate(-55%, -50%); }
  60% { transform: translate(-50%, -50%); }
  70% { transform: translate(-55%, -50%); }
  80% { transform: translate(-50%, -50%); }
  90% { transform: translate(-55%, -50%); }
  100% { transform: translate(-50%, -50%); }
}

.red-bg {
  background-color: red !important;
}

JavaScript (script.js):

var healthA = 100;
var healthB = 100;

var boxA = document.getElementById("boxA");
var boxB = document.getElementById("boxB");
var healthBarA = document.getElementById("healthA");
var healthBarB = document.getElementById("healthB");
var damageTextA = document.getElementById("damageA");
var damageTextB = document.getElementById("damageB");

function updateHealthBar() {
  healthBarA.style.width = healthA + "%";
  healthBarB.style.width = healthB + "%";
  
  if (healthA <= 20) {
    boxA.classList.add("red-bg");
  } else {
    boxA.classList.remove("red-bg");
  }
  
  if (healthB <= 20) {
    boxB.classList.add("red-bg");
  } else {
    boxB.classList.remove("red-bg");
  }
}

function showDamageText(damage, isPlayerA) {
  var damageText = isPlayerA ? damageTextA : damageTextB;
  damageText.innerHTML = "-" + damage;
  damageText.style.visibility = "visible";
  
  setTimeout(function() {
    damageText.style.visibility = "hidden";
  }, 500);
}

function attack(isPlayerA) {
  var damage = Math.floor(Math.random() * 10) + 1;
  
  if (isPlayerA) {
    healthB -= damage;
    showDamageText(damage, isPlayerA);
    
    if (healthB <= 0) {
      boxB.style.display = "none";
      alert("Player A wins!");
    }
  } else {
    healthA -= damage;
    showDamageText(damage, isPlayerA);
    
    if (healthA <= 0) {
      boxA.style.display = "none";
      alert("Player B wins!");
    }
  }
  
  updateHealthBar();
}

updateHealthBar();
setInterval(function() {
  attack(Math.random() < 0.5);
}, 1000);

请将上述代码保存为三个文件：index.html，style.css和script.js，并在浏览器中打开index.html文件运行。战斗界面会显示两个方框AB，初始血量为100，背景为绿色。每秒钟随机选择一个方框进行攻击，攻击会随机扣除对方一定的血量，并显示扣血数量和抖动效果。当血量低于等于20时，背景会变成红色。当某个方框的血量降为0时，该方框会消失，并弹出提示获胜的消息框