Why this generalization of the program doesn't work?


#1


https://www.codecademy.com/courses/javascript-beginner-en-mrTNH-6VIZ9/0/1?curriculum_id=506324b3a7dffd00020bf661

So I tried to make a better version of this little program, adding some "combat" between the warrior and the dragon, and a health bar to showcase the life points of your character.

The problem is that the healthbar doesn't work right. It is delayed. It shows your health with delay. See

For the love of god I spent all evening trying to fix it.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	 body{
		margin-left: 3px;
	}
	.persona{
		color:#382E94;
		width:500px;
}
	.dragon{
		color:#228819;
		width:500px;
}	
	.separador{
	height:5px;
	background: linear-gradient(to right, red , yellow);
	width:790px;
	border:1px solid #B2A8A8;
}
	
	.marco{
		width:800px;
		margin-left:0px;
	}
	
	
	.barrapersona{
		height:15px;
		width:121px;
		border:1px solid black ;
		padding:0px;
		box-shadow: 1px 1px grey;
		background:linear-gradient(to right, red , #0BFF01);
		float:right;
		margin-top: -52px;
		margin-right:120px;
		/*display:inline-block;*/
	}
	.unidad{
		height:15px;
		border-right: 1px solid #707070;
		float:left;
		position:relative;
		width:10px;
		margin:0px;
	}
	.unidad.u0{background-color:;}
	.unidad.u1{background-color:;}
	.unidad.u2{background-color:;}
	.unidad.u3{background-color:;}
	.unidad.u4{background-color:;}
	.unidad.u5{background-color:;}
	.unidad.u6{background-color:;}
	.unidad.u7{background-color:;}
	.unidad.u8{background-color:;}
	.unidad.u9{background-color:;}
	.unidad.u10{background-color:;}
	
</style>
</head>

<body>
<script>
var slaying = true;
var youHit = Math.floor(Math.random()*2);
var dragonHit = Math.floor(Math.random()*2);
var damageYouDidThisRound =0;
var damageDragonDidThisRound = 0;
var dragonHealthBar = 15;
var personHealthBar = 11;
var BP = new Array();
var barrapersona = document.createElement("DIV");
	barrapersona.setAttribute("class","barrapersona");
	for(var j=0; j <= 10; j++){
		BP[j] = document.createElement("DIV");
		BP[j].setAttribute("class","u"+j);
		BP[j].className+=" unidad";
		barrapersona.appendChild(BP[j]);
	}
var marco = document.createElement("DIV");
	marco.setAttribute("class","marco");
	document.body.appendChild(barrapersona);
	
while(slaying){
	var clonmarco = marco.cloneNode(true);
	document.body.appendChild(clonmarco);
	var clonbarrapersona = barrapersona.cloneNode(true);
	document.body.appendChild(clonbarrapersona);
	var CBP =new Array();
	for(i=0; i<=10; i++){
		CBP[i]= document.getElementsByClassName("u"+i+" unidad")[0]
	}
	
    if(youHit){
        damageYouDidThisRound = Math.floor(Math.random()*5 +1);
		dragonHealthBar -= damageYouDidThisRound;
        clonmarco.innerHTML="<p class='persona'>Congratulations, you did "+ damageYouDidThisRound + " damage to the dragon</p> <br> dragon's health/your health: "+dragonHealthBar+ " -- "+personHealthBar;
		clonmarco.appendChild(clonbarrapersona);
			if(personHealthBar<= 10){
				for(j=10;j >=personHealthBar; j--){
					CBP[j].style.backgroundColor="white";
				}
			}
        if(dragonHealthBar <= 0){
            clonmarco.innerHTML+="<p id='personamata'> You slayed the dragon! </p> <br>";
			clonmarco.appendChild(clonbarrapersona);
            slaying = false;
			break;
			}
    	youHit = Math.floor(Math.random()*2);
    	}
    else{
        clonmarco.innerHTML="<p class='persona'> ¡You missed! </p><br> dragon's health/your health: "+dragonHealthBar+" -- "+personHealthBar;
		clonmarco.appendChild(clonbarrapersona);
			if(personHealthBar<= 10){
				for(j=10;j >=personHealthBar; j--){
				CBP[j].style.backgroundColor="white";
				}
			}
        youHit = Math.floor(Math.random()*2);
    }
    if(dragonHit){
        damageDragonDidThisRound = Math.floor(Math.random()*7 +1);
		personHealthBar -= damageDragonDidThisRound;
        clonmarco.innerHTML+="<p class='dragon'>Dragon hits you for " + damageDragonDidThisRound + " points </p><br> your health: "+personHealthBar;
        if(personHealthBar <= 0){
            clonmarco.innerHTML+="<p id='dragonmata'> The dragon killed you</p> <br>";
            slaying = false;
			break;
        	}
    	dragonHit = Math.floor(Math.random()*2);
    	clonmarco.innerHTML+= "<div class='separador'> </div>";
    	}
    else{
        clonmarco.innerHTML+="<p class='dragon'>The dragon misses!</p> <br> your health: "+personHealthBar+"<div class='separador'> </div>";
        dragonHit = Math.floor(Math.random()*2);
    }
}

</script>
</body>
</html>


#2

So I tried correcting the mistake and the error seems to come from this part: when I define the variables CBP, they should clone the cloned health bar, not the original health bar.

The correct way should be something like this:

	for(i=0; i<=10; i++){
		CBP[i]= clonbarrapersona.getElementsByClassName("u"+i+" unidad")[0]
		}

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.