[英]HTML5 canvas game shoot bullet to mouse point.
Right now. 马上。 I have it setup to shoot bullets from the direction of my character. 我设置了从角色方向射击子弹的设置。 But I want to be able to shoot bullets to the mouse point, making it easier on the player. 但我希望能够向鼠标点射子弹,让玩家更轻松。
Right now it's 现在是
if(gun_1[i].direction == 2){ gun_1[i].x -= gun_1[i].speed * modifier};
if(gun_1[i].direction == 3){ gun_1[i].x += gun_1[i].speed * modifier};
if(gun_1[i].direction == 1){ gun_1[i].y -= gun_1[i].speed * modifier};
if(gun_1[i].direction == 4){ gun_1[i].y += gun_1[i].speed * modifier };
if(gun_1[i].direction == 5){ gun_1[i].y -= gun_1[i].speed * modifier; gun_1[i].x -= gun_1[i].speed * modifier };
if(gun_1[i].direction == 7){ gun_1[i].y += gun_1[i].speed * modifier; gun_1[i].x -= gun_1[i].speed * modifier };
if(gun_1[i].direction == 6){ gun_1[i].y -= gun_1[i].speed * modifier; gun_1[i].x += gun_1[i].speed * modifier };
if(gun_1[i].direction == 8){ gun_1[i].y += gun_1[i].speed * modifier; gun_1[i].x += gun_1[i].speed * modifier };
I want to be able to shoot to location of where the mouse was clicked. 我希望能够拍摄到单击鼠标的位置。 If it is possible. 如果可能的话。
Sure, that's not too hard. 当然,这不是太难。 But there is also a lot you can do to improve your current design. 但是,您还可以做很多事情来改进当前的设计。 First of all, add velocityX
and velocityY
fields so that on each step you just need to update the bullets' positions: 首先,添加velocityX
和velocityY
字段,以便在每一步中只需更新项目符号的位置:
gun_1[i].x += gun_1[i].velocityX
gun_1[i].y += gun_1[i].velocityY
Then when the mouse is pressed, set the bullets' velocities: 然后,当按下鼠标时,设置子弹的速度:
canvas.onmousedown = function(e) {
var dx = (e.x - character.x);
var dy = (e.y - character.y);
var mag = Math.sqrt(dx * dx + dy * dy);
// whatever you need to do to get gun_1[i]
gun_1[i].velocityX = (dx / mag) * speed;
gun_1[i].velocityY = (dy / mag) * speed;
}
If you know a thing or two about vectors we're just normalizing the direction vector and multiplying with the scalar initial speed. 如果您对向量有所了解,我们只是将方向向量归一化并乘以标量初始速度。
Another answer: 另一个答案:
gun_1[i].x += gun_1[i].velocityX;
gun_1[i].y += gun_1[i].velocityY;
var dx = (e.x - character.x);
var dy = (e.y - character.y);
var angle = Math.atan2(dy, dx);
gun_1[i].velocityX = Math.cos(angle) * speed;
gun_1[i].velocityY = Math.sin(angle) * speed;
var i=0;
var maxBullets=10;
var allBullets=[];//a array for objects
function bullet(){
this.vx=0;
this.vy=0;
this.inix=0;
this.iniy=0;
this.angleGrads=0;
this.angleRads=1.0;
this.active=false;
}
bullet.prototype.exist=function(){
//this.inix+=mathsin.bla,bla.bla.bla bla
if(this.x > wordWidth){
//kill this bullet
this.active=false;
}
}
bullet.prototype.draw=function(){
//ctx.draw bla, bla, bla
}
function newBullets(){
for(i=1;i<=maxBullets;i++){
allBullets[i]=new bullet();
}
}
function launchBullets(){
for(i=1;i<=maxBullets;i++){
if(!allBullets[i].active){
//detemine angle with a point an the mouse point
// math atan2() ;)
//asing values to this bullet
allBullets[i].angleGrads=angleMouse;
allBullets[i].inix=mousex;
allBullets[i].iniy=mousey;
allBullets[i].angleRads=(allBullets[i].angleGrads*PI)/180;
//and end
allBullets[i].active=true;
//get out
break;
}
}
}//end of launchBullets
function operations(){
for(i=1;i<=maxBullets;i++){
if(allBullets[i].active){
allBullets[i].exist();
}
}
}
function paint(){
for(i=1;i<=maxBullets;i++){
if(allBullets[i].active){
allBullets[i].draw();
}
}
}//end of draw scene
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.