时间戳

首页 > 解决方案 > 为敌人制作一个有效的战斗系统

javascript - 为敌人制作一个有效的战斗系统

问题描述

试图制作一个让敌人受到伤害的战斗按钮。然后它会增加杀死计数，以便稍后禁用按钮，直到杀死一定数量的怪物。 https://jsfiddle.net/7nbvaszh/9/ 我的小提琴它的底部。我的敌人和 hp 堆叠得很好。我还应该补充一点，玩家应该在点击时损失等于敌人伤害的 hp，所以当老鼠受到 1 点伤害时，基本上是战斗按钮（这将是不同的，只是为了让它工作）所以它应该有 9 hp第一次点击，玩家应该有 9 hp（你可以为 hp 创建一个变量并将其设为 10 其 0 atm，因为我希望稍后解锁 hp，但只是为了测试目的，可以添加它）

我和我的朋友试过这个，但它不起作用

var currentEnemyName;
 var currentEnemyHp;

var hasEnemyToFight = false;

var enemyNames = ["rat     ","slime   ","goblin  ","skeleton","zombie  ","succubus"]
var enemyHps = [10,20,25,50,75,100]
var enemyStrengths = [1,3,5,10,15,25]

var currentItemIndex = 0;


  var ratKills = 0;
  var slimeKills = 0;
  var goblinKills = 0;
  var skeletonKills = 0;
  var zombieKills = 0;
  var succubusKills = 0;
  var Strength = 1;

  document.getElementById("enemyHp").innerHTML="";
  document.getElementById("enemyName").innerHTML="None";

 function spawnNewEnemy(enemyNum){
   currentEnemyName = enemyNames[enemyNum];
  currentEnemyHp = enemyHps[enemyNum];

  hasEnemyToFight = true;

  document.getElementById("enemyHp").innerHTML=currentEnemyHp;
  document.getElementById("enemyName").innerHTML=currentEnemyName;
  }


    function fight(){

 if(hasEnemyToFight == false){
 spawnNewEnemy(currentItemIndex)
 document.getElementById("enemyName").innerHTML=currentEnemyName+" appeared!";
 }

 else{

    if(currentEnemyHp > 0){
        currentEnemyHp -= 1;
    document.getElementById("enemyHp").innerHTML=currentEnemyHp;

    if (currentEnemyHp <=0){
        currentEnemyHp = 0;
        goldcoins += 10;

        hasEnemyToFight = false;

        if(enemyName == "rat"){
        ratKills++
        }
        else if(enemyName == "skeleton"){
        skeletonKills++
        }


        }
}

    document.getElementById("enemyHp").innerHTML=currentEnemyHp;
    document.getElementById("enemyName").innerHTML=currentEnemyName;
    document.getElementById("goldcoins").innerHTML=goldCoins;


}

我的工作代码的Javascript：

 function show() { 
    var enemy = enemyName[currentItemIndex];
    var enemyHitPoints = enemyHp[currentItemIndex];

document.getElementById("enemyName").innerHTML=enemyName[currentItemIndex]
    document.getElementById("enemyHp").innerHTML=enemyHp[currentItemIndex]
    document.getElementById("previous").disabled=currentItemIndex<=0;




   document.getElementById("next").disabled 
  =currentItemIndex>=enemyName.length- 
  1;

}

   var enemyName = ["rat     ","slime   ","goblin  ","skeleton","zombie  
","succubus"]
var enemyHp = [10,20,25,50,75,100]
var enemyStrength = [1,3,5,10,15,25]

var currentItemIndex = 0;




window.onload=function() {
  document.getElementById("previous").onclick=function() {
    currentItemIndex--;
    if (currentItemIndex<=0) {
      currentItemIndex=0;
    }
    show();       
  }
  document.getElementById("next").onclick=function() {
    currentItemIndex++;
    if (currentItemIndex>=enemyName.length-1) {
      currentItemIndex=enemyName.length-1;
    }
    show();       
  }


  var ratKills = 0;
  var slimeKills = 0;
  var goblinKills = 0;
  var skeletonKills = 0;
 var zombieKills = 0;
var succubusKills = 0;
var Strength = 1;


function fight(){
    if(enemyName == "rat" && enemyHp > 0)
        enemyHp = enemyHp - Strength;
    document.getElementById("enemyHp").innerHTML=enemyHp;
    if (enemyHp <=0)
        enemyHp = 0;
        goldcoins = goldcoins +10;
    document.getElementById("enemyHp").innerHTML=enemyHp;
    document.getElementById("goldcoins").innerHTML=enemyHp;


}






}

html:

 <button onclick="fight()" id="Fightbtn" >Fight</button> <span 
id="enemyName">rat</span>  &nbsp; Hp:<span id="enemyHp">10</span>
                <body>

 <style>
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
 background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}
</style>                   


<a href="#" id="previous" class="previous round">&#8249;</a>
<a href="#" id="next" class="next round">&#8250;</a>

        </body>

我希望当你按下战斗按钮让敌人的 hp 下降多少你有多少力量然后一旦 hp 低于 0 给予 10 金币然后敌人的 hp 重置回 10。但此刻战斗按钮不做任何事情，敌人的 hp 也不会下降。玩家的 hp 也应该下降 1 或任何敌人的伤害。我确定我缺少一个简单的解决方案来使我的 if 语句起作用。

标签： javascripthtml

解决方案

好的！这是在学习 javascript 的同时获得一些乐趣的良好开端。

你的小提琴坏了的主要原因：

  1. 有多个html,head和body标签。一个文档应该只有其中一个。
  2. 包含您的代码的脚本位于结束</html>标记之后，因此浏览器甚至没有执行它。
  3. 该fight函数（以及大量重要变量）是在window.onload函数内部声明的，因此您无法从按钮调用它。

一旦所有这些都解决了，fight函数本身就需要指向当前敌人的 hp。就目前而言，它将取代保存所有敌人 hp 信息的数组。

这是一个更新的小提琴，修复了前 3 个并将战斗功能值指向正确的位置。

这显示了更新的小提琴中的脚本内容，这是如何处理的工作草图：

var enemyName = ["rat", "slime", "goblin", "skeleton", "zombie", "succubus"]
var enemyHp = [10, 20, 25, 50, 75, 100]
var enemyStrength = [1, 3, 5, 10, 15, 25]
var enemyIsDead = false
var currentItemIndex = 0;
var goldcoins = 0
var enemy
var enemyHitPoints

var ratKills
var slimeKills
var goblinKills
var skeletonKills
var zombieKills
var succubusKills
var Strength

function show() {
  enemy = enemyName[currentItemIndex];
  enemyHitPoints = enemyHp[currentItemIndex];
  enemyIsDead = false
  document.getElementById("enemyName").innerHTML = enemyName[currentItemIndex]
  document.getElementById("enemyHp").innerHTML = enemyHp[currentItemIndex]
  document.getElementById("previous").disabled = currentItemIndex <= 0;
  document.getElementById("next").disabled = currentItemIndex >= enemyName.length - 1;
}


function fight() {
  if (enemyHitPoints > 0) {
    enemyHitPoints = enemyHitPoints - Strength;
    document.getElementById("enemyHp").innerHTML = enemyHitPoints;
  } else if (!enemyIsDead) {
    enemyHitPoints = 0;
    enemyIsDead = true
    goldcoins += 10;
    document.getElementById("enemyHp").innerHTML = enemyHitPoints;
    document.getElementById("goldcoins").innerHTML = goldcoins;
  }
}

window.onload = function () {
  ratKills = 0;
  slimeKills = 0;
  goblinKills = 0;
  skeletonKills = 0;
  zombieKills = 0;
  succubusKills = 0;
  Strength = 1;

  show()

  document.getElementById("previous").onclick = function () {
    currentItemIndex--;
    if (currentItemIndex <= 0) {
      currentItemIndex = 0;
    }
    show();
  }

  document.getElementById("next").onclick = function () {
    currentItemIndex++;
    if (currentItemIndex >= enemyName.length - 1) {
      currentItemIndex = enemyName.length - 1;
    }
    show();
  }
}

推荐阅读