Hej, potrzebuję pomocy, a mianowicie chcę żeby klikając na przycisk W, nie można bylo go zaspamić tzn., żeby moc go kliknac go co np.3s.
Chcę też zrobic,aby pasek zycia warriorow schodzil proporcjonalnie do ich zabicia,a money dodawal się rowniez co np.3 sekundy. Probowalem roznymi spoboami, min settimeout,ale nic nie wychodzilo.I jeszcze pytanko dlaczego lepiej uzywac requestAnimationFrame niz setInterval?
Prosilbym o małą podpowiedz i wszelkie uwagi.
//////////////////////////////////////////////
<!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()
}
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();
}
function chooseButt(e){
var mouseX = e.clientX-10;
var mouseY = e.clientY-120
if(mouseX > 50 && mouseX < 100 && mouseY > 100 && mouseY < 100+50 && money >=50 &&Warriors.length <5 ){
Warrior = new warrior()
Warriors.push(Warrior)
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 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)
}
var money = 500;
function Money(){
//money
ctx.font = '16px Arial'
ctx.fillStyle = 'red'
ctx.fillText('Money: '+money,50,50)
money+=1
}
function enemy (){
this.x=cw-100
this.y=ch-170
this.w=40
this.h=70
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)
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;
Warriors[i].healthBar-=0.25
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>
