JavaScript Tablica, gra

SidHelp · 14 Listopada 2018

Witam, mam kolejny problem, tym razem z tablica.A mianowicie staram się, aby drugi żołnierz z początku (niebieski kwadrat) zatrzymał się w czasie gdy pierwszy zrobi tą czynność jako pierwszy.

Moje pierwsze pytanie to: jak dostać się do żołnierza drugiego z początku, a drugie jak zrobić, aby każdy kolejny żołnierz oddziaływał na siebie tak jak pierwszy z drugim? W sensie, jeżeli pierwszy ustanie to i drugi, jeżeli drugi ustanie to trzeci itd.

Proszę o pomoc, nie gotowy kod.

btw. wiem, że kod jest napisany tragicznie. Przepraszam za ilość kodu, mogłem wyciąć co nie potrzebne

Kod główny pytania znajduje się w funkcji 'queue'

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tower defense</title>
<style>
body {
margin: 0;
 padding: 0;
 display: flex;
 align-items: center;
 height: 100vh;
 background-color: yellow;

}


canvas {

 background-color: black;
border: 10px
    solid #fff
}

</style>
<body>
<script>


const canvas =document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = 700;

const cw = canvas.width ;
const ch = canvas.height ;

var Warriors = []
var Enemy = new enemy()

for(var i=0;i< warrior.max;i++){
 Warriors[i] = new warrior()
}

function draw(){
czyszczenie()
budowle()
buttons()
Money()
for(var i =0;i<Warriors.length;i++){
Warriors[i].draw()
queue()
}
Enemy.draw()
fight()
};


function czyszczenie(){
 ctx.fillStyle = 'lightblue'
 ctx.fillRect(0,0,cw,ch)
}

function budowle(){
 ctx.lineJoin = 'round'
 //trawa
 ctx.strokeStyle = 'black'
 ctx.strokeRect(0,ch-100,cw,100)
 ctx.fillStyle = 'green'
 ctx.fillRect(0,ch-100,cw,100)


 //zamek
 ctx.lineWidth = '6'
ctx.strokeStyle = 'black'
ctx.strokeRect(0,ch-250,200,150)
 ctx.fillStyle = 'brown'
 ctx.fillRect(0,ch-250,200,150)

ctx.strokeRect(130,ch-340,70,90)
ctx.fillRect(130,ch-340,70,90)

//zamek enemy
ctx.lineWidth = '6'
ctx.strokeStyle = 'black'
ctx.strokeRect(cw-200,ch-250,cw-200,150)
ctx.fillStyle = 'yellow'
ctx.fillRect(cw-200,ch-250,cw-200,150)

ctx.strokeRect(cw-200,ch-340,70,90)
ctx.fillRect(cw-200,ch-340,70,90)
}


function warrior(){
 this.x=220;
 this.y=ch-100-50;
 this.w=30;
 this.h= 50;
 this.speed = 1;
 this.strength = 1;
 this.max = 5;
 this.life = 250;
 this.healthBar = 30;
 this.move = function (){
   this.x +=this.speed
 }
}



warrior.prototype.draw = function(){
 ctx.lineWidth = '5'
ctx.strokeStyle = 'black'
ctx.strokeRect(this.x,this.y,this.w,this.h)
//pasek zycia
ctx.fillStyle = 'red'
ctx.fillRect(this.x,this.y-40,this.healthBar,10)

 ctx.fillStyle = 'blue'
 ctx.fillRect(this.x,this.y,this.w,this.h)
 this.move();
}

var disabled = false;
function disabling (){
 disabled = false;
}

function chooseButt(e){
 var mouseX = e.clientX-10;
var  mouseY = e.clientY-120
//warriors butt
 if(mouseX > 50 && mouseX < 100 && mouseY > 100 && mouseY < 100+50 && money >=50 &&Warriors.length <5&&disabled == false){
disabled = true;
setTimeout(disabling,1000)
Warrior = new warrior()
   Warriors.push(Warrior)
 //nie konieczny warnuek
   if(Warriors.length <= Warrior.max){
   money-=50;
   }
 }
 //reset butt
 if(mouseX > cw/2-50 && mouseX < cw/2-50+170 && mouseY > 20 && mouseY < 20+80){
   document.location.reload()
 }
}
///////////////

function queue(){
 if(Warriors[i].speed ==0 ){
Warriors[Warriors.length-1].speed = 0;
 }
}
///////////////////////

function buttons(){
 //reset butt
ctx.font = '35px Arial'
   ctx.fillStyle = 'blue'
   ctx.fillRect(cw/2-50,20,170,80)

   ctx.lineWidth = '5'
 ctx.strokeStyle = 'black'
  ctx.strokeRect(cw/2-50,20,170,80)

   ctx.fillStyle = 'red'
   ctx.fillText("Reset",cw/2-10,72)

//wojownicy butt

ctx.lineWidth = '5'
ctx.strokeStyle = 'black'
ctx.strokeRect(50,100,50,50)

 ctx.fillStyle = 'yellow'
 ctx.fillRect(50,100,50,50)

 ctx.font = '16px Arial'
 ctx.fillStyle = 'red'
 ctx.fillText('W',67,130)

}

function updateMoney() {
      setTimeout(function(){
          updateMoney()
          money += 2;
      }, 1000);
  }
updateMoney()

var money = 500;
function Money(){
 //money
   ctx.font = '16px Arial'
   ctx.fillStyle = 'red'
   ctx.fillText('Money: '+money,50,50)
}


function enemy (){
 this.x=cw-100
 this.y=ch-170
 this.w=40
 this.h=70
 this.healthBar = 40
 this.strength = 2;
 this.speed= -2
 this.life = 500;
 this.move = function(){
   this.x+=this.speed
 }
}
enemy.prototype.draw = function (){
 ctx.lineWidth = '5'
 ctx.strokeStyle = 'black'
 ctx.strokeRect(this.x,this.y,this.w,this.h)

 //pasek zycia
 ctx.fillStyle = 'red'
 ctx.fillRect(this.x,this.y - 40,this.healthBar,10)

 ctx.fillStyle = 'red'
 ctx.fillRect(this.x,this.y,this.w,this.h)
 this.move()
}



function fight(){
 for(var i =0;i<Warriors.length;i++){
if(Warriors[i].x + Warriors[i].w > Enemy.x && Warriors[i].x < Enemy.x + Enemy.w ){

 Warriors[i].speed = 0;
 Enemy.speed =0;
 Warriors[i].life -=Enemy.strength;
 Enemy.life -=Warriors[i].strength;

 // 30 z 250 - 12% //  12% z 2 - 0.24
Warriors[i].healthBar-=0.12*Enemy.strength
Enemy.healthBar -=0.08 * Warriors[i].strength


 if(Warriors[i].life <=0 ){
   Enemy.speed -=2;
Warriors.shift()

}else if(Enemy.life <=0){
 Warriors[i].speed +=1;

}
}
 }
};


window.addEventListener('click',chooseButt)
setInterval(draw,1000/60)

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

Zaloguj się

Temat został przeniesiony do archiwum

JavaScript Tablica, gra

Rekomendowane odpowiedzi

SidHelp 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Ostatnio przeglądający 0 użytkowników

Tematy

Odpowiedzi

Aktywni użytkownicy

Przeglądaj

Aktywność