魔法花园守护者

by CrystalRanger34
153 lines5.2 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>魔法花园守护者</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#1a2035;overflow:hidden}
#gameBox{width:900px;height:600px;background:#355e3b;margin:20px auto;position:relative;border:4px solid #724e2e}
.road{width:900px;height:100px;border-bottom:1px dashed #223d27}
#sunBox{position:absolute;top:10px;left:10px;color:#fff;font-size:24px}
.plant{width:70px;height:70px;border-radius:8px;position:absolute;cursor:pointer}
.monster{width:60px;height:60px;border-radius:50%;position:absolute;background:#772222}
.bullet{width:12px;height:12px;background:#fff;border-radius:50%;position:absolute}
#plantBar{width:900px;height:100px;background:#553822;margin:0 auto;display:flex;align-items:center;gap:10px;padding:0 10px}
.card{width:80px;height:90px;background:#997744;border:2px solid gold;border-radius:6px;text-align:center;color:white;padding:5px;cursor:pointer}
#tip{color:#fff;text-align:center;margin-top:10px;font-size:18px}
</style>
</head>
<body>
<div id="sunBox">魔力阳光：<span id="sun">150</span></div>
<div id="gameBox">
    <div class="road" style="top:0px"></div>
    <div class="road" style="top:100px"></div>
    <div class="road" style="top:200px"></div>
    <div class="road" style="top:300px"></div>
    <div class="road" style="top:400px"></div>
    <div class="road" style="top:500px"></div>
</div>
<div id="plantBar">
    <div class="card" onclick="selectPlant(1)">
        <div>星光花</div>
        <small>阳光:50</small>
    </div>
    <div class="card" onclick="selectPlant(2)">
        <div>荆棘藤</div>
        <small>阳光:75</small>
    </div>
    <div class="card" onclick="selectPlant(3)">
        <div>深海泡泡藻</div>
        <small>阳光:100</small>
    </div>
    <div class="card" onclick="selectPlant(4)">
        <div>魔法食人花</div>
        <small>阳光:150</small>
    </div>
</div>
<div id="tip">点击下方植物卡片，再点击草坪放置植物，抵御魔物入侵！</div>

<script>
let sunNum = 150;
let selectType = 0;
const gameBox = document.getElementById('gameBox');
const sunText = document.getElementById('sun');
let plantList = [];
let monsterList = [];

// 选择植物
function selectPlant(type){
    selectType = type;
}

// 点击草坪放置植物
gameBox.addEventListener('click',e=>{
    if(!selectType) return;
    let cost = 0;
    let bgColor = '';
    let attack = 0;
    if(selectType===1){cost=50;bgColor='#ffdd44';attack=0}
    if(selectType===2){cost=75;bgColor='#22bb55';attack=8}
    if(selectType===3){cost=100;bgColor='#33aadd';attack=12}
    if(selectType===4){cost=150;bgColor='#bb44aa';attack=20}
    if(sunNum < cost){alert("魔力阳光不足！");return}
    sunNum -= cost;
    sunText.innerText = sunNum;

    // 创建植物
    let plant = document.createElement('div');
    plant.className = 'plant';
    plant.style.background = bgColor;
    let plantX = e.offsetX;
    let plantY = Math.floor(e.offsetY/100)*100;
    plant.style.left = plantX + 'px';
    plant.style.top = plantY + 'px';
    gameBox.appendChild(plant);
    plantList.push({el:plant,x:plantX,y:plantY,atk:attack});
    selectType = 0;
})

// 自动产生阳光
setInterval(()=>{
    sunNum +=25;
    sunText.innerText = sunNum;
},7000)

// 生成怪物
function createMonster(){
    let roadNum = Math.floor(Math.random()*5)*100;
    let hp = 35;
    let monster = document.createElement('div');
    monster.className = 'monster';
    monster.style.left = '840px';
    monster.style.top = roadNum+20+'px';
    gameBox.appendChild(monster);
    let mObj = {el:monster,x:840,y:roadNum+20,hp:hp}
    monsterList.push(mObj);
    //怪物向左移动
    let move = setInterval(()=>{
        mObj.x -= 1;
        monster.style.left = mObj.x+'px';
        if(mObj.x<0){
            clearInterval(move);
            monster.remove();
            monsterList = monsterList.filter(m=>m!==mObj)
        }
    },40)
}
setInterval(createMonster,6000)

// 植物自动发射子弹攻击怪物
setInterval(()=>{
    plantList.forEach(plant=>{
        if(plant.atk === 0) return;
        //寻找同一条路上的怪物
        let target = monsterList.find(m=> Math.abs(m.y - plant.y) < 30 && m.x < plant.x);
        if(!target) return;
        //生成子弹
        let bullet = document.createElement('div');
        bullet.className = 'bullet';
        bullet.style.left = plant.x+35+'px';
        bullet.style.top = plant.y+35+'px';
        gameBox.appendChild(bullet);
        let bulletX = plant.x+35;
        let bulletMove = setInterval(()=>{
            bulletX += 6;
            bullet.style.left = bulletX+'px';
            //击中怪物
            if(Math.abs(bulletX-target.x)<25){
                target.hp -= plant.atk;
                bullet.remove();
                clearInterval(bulletMove);
                if(target.hp <= 0){
                    target.el.remove();
                    monsterList = monsterList.filter(m=>m!==target)
                }
            }
            if(bulletX>900){bullet.remove();clearInterval(bulletMove)}
        },25)
    })
},1200)
</script>
</body>
</html>
Game Source: 魔法花园守护者

Creator: CrystalRanger34
Libraries: none
Complexity: moderate (153 lines, 5.2 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-crystalranger34" to link back to the original. Then publish at arcadelab.ai/publish.