142 lines
4.6 KiB
JavaScript
142 lines
4.6 KiB
JavaScript
|
|
class Player extends Sprite {
|
|
constructor({position,clickX,clickY,incrementX,incrementY,userId,username,message,atPosition,animationColumn,imageSrc,frames,center,sprites}){
|
|
super({position,imageSrc,frames,center,atPosition,sprites})
|
|
// super({imageSrc})
|
|
this.clickX = clickX
|
|
this.clickY = clickY
|
|
this.angleDeg = 90
|
|
this.incrementX = incrementX
|
|
this.incrementY = incrementY
|
|
this.userId = userId
|
|
this.username = username
|
|
this.message = message
|
|
this.messageSent = false
|
|
|
|
|
|
}
|
|
|
|
debug(){
|
|
|
|
// ctx.beginPath()
|
|
|
|
// if(!this.atPosition){
|
|
// if(currentFrame%15==0){
|
|
// animationFrame++
|
|
// this.animationColumn = animationFrame
|
|
// }
|
|
// if (animationFrame> 2){
|
|
// animationFrame = 0;
|
|
// }
|
|
// }else{
|
|
// this.animationColumn = 0;
|
|
// }
|
|
|
|
|
|
// ctx.drawImage(img,this.animationColumn*frameWidth,row*frameHeight, frameWidth, frameHeight, this.position.x-frameWidth/2-8, this.position.y-frameHeight/2,frameWidth*2, frameHeight*2);
|
|
|
|
ctx.fillStyle = this.color;
|
|
|
|
ctx.textAlign = "center";
|
|
ctx.fillStyle = 'hsla(211, 100%, 100%, 0.5)';
|
|
ctx.font = 'normal 12px sans-serif';
|
|
|
|
ctx.fillText("Click X&Y :"+[this.clickX,this.clickY], this.position.x, this.position.y-110);
|
|
ctx.fillText("Position: "+[Math.round(this.position.x),Math.round(this.position.y)], this.position.x, this.position.y-98);
|
|
ctx.fillText("Inc X&Y :"+[this.incrementX.toFixed(2),this.incrementY.toFixed(2)], this.position.x, this.position.y-85);
|
|
ctx.font = 'bold 18px sans-serif';
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillText(this.message, this.position.x, this.position.y-65);
|
|
ctx.font = 'Normal 16px sans-serif';
|
|
ctx.textAlign = "center";
|
|
ctx.fillStyle = 'orange';
|
|
ctx.fillText("user ID: " + this.userId, this.position.x, this.position.y+35);
|
|
ctx.fillStyle = 'cyan';
|
|
ctx.fillText(this.username, this.position.x, this.position.y+15);
|
|
|
|
ctx.fill()
|
|
|
|
|
|
}
|
|
update(){
|
|
|
|
|
|
|
|
// if((Math.sign(incrementX)==1&&fPlayer.x<clickCoordinates[0])||(Math.sign(incrementX)==-1&&fPlayer.x>clickCoordinates[0])){fPlayer.x += incrementX;fPlayer.atPosition=false; socket.emit('clickPositionX',fPlayer.x)}else{fPlayer.atPosition=true}
|
|
// if((Math.sign(incrementY)==1&&fPlayer.y<clickCoordinates[1])||(Math.sign(incrementY)==-1&&fPlayer.y>clickCoordinates[1])){fPlayer.y += incrementY;fPlayer.atPosition=false; socket.emit('clickPositionY',fPlayer.y)}else{fPlayer.atPosition=true}
|
|
if(this.position.x.toFixed(2)!=this.clickX){
|
|
|
|
calculateIncrement(this);
|
|
|
|
// if(this.messageSent){
|
|
// var refreshId = setInterval(() =>{
|
|
// clearInterval(refreshId);
|
|
// this.message=''
|
|
// console.log("message deleted")
|
|
// this.messageSent=false
|
|
|
|
// },2000)
|
|
// }
|
|
console.log(this.messageSent)
|
|
|
|
if(length>1){
|
|
this.atPosition=false
|
|
|
|
if(225<this.angleDeg && this.angleDeg<315){this.image = this.Up; console.log('going up')}else
|
|
if(45<this.angleDeg && this.angleDeg<135){this.image = this.Down}else
|
|
if(135<this.angleDeg && this.angleDeg<225){this.image = this.Left}else{this.image = this.Right}
|
|
// console.log(this.angleDeg)
|
|
|
|
// switch(this.angleDeg){
|
|
// case -135:
|
|
// this.image = this.Up
|
|
// break;
|
|
// case 1:
|
|
// this.image = this.Down
|
|
// break;
|
|
// }
|
|
|
|
|
|
|
|
this.position.x+=this.incrementX;
|
|
this.position.y+=this.incrementY;
|
|
// console.log('goingtolocation')
|
|
|
|
} else{
|
|
this.atPosition=true
|
|
|
|
}
|
|
// function clearMessage(){
|
|
// this.message='t'
|
|
// console.log("message deleted")
|
|
// this.messageSent=false
|
|
// }
|
|
}
|
|
|
|
function calculateIncrement(player){
|
|
var dx = player.clickX - player.position.x;
|
|
var dy = player.clickY - player.position.y;
|
|
player.angleDeg = Math.atan2(dy, dx);
|
|
player.angleDeg *= 180 / Math.PI;
|
|
if(player.angleDeg<0) player.angleDeg = 360 + player.angleDeg
|
|
|
|
|
|
// console.log(player.angleDeg)
|
|
length = Math.sqrt(dx * dx + dy * dy);
|
|
// steps = length/speed;
|
|
player.incrementX = dx/length*speed;
|
|
player.incrementY = dy/length*speed;
|
|
// console.log(length)
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |