[問題] javascript 編程上一些小問題

[yenpaul (Paul)]

js新手發問

最近寫js碰到了一個瓶頸

我想在canvas上用飛機射出子彈

目前是用setInterval讓飛機和子彈運行

以下代碼均是寫在setInterval的函數內

可是子彈發生了一些問題

因為我想讓子彈從飛機上發射

所以子彈drawImage的x,y座標是用飛機座標的相對位置

然後X軸再多加一個會持續增加的dx

子彈X=飛機X+100+dx;
dx=dx+8;

可是這樣每次飛機動子彈也會被牽動

如果將子彈的x,y座標放到setInterval外子彈射出的位置和飛機位置就會不一樣

請問一下該如何解決這個問題呢?

另外我是用空白鍵啟動子彈

當keydown時會啟動drawImage

但是不知道為什麼他只會啟動一次

也就是只能射出一發

該如何設出多發子彈呢?

謝謝幫忙

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 142.129.18.133
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1466756928.A.958.html
推 ian90911: 請貼code
推 devil115789: 感覺是因為dx會被清掉 所以dx永遠都是8這樣 我猜的
→ ssccg: 子彈X不是=飛機X+...，是等於發射時的飛機X+...
→ akccakcctw: 按下空白鍵時取得當時飛機位置，子彈和飛機不要用相
→ akccakcctw: 對位置
謝謝大家給的建議

昨天想了很久還是想不出來該如何解

這邊貼出子彈的code

function draw(){
if (fireBullet == true){ //當按下空白鍵時會啟動
var bulletX = planeX + 100 + dx;
var bulletY = planeY + 55;
ctx.drawImage(bulletImg, bulletX, bulletY , 30, 15);
dx=dx+5;
   }
}
setInterval(draw, 10);

如果想要取得按空白鍵當時飛機位置又不用到planeX 跟planeY該如何設定呢?

謝謝
※ 編輯: yenpaul (142.129.18.133), 06/25/2016 01:07:41
推 ccvs: 邏輯怪怪的 dx的增減要獨立出來吧
→ ccvs: 你現在是按下空白鍵 dx+=5 只會run一次啊
dx=dx+5我放裡面跑跟外面跑的結果都一樣耶...

子彈是如預期的速度往前的

但是現在在想要怎麼按空白鍵的瞬間從飛機上發射又不用用到飛機的座標

推 xdraculax: 只有擊發時初始座標參考飛機，之後移動都參考自己座標
→ xdraculax: ，或是把子彈改成雷射(誤
→ bibo9901: 樓上XDD
※ 編輯: yenpaul (142.129.18.133), 06/25/2016 12:12:24
推 ccvs: 比較普遍的方法是寫一個子彈的物件 內建迴圈去增加dx
→ ccvs: 按下空白鍵時新建子彈物件
可是該如何設定子彈射出位置跟飛機一樣又不去用到飛機的座標呢?
※ 編輯: yenpaul (142.129.18.133), 06/25/2016 13:36:09
推 ccvs: 你指的是子彈初始位置吧 draw的方法一樣在子彈的物件裡啊
→ ccvs:  把飛機當前的座標傳進來當初始位置
有沒有什麼方法是bulletX, Y第一次用planeX, Y當起始點

後面行進就變成bulletY = bulletY//Y軸不變, bulletX = bulletX+dx//X軸加速前進

如果是這樣code該如何改呢?

另外要如何每次按都觸發一個新的子彈呢?

謝謝幫忙
※ 編輯: yenpaul (142.129.18.133), 06/25/2016 16:08:47
推 Hevak: 子彈是直線運動的話，你的每一個子彈物件都包含子彈座標X和
→ Hevak: Y，還有速度X和Y(射出時先算出來)，等四項屬性的話，只要se
→ Hevak: tInterval選取所有子彈，各自加各自各自的速度XY就好了吧，
→ Hevak: 不需要去顧慮飛機的位置在哪