HTML5画布游戏射击子弹到鼠标点
HTML5 canvas game shoot bullet to mouse point.
现在。我把它设置成从我角色的方向射出子弹。但我希望能够将子弹射向鼠标点,让玩家更容易操作。
现在是
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 };
我希望能够拍摄到鼠标被点击的位置。如果可能的话。
当然,这并不难。但是你也可以做很多事情来改进你目前的设计。首先,添加velocityX
和velocityY
字段,这样在每一步中您只需要更新子弹的位置:
gun_1[i].x += gun_1[i].velocityX
gun_1[i].y += gun_1[i].velocityY
当按下鼠标时,设置子弹的速度:
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;
}
如果你对矢量略知一二我们只是将方向矢量归一化然后乘以标量初始速度。
另一个答案:
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
相关文章:
- 如何在HTML列表中添加事件's子弹
- bpopup 打开关闭不与关闭一起射击
- 使用 d3 可视化快速射击的“点击”
- 在多个子弹出窗口之间切换控制
- 将CSS从父窗口附加到子弹出窗口
- 向屏幕外发射子弹
- 从子弹出子窗口访问变量
- HTML5 JS-我如何使我的子弹/镜头在一个恒定的方向
- 在离子弹出窗口上传递值,但获取鼠标事件
- 将所选值从子页面传递回启动子弹出窗口的父页面中的行
- 离子弹出窗口中数组的索引更改
- 用户名和密码的离子弹出模板
- 关闭一个小盒子弹出
- J 旋转木马子弹控件
- 子添加和子多次更改射击
- 子弹物理(ammo.js)-你会如何对物体施加力
- 射击目标:单击鼠标->保留项目符号Hole.gif
- HTML5画布游戏射击子弹到鼠标点
- JavaScript游戏;子弹阵列;当我射击时,所有的子弹从玩家所在的地方重新发射
- 在设定的时间内向每个敌人射击3发子弹