作者介绍

我是一名在校大三学生，对计算机编程非常感兴趣。有什么问题和困扰也是经常在博客找答案，(不过都是白嫖，哈哈 ) ，明天是我使用 CSDN 的一周年，刚好最近我写了一个植物大战僵尸游戏(html版)，希望能够在这里分享我的经验和成果。(全部免费) 同时也希望对这个项目感兴趣的朋友，有什么不懂的，可以在下面问我，我看见了会回复的。

(提示：

这是我第一次发作品，有什么不对的地方，希望大家可以提出，因为我是自学的，知识点也可能不对，干货满满，不过我的表达能力不太行，表达的不是很清楚，不过你要是问我，我会的，我肯定告诉你)

项目亮点

• 这个可以在手机QQ浏览器玩哦（把项目打包发给自己的QQ或者微信都行，然后用QQ浏览器解压，就可以在自己手机上玩自己的游戏了，也可以分享给自己的朋友，同学一起玩。）
• 游戏规则简单易懂，容易上手，但是难度逐渐增加，挑战性十足。
• 游戏中的植物都有不同的特殊能力，玩家可以根据自己的喜好和策略进行选择和搭配。

  植物大战僵尸项目展示

  -游戏展示

  植物大战僵尸

  -游戏主页

  点击游戏界面中的 “准备”，开始游戏。

  -游戏界面

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

  顶部为UI栏：

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

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

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

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

  -游戏画面-白天

  -游戏画面-夜晚

  注意：

  游戏开始，一分钟后地图由白天变为黑夜，之后每两分钟换一次地图，且每过一分钟生成僵尸的概率加大，玩家注意防守。不过只需要守住 6分钟就游戏胜利了，加油！！！

  -游戏失败画面

  当僵尸靠近你的房子时，结束游戏。

  -游戏胜利画面

  当你抵挡了僵尸6分钟的进攻时，游戏胜利。

  项目难点

  在开发过程中，我遇到了一些难点，包括：

  1. 生成的僵尸和种植的植物位置杂乱无章。

  不要慌，我已经解决，给游戏地图画个格子，就像下棋一样，简单吧

  如下图：

  -

  2. 如何实现植物和僵尸的不同能力，以及它们之间的交互。

  已解决，面向对象的方法，每个植物都有自己的个性

  代码展示：

  // 定义植物类
  function Plant(x, y,object) {
      this.x = x;
      this.y = y;
      this.object2 = object;
      this.Animation = {
          src:object.src,
          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); // 添加到植物列表
  }
  

  3. 如何设计游戏关卡，让玩家感到有趣和挑战。

  获取游戏时间，每一分钟游戏难度增加，这下应该有点挑战性了吧。

  代码展示：

  // 每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 = "挑战成功";
      }
      
  }
  

  4. 如何优化游戏性能，避免卡顿和崩溃。

  专门花了一天时间，优化了代码，把定时器该关的关了，消耗资源少。

  游戏思路介绍及部分代码分析 (源码在最后)

  1. 游戏显示区域主要分为三大区域

  -黄色：显示可以种植的植物信息。

  -蓝色：显示游戏的状态。

  -红色：游戏互动区域，植物和僵尸的战场。

  本来想一个功能一个功能的解释的，但是好像太多了，废话不多说，直接看源码。

  大家不要觉得代码多哈，其实把他分为各个模块，就一点都不多了，就1000多行代码，不多。

  游戏源码：