Witam, mam kolejny problem 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 :P
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>
