简单游戏战斗界面设计 - HTML, CSS, JavaScript 实现 - 常规

我可以给你提供一个基本的HTML和CSS代码来实现这个游戏简单的战斗界面。你可以根据自己的需求进行修改和美化。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>战斗界面</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div id="playerA" class="box">
            <div class="blood"></div>
            <div id="damageA" class="damage"></div>
        </div>
        <div id="playerB" class="box">
            <div class="blood"></div>
            <div id="damageB" class="damage"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

.container {
    display: flex;
}

.box {
    width: 100px;
    height: 50px;
    background-color: green;
    position: relative;
    margin: 10px;
    text-align: center;
}

.blood {
    height: 100%;
    background-color: green;
    transition: width 0.3s;
}

.damage {
    position: absolute;
    top: -20px;
    font-size: 20px;
    color: red;
    animation: shake 0.3s;
}

@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

JavaScript代码（script.js）：

var playerA = document.getElementById("playerA");
var playerB = document.getElementById("playerB");

var bloodA = 100;
var bloodB = 100;

var damageA = document.getElementById("damageA");
var damageB = document.getElementById("damageB");

function updateBlood() {
    var bloodElementA = playerA.querySelector(".blood");
    var bloodElementB = playerB.querySelector(".blood");

    bloodElementA.style.width = bloodA + "%";
    bloodElementB.style.width = bloodB + "%";

    if (bloodA < 20) {
        bloodElementA.style.backgroundColor = "red";
    } else {
        bloodElementA.style.backgroundColor = "green";
    }

    if (bloodB < 20) {
        bloodElementB.style.backgroundColor = "red";
    } else {
        bloodElementB.style.backgroundColor = "green";
    }
}

function attackA() {
    var damage = Math.floor(Math.random() * 4) + 1;
    bloodB -= damage;
    updateBlood();

    var damageElement = damageB;
    damageElement.textContent = damage;
    damageElement.style.animation = "shake 0.3s";
    setTimeout(function() {
        damageElement.style.animation = "";
    }, 300);

    if (bloodB <= 0) {
        playerB.style.display = "none";
        alert("Player A wins!");
    }
}

function attackB() {
    var damage = Math.floor(Math.random() * 4) + 1;
    bloodA -= damage;
    updateBlood();

    var damageElement = damageA;
    damageElement.textContent = damage;
    damageElement.style.animation = "shake 0.3s";
    setTimeout(function() {
        damageElement.style.animation = "";
    }, 300);

    if (bloodA <= 0) {
        playerA.style.display = "none";
        alert("Player B wins!");
    }
}

playerA.addEventListener("click", attackA);
playerB.addEventListener("click", attackB);

你可以将这些代码保存在同一个文件夹中，然后在浏览器中打开HTML文件，即可看到战斗界面。