HTML植物大战僵尸1.0

山持川游

已于 2024-11-05 21:41:13 修改

阅读量963

点赞数 26

文章标签： java

于 2024-11-04 22:16:13 首次发布

本文链接：https://blog.csdn.net/2402_88701856/article/details/143495475

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>植物大战僵尸</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
text-align: center;
margin-bottom: 20px;
}
.status-bar {
text-align: center;
margin-bottom: 10px;
}
.game-board {
display: grid;
grid-template-columns: repeat(9, 50px);
grid-gap: 2px;
}
.cell {
width: 50px;
height: 50px;
border: 1px solid #ccc;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
}
.plant {
background-color: green;
}
.zombie {
background-color: gray;
}
.sunflower {
background-color: yellow;
}
.peashooter {
background-color: darkgreen;
}
.wallnut {
background-color: brown;
}
.cherrybomb {
background-color: red;
}
.zombie-attack {
background-color: red;
}
</style>
<script>
const plants = {
sunflower: { cost: 50, attack: 0 },
peashooter: { cost: 100, attack: 20 },
wallnut: { cost: 50, attack: 0, defense: 50 },
cherrybomb: { cost: 150, attack: 50, range: 3 }
};

const zombies = [
{ type: 'basic', health: 100, attack: 10 },
{ type: 'conehead', health: 150, attack: 10 },
{ type: 'buckethead', health: 200, attack: 10 },
{ type: 'flag', health: 120, attack: 10, speed: 1.5 }
];