HTML网页植物大战僵尸源码分享

maolai web前端评论188阅读模式

网页版植物大战僵尸游戏源码代码,植物大战僵尸优化版,HTML实现植物大战僵尸源码分享,html植物大战僵尸小游戏,游戏中的植物都有不同的特殊能力,玩家可以根据自己的喜好和策略进行选择和搭配。

演示地址http://www.bokequ.com/show/youxi/2/src/

	var game = document.getElementById('app');
         // 获取游戏界面元素
        var leftUI = document.getElementById('leftui');
        // 获取植物选择框
        var topUI = document.getElementById('topui');
        // 获取植物选择框
        var Go = document.getElementById('go');
        // 开始游戏按钮

        // 定义游戏状态
        var gameState = {
            plants: [],// 植物列表
            zombies: [],// 僵尸列表
            energys:[],//能量列表
            bullets: [],// 子弹列表
            toolbar:[],// 顶部UI栏列表
            labels:[],// 植物选择框列表
            geids:[], // 网格坐标列表
            isOver: "",// 游戏是否结束
            occupy:false,  // 选中的植物的对象
            delete:false,//选择要删除的植物
            grade:0,//得分
            startTime1:0,  //游戏运行时间
            startTime2:0,  //游戏运行时间
            pro:0.01

        };

        // 定义植物属性
        var PlantUte = {
            // 向日葵
            SunFlower:{
                name:"向日葵",
                price:50,
                uisrc1:"../images/cards/plants/SunFlower.png",
                uisrc2:"../images/cards/plants/SunFlowerG.png",
                datasrc:"../images/plants/sunflower/idle/idle_0.png",
                url:"../images/plants/sunflower/idle/idle_",
                count:17,
                hp:100,
                attack:0,
                speed:0,
                range:0,
                color:"red"
            },
            // 初级豌豆射手
            Peashooter:{
                name:"初级豌豆射手",
                price:50,
                uisrc1:"../images/cards/plants/Peashooter.png",
                uisrc2:"../images/cards/plants/PeashooterG.png",
                datasrc:"../images/plants/peashooter/attack/attack_0.png",
                url:"../images/plants/peashooter/attack/attack_",
                count:7,
                hp:100,
                attack:5,
                speed:500,
                range:500,
                color:"chartreuse"
            },
            // 中级豌豆射手
            Repeater:{
                name:"中级豌豆射手",
                price:100,
                uisrc1:"../images/cards/plants/Repeater.png",
                uisrc2:"../images/cards/plants/RepeaterG.png",
                datasrc:"../images/plants/repeater/attack/attack_0.png",
                url:"../images/plants/repeater/attack/attack_",
                count:14,
                hp:100,
                attack:10,
                speed:500,
                range:500,
                color:"chartreuse"
            },
            // 高级豌豆射手
            GatlingPea:{
                name:"高级豌豆射手",
                price:200,
                uisrc1:"../images/cards/plants/GatlingPea.png",
                uisrc2:"../images/cards/plants/GatlingPeaG.png",
                datasrc:"../images/plants/gatlingpea/attack/attack_0.png",
                url:"../images/plants/gatlingpea/attack/attack_",
                count:12,
                hp:100,
                attack:10,
                speed:300,
                range:500,
                color:"chartreuse"
            },
            // 番茄炸弹
            CherryBomb:{
                name:"番茄炸弹",
                price:200,
                uisrc1:"../images/cards/plants/CherryBomb.png",
                uisrc2:"../images/cards/plants/CherryBombG.png",
                datasrc:"../images/plants/cherrybomb/idle/idle_0.png",
                url:"../images/plants/cherrybomb/idle/idle_",
                count:6,
                hp:50,
                attack:100,
                speed:1000,
                range:57,
                color:"rgba(0,0,0,0)"
            },
            // 食人花
            Chomper:{
                name:"食人花",
                price:300,
                uisrc1:"../images/cards/plants/Chomper.png",
                uisrc2:"../images/cards/plants/ChomperG.png",
                datasrc:"../images/plants/chomper/attack/attack_0.png",
                url:"../images/plants/chomper/attack/attack_",
                count:8,
                hp:100,
                attack:20,
                speed:100,
                range:57,
                color:"rgba(0,0,0,0)"
            },
            // 坚果防御
            WallNut:{
                name:"坚果防御",
                price:50,
                uisrc1:"../images/cards/plants/WallNut.png",
                uisrc2:"../images/cards/plants/WallNutG.png",
                datasrc:"../images/plants/wallnut/idleH/idleH_0.png",
                url:"../images/plants/wallnut/idleH/idleH_",
                count:15,
                hp:1000,
                attack:0,
                speed:0,
                range:0,
                color:"red"
            }
        }
        
        // 顶部UI类
        function ToolBar(text,style){
            this.text = text;
            this.element = document.createElement('div');
            this.element.className = style;
            this.element.innerText = this.text;
            topUI.appendChild(this.element); // 添加到游戏选择UI框
            gameState.toolbar.push(this)
        }
       
        // 植物选择框类
        function Labels(object){
            this.object = object;
            this.price=object.price;// 价格
            this.uisrc1 = "url("+object.uisrc1+")";// UI图标路径
            this.uisrc2 = "url("+object.uisrc2+")";
            this.occupy = false;//是否选中
            this.element = document.createElement('div'); // 元素节点
            this.element.className = 'plantui'; // 添加样式
            this.element.style.backgroundImage = this.uisrc1;
            this.element.innerText=this.price;// 显示价格
            leftUI.appendChild(this.element); // 添加到游戏选择UI框
            gameState.labels.push(this); // 添加到植物选择框列表
        }

        // 网格坐标类
        function Geid(x,y){
            this.x = x;
            this.y = y;
            this.occupy = false;
            this.element = document.createElement("div");
            this.element.className = "geid";
            this.element.style.top = this.y + 'px'; // 设置位置
            this.element.style.left = this.x + 'px';
            game.appendChild(this.element)
            gameState.geids.push(this)
        }

        // 定义能量类
        function EnErgy(object){
            this.object = object;
            this.x = object.x;
            this.y = object.y+50;
            this.hp = true;
            this.element = document.createElement('img'); // 元素节点
            this.element.src = "../images/sun.gif" ;
            this.element.className = 'energy'; // 添加样式
            this.element.style.top = this.y + "px";
            this.element.style.left = this.x + "px";
            game.appendChild(this.element); // 添加到游戏界面
            gameState.energys.push(this);
        }

        // 定义植物类
        function Plant(x, y,object) {
            this.x = x;
            this.y = y;
            this.object = object;
            this.Animation = {
                src:object.datasrc,
                url:object.url,
                count:object.count,
                num:0,
                animation:false
            }
            this.set = "set"+this.x+this.y
            this.name = object.name;//名字
            this.hp = object.hp; // 血量
            this.attack = object.attack; // 攻击力
            this.speed = object.speed; // 攻击速度
            this.range = object.range; // 射程
            this.color = object.color;//攻击颜色
            this.lastAttackTime = 0; // 上次攻击时间
            this.element = document.createElement('div'); // 元素节点
            this.element.className = 'plant'; // 添加样式
            this.element.style.top = this.y + 'px'; // 设置位置
            this.element.style.left = this.x + 'px';
            
            this.element2 = document.createElement('img'); // 元素节点
            this.element2.className = 'plantimg'; // 添加样式
            this.element2.src = this.Animation.src;
            this.element2.alt = this.name;
            this.element3 = document.createElement('span'); // 元素节点
            this.element3.className = 'plantspan'; // 添加样式
            this.element3.innerText = this.hp;

            game.appendChild(this.element); // 添加到游戏界面
            this.element.appendChild(this.element2); // 添加img标签
            this.element.appendChild(this.element3); // 添加h1标签
            gameState.plants.push(this); // 添加到植物列表

        }

        // 定义僵尸类
        function Zombie(x, y) {
            this.x = x;
            this.y = y;
            // 僵尸动画属性
            this.Animation = {
                src:"../images/zombies/run/run_0.png",
                url:"../images/zombies/run/run_",
                count:30,
                num:0,
                animation:false
            }
            this.hp = 100; // 血量
            this.attack = 1; // 攻击力
            this.speed = 1; // 移动速度
            this.speedG = 50; // 攻击速度
            this.range = 50; // 射程
            this.rice = false;
            this.lastAttackTime = 0; // 上次攻击时间
            this.element = document.createElement('div'); // 元素节点
            this.element.className = 'zombie'; // 添加样式
            this.element.style.top = this.y + 'px'; // 设置位置
            this.element.style.left = this.x + 'px';
            this.element2 = document.createElement('img'); // 元素节点
            this.element2.className = 'zombieimg'; // 添加样式
            this.element2.src = this.Animation.src;
            this.element3 = document.createElement('span'); // 元素节点
            this.element3.className = 'zombiespan'; // 添加样式
            this.element3.innerText = this.hp;
            game.appendChild(this.element); // 添加到游戏界面
            this.element.appendChild(this.element3); // 添加img标签
            this.element.appendChild(this.element2); // 添加img标签
            gameState.zombies.push(this); // 添加到僵尸列表
        }

        // 定义子弹类
        function Bullet(plant, target) {
            this.x = plant.x;
            this.y = plant.y;
            this.speed = 5; // 移动速度
            this.attack = plant.attack;//攻击大小
            this.target = target; // 目标对象
            this.element = document.createElement('div'); // 元素节点
            this.element.className = 'bullet'; // 添加样式
            this.element.style.backgroundColor = plant.color;//子弹颜色
            this.element.style.borderColor = plant.color;
            this.element.style.left = this.x + 'px';// 设置位置
            this.element.style.top = this.y + 'px'; 
            game.appendChild(this.element); // 添加到游戏界面
            gameState.bullets.push(this); // 添加到子弹列表
        }

        // 初始化选择框UI
        var InitUI = function(){

            // 初始化网格线坐标
            for(var i=0;i<5;i++){
                for(var j=0;j<9;j++){
                    new Geid(parseInt(j*80+240),parseInt(i*100+60))
                }
            }

            // 创建顶部UI信息栏对象实例
            new ToolBar(500,"vessel");//能量收集
            new ToolBar("","delete"); //铲子
            new ToolBar(0,"grade"); //销毁僵尸数量
            new ToolBar("00:00","nz"); //游戏时间

            // 创建UI标签栏对象实例
            new Labels(PlantUte.SunFlower); //向日葵
            new Labels(PlantUte.Peashooter); //初级豌豆射手
            new Labels(PlantUte.Repeater); //中级豌豆射手
            new Labels(PlantUte.GatlingPea); //高级豌豆射手
            // new Labels(PlantUte.CherryBomb); //番茄炸弹
            new Labels(PlantUte.Chomper); //食人花
            new Labels(PlantUte.WallNut); //坚果防御
        }

        // 游戏时间
        var Initnz = function(){
            let time = Date.now()-gameState.startTime2;
            var date = new Date(time);
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            var strDate = m+s;
            gameState.toolbar[3].element.innerText = strDate;
        }

        // 开始游戏按钮
        Go.onclick = function(){
            console.log("开始游戏");
            InitUI();
            gameState.startTime1 = Date.now();
            gameState.startTime2 = Date.now();
            
            // 游戏主循环定时器
            var Appset =  setInterval(function(){
                // 游戏时间
                Initnz()
                // 随机生成僵尸
                if (Math.random() < gameState.pro) {
                    console.log("生成僵尸:",gameState.pro)
                    new Zombie(1130, parseInt(Math.random()*5)*100+60);
                }

                // 选择要种植的植物
                gameState.labels.forEach(function(label){
                    if(label.price <= gameState.toolbar[0].element.innerText){
                        label.element.style.backgroundImage = label.uisrc1;
                        label.element.style.color = "black";
                    }else{
                        label.element.style.backgroundImage = label.uisrc2;
                        label.element.style.color = "red";
                    }
                    label.element.onclick = function(){
                        if(gameState.toolbar[0].element.innerText >= label.price){
                            gameState.occupy = label.object;
                            gameState.geids.forEach(function(geid){
                                if(geid.occupy){
                                    geid.element.style.borderColor="rgba(251, 4, 4,0.5)";
                                }else{
                                    geid.element.style.borderColor="rgba(222, 251, 4, 0.759)";
                                }
                            })
                        }
                    }
                })

                // 选择生成植物的网格坐标
                gameState.geids.forEach(function(geid){
                    geid.element.onclick = function(){
                        if(gameState.occupy){
                            geid.occupy = true
                            new Plant(geid.x,geid.y,gameState.occupy);
                            gameState.toolbar[0].element.innerText -=gameState.occupy.price; 
                            gameState.occupy=false;
                            gameState.geids.forEach(function(geid){
                                geid.element.style.borderColor="rgba(0, 0, 0,0)";
                            })
                        }
                        
                    }
                    
                })

                // 僵尸移动
                gameState.zombies.forEach(function(zombie) {
                    if(zombie.x>=170){
                        zombie.x -= zombie.speed;
                        zombie.element.style.left = zombie.x + 'px';
                    }else{
                        gameState.isOver = "挑战失败";
                    }
                });
              
                // 植物攻击僵尸
                gameState.plants.forEach(function(plant) {
                    gameState.zombies.forEach(function(zombie) {
                        if(zombie.y == plant.y){
                            if (zombie.x - plant.x <= plant.range && zombie.x > plant.x) {
                                if (Date.now() - plant.lastAttackTime >= plant.speed) {
                                    new Bullet(plant,zombie);
                                    plant.lastAttackTime = Date.now();
                                    if (zombie.hp <= 0) {
                                        gameState.toolbar[2].element.innerText = ++gameState.grade;
                                        game.removeChild(zombie.element);
                                        gameState.zombies.splice(gameState.zombies.indexOf(zombie), 1);
                                    }
                                }
                            }
                        }
                        
                    });
                });

                // 僵尸攻击植物
                gameState.zombies.forEach(function(zombie) {
                    gameState.plants.forEach(function(plant) {
                        if(zombie.y == plant.y){
                            if(zombie.x-plant.x <= zombie.range && zombie.x > plant.x ){
                                zombie.x = plant.x+zombie.range;
                                zombie.rice = true;
                                if (Date.now() - zombie.lastAttackTime >= zombie.speedG) {
                                    plant.hp-=zombie.attack;
                                    // zombie.rice = true;
                                    plant.element3.innerText = plant.hp;
                                    zombie.lastAttackTime = Date.now();
                                }
                                // zombie.rice = false;
                            }else{
                                zombie.rice = false;
                            }
                        }
                        // zombie.rice = false;
                        
                    });
                });

                // 判断该植物是否死亡,释放网格资源
                gameState.plants.forEach(function(plant){
                    gameState.geids.forEach(function(geid){
                        if(plant.hp<=0){
                            if(geid.x == plant.x && geid.y == plant.y){
                                geid.occupy = false;
                                game.removeChild(plant.element);
                                gameState.plants.splice(gameState.plants.indexOf(plant), 1);
                            }
                        }
                    })
                })

                // 检测子弹是否击中目标
                gameState.bullets.forEach(function(bullet) {
                    if (bullet.target && Math.abs(bullet.x - bullet.target.x) < 60) {
                        bullet.target.hp -= bullet.attack;
                        bullet.target.element3.innerText = bullet.target.hp;
                        game.removeChild(bullet.element);
                        gameState.bullets.splice(gameState.bullets.indexOf(bullet), 1);
                    } else {
                        bullet.x += bullet.speed;
                        bullet.element.style.left = bullet.x + 'px';
                    }
                });

                // 选择要删除的植物
                gameState.toolbar[1].element.onclick = function(){
                    console.log("删除植物");
                    gameState.delete = true;
                    gameState.geids.forEach(function(geid){
                        if(geid.occupy){
                            geid.element.style.borderColor="rgba(222, 251, 4, 0.759)";
                        }else{
                            geid.element.style.borderColor="rgba(251, 4, 4,0.5)";
                        }

                    
                    })

                }

                // 选择删除植物的网格坐标
                gameState.plants.forEach(function(plant){
                    plant.element.ondblclick = function(){
                        gameState.geids.forEach(function(geid){
                            if(gameState.delete){
                                if(geid.x == plant.x && geid.y == plant.y){
                                    geid.occupy = false;
                                    gameState.delete = false;
                                    plant.hp = 0;
                                    game.removeChild(plant.element);
                                    gameState.plants.splice(gameState.plants.indexOf(plant), 1);
                                }
                                gameState.geids.forEach(function(geid){
                                    geid.element.style.borderColor="rgba(0, 0, 0,0)";
                                })
                            }
                        })
                    }

                })

                // 游戏难度,每1分钟提升难度
                if(Date.now()-gameState.startTime1>=60000){
                    gameState.startTime1 = Date.now();
                    gameState.pro = gameState.pro+0.01;
                    console.log("难度升级:",gameState.pro);
                    if(gameState.pro >=0.02){
                        game.style.backgroundImage = "url(../images/background2.jpg)";
                    }
                    if(gameState.pro >=0.04){
                        game.style.backgroundImage = "url(../images/background1.jpg)";
                    }
                    if(gameState.pro >=0.06){
                        game.style.backgroundImage = "url(../images/background2.jpg)";
                    }
                    if(gameState.pro >=0.07){
                        gameState.isOver = "挑战成功";
                    }
                    
                }

                // 植物动画
                gameState.plants.forEach(function(plant){
                    if(!plant.Animation.animation){
                        var plantSet =  setInterval(function(){
                            if(plant.name == "坚果防御" && plant.hp<600 && plant.hp >=300){
                                plant.Animation.src = "../images/plants/wallnut/idleM/idleM_0.png";
                                plant.Animation.url = "../images/plants/wallnut/idleM/idleM_";
                                plant.Animation.count = 10;
                            }
                            if(plant.name == "坚果防御" && plant.hp<300){
                                plant.Animation.src = "../images/plants/wallnut/idleL/idleL_0.png";
                                plant.Animation.url = "../images/plants/wallnut/idleL/idleL_";
                                plant.Animation.count = 14;
                            }
                            if(plant.Animation.num<=plant.Animation.count){
                                plant.element2.src = plant.Animation.url+plant.Animation.num+".png";
                                plant.Animation.num++;
                            }else{
                                plant.Animation.num=0;
                            }
                            if(plant.hp<=0){
                                clearInterval(plantSet);
                            }
                 
                        },100);
                        plant.Animation.animation = !plant.Animation.animation;
                    }
                    
                    
                })

                // 僵尸动画
                gameState.zombies.forEach(function(zombie){
                    if(!zombie.Animation.animation){
                        var zombieSet =  setInterval(function(){
                            if(zombie.hp>20 && zombie.rice){
                                zombie.Animation.src = "../images/zombies/attack_0.png";
                                zombie.Animation.url = "../images/zombies/attack/attack_";
                                zombie.Animation.count = 20;
                            }else{
                                zombie.Animation.src = "../images/zombies/run/run_0.png";
                                zombie.Animation.url = "../images/zombies/run/run_";
                                zombie.Animation.count = 30;
                            }
                            if(zombie.hp<=20){
                                zombie.Animation.src = "../images/zombies/dying/body/body_0.png";
                                zombie.Animation.url = "../images/zombies/dying/body/body_";
                                zombie.Animation.count = 17;
                            }
                            if(zombie.hp<=5){
                                zombie.Animation.src = "../images/zombies/die/die_0.png";
                                zombie.Animation.url = "../images/zombies/die/die_";
                                zombie.Animation.count = 9;
                            }
                            if(zombie.hp<=1){
                                zombie.Animation.src = "../images/zombies/dying/head/head_0.png";
                                zombie.Animation.url = "../images/zombies/dying/head/head_";
                                zombie.Animation.count = 11;
                            }
                            if(zombie.Animation.num<=zombie.Animation.count){
                                zombie.element2.src = zombie.Animation.url+zombie.Animation.num+".png";
                                zombie.Animation.num++;
                            }else{
                                zombie.Animation.num=0;
                            }
                            if(zombie.hp<=0){
                                clearInterval(zombieSet);
                            }

                        },50);
                        zombie.Animation.animation = !zombie.Animation.animation;
                    }
                    
                })

                // 产生小太阳
                gameState.plants.forEach(function(plant){
                    if(plant.name == "向日葵"){
                        plant.name = "向日葵2";
                        var energyset =  setInterval(function(){
                            if(plant.hp>0){
                                new EnErgy(plant);
                            }else{
                                clearInterval(energyset);
                            }
                        },10000)
                    }
                })

                // 销毁小太阳
                gameState.energys.forEach(function(energy){
                    if(energy.hp){
                        energy.hp = false;
                        var energyYD = setInterval(function(){
                            if(energy.y>10){
                                energy.y--;
                                energy.element.style.top = energy.y+"px";
                            }
                            if(energy.x>140){
                                energy.x--;
                                energy.element.style.left = energy.x+"px";
                            }
                            if(energy.x <= 140 && energy.y <=10){
                                clearInterval(energyYD);
                                gameState.toolbar[0].element.innerText =parseInt(gameState.toolbar[0].element.innerText)+10;
                                game.removeChild(energy.element);
                                gameState.energys.splice(gameState.energys.indexOf(energy), 1);

                            }
                        },10)
                    }

                })

                // 如果游戏结束,停止循环
                if (gameState.isOver == "挑战失败") {
                    var End = document.createElement('div'); // 元素节点
                    End.className = "end";
                    game.appendChild(End);
                    clearInterval(Appset);
                    End.ondblclick = function(){
                        game.removeChild(End);
                        location.reload();
                    }
                }

                // 如果游戏通过,停止循环
                if (gameState.isOver == "挑战成功") {
                    var End = document.createElement('div'); // 元素节点
                    End.className = "vict";
                    End.innerText = gameState.grade;
                    game.appendChild(End);
                    clearInterval(Appset);
                    End.ondblclick = function(){
                        game.removeChild(End);
                        location.reload();
                    }
                }

            }, 50);
            setInterval(function(){
                gameState.toolbar[0].element.innerText++;
            }, 1000);
            game.removeChild(Go);
        }

植物选择栏:可以选择自己要种植的植物。

顶部为UI栏:

-能量值:游戏开始后,每秒能量值+1 ,可以通过种植向日葵来增加能量值。

-击败僵尸数:展示玩家击败的僵尸数量,同时也是游戏最后得分。

-铲子:可以删除玩家种植的植物。点击选择铲子,然后双击植物,挖掉植物。

-游戏时间:展示当前游戏运行的时间。

 
maolai
  • 本文由 maolai 发表于 2024年1月27日 02:30:31
  • 转载请务必保留本文链接:http://www.bokequ.com/522.html

发表评论