帆布小行星遊戲

我正在用帆布在html5中製作小行星遊戲。我製作了可移動的船隻，它可以左右旋轉，並可以向前移動。當按鍵沒有按下時，我添加了摩擦來減慢速度。接下來要做的是射擊子彈/激光。我只有一槍，子彈向前，但它也跟着船的運動：/我不知道如何將它從船上拆下來，以及如何製造更多的子彈。帆布小行星遊戲

下面的代碼：

window.addEventListener('keydown',doKeyDown,true); 
    window.addEventListener('keyup',doKeyUp,true); 
    var canvas = document.getElementById('pageCanvas'); 
    var context = canvas.getContext('2d'); 
    var angle = 0; 
    var H = window.innerHeight; //*0.75, 
    var W = window.innerWidth; //*0.75; 
    canvas.width = W; 
    canvas.height = H; 
    var xc = W/2; //zeby bylo w centrum :v 
    var yc = H/2; //jw. 
    var x = xc; 
    var y = yc; 
    var dv = 0.2; 
    var dt = 1; 
    var vx = 0; 
    var vy = 0; 
    var fps = 30; 
    var maxVel = 10; 
    var frict = 0.99; 
    var brakes = 0.90; 
    var keys = new Array(); 
    var fire = false; 
    var laser = false; 
    ///////////////////lasery xD 
    var lx = 25, 
     ly = 9, 
     lw = 4, 
     lh = 4; 

    function doKeyUp(evt){ 
     keys[evt.keyCode] = false; 
     fire = false; 
    } 

    function doKeyDown(evt){ 
     keys[evt.keyCode] = true; 
    } 

    //OOOOOOOOOOOOOOOOOOLASEROOOOOOOOOOOOOOOOOOOOOOOOOOO 
    function drawLaser() { 
     context.fillStyle = "red"; 
     context.fillRect(lx,ly,lw,lh); 

    } 

    function moveLaser() { 
     lx += 2; 


    } 


    //OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO 
    function ogienZdupy(){ 
      context.fillStyle = "red"; 
      context.beginPath(); 
      context.moveTo(-2,2); 
      context.lineTo(2,10); 
      context.lineTo(-2,18); 
      context.lineTo(-25,10); 
      context.lineTo(-2,2); 
      context.strokeStyle = "red"; 
      context.stroke(); 
     } 

    function convertToRadians(degree) { 
     return degree*(Math.PI/180); 
    } 

    function incrementAngle() { 
     angle += 5; 
     if(angle > 360){ 
      angle = 0; 
      } 
    } 

    function decrementAngle(){ 
     angle -= 5; 
     if(angle > 360){ 
      angle = 0; 
      } 
    } 
    function xyVelocity(){ 
     vx += dv * Math.cos(convertToRadians(angle)); //* friction; 
     vy += dv * Math.sin(convertToRadians(angle)); //* friction; 
     if(vx > maxVel){ 
      vx = maxVel; 
     } 
     if(vy > maxVel){ 
      vy = maxVel; 
     } 
    } 

    function shipMovement(){ 
     if(38 in keys && keys[38]){ 
      xyVelocity(); 
      fire = true; 
     } 
     if(40 in keys && keys[40]){ 
      vx = 0; 
      vy = 0; 
     } 

     if(37 in keys && keys[37]){ 
      decrementAngle(); 
     }; 
     if (39 in keys && keys[39]){ 
      incrementAngle(); 
     }; 
     if (32 in keys && keys[32]){ 
      laser = true; 
     }; 
    } 

    function xyAndFriction(){ 

     x += vx * dt; 
     y += vy * dt; 

     vx *= frict; 
     vy *= frict; 

    } 

    function outOfBorders(){ 

     if(x > W){ 
      x = x - W; 
      } 
     if(x< 0){ 
      x = W; 
     } 

     if(y > H){ 
      y = y - H; 
     } 

     if(y < 0){ 
      y = H; 
     } 
    } 

    function blazeatron420(){ 
     context.beginPath(); 
     context.moveTo(0,0); 
     context.lineTo(20,10); 
     context.lineTo(0,20); 
     context.lineTo(7,10); 
     context.lineTo(0,0); 
     context.strokeStyle = "green"; 
     context.stroke(); 
    } 

    function space(){ 
     context.fillStyle = "black"; 
     context.fillRect(0,0,W,H); 
    } 

    function drawEverything() { 

     shipMovement(); 
     xyAndFriction(); 
     outOfBorders(); 

     //context.save(); 
     space(); 
     context.save(); 
     context.translate(x,y); 
     //context.translate(25,25); 
     context.rotate(convertToRadians(angle)); 
     context.translate(-7,-10); 
     if(fire){ 
      ogienZdupy(); 
     } 
     if(laser){ 
      drawLaser(); 
      moveLaser(); 
     } 
     context.fillStyle = "green"; 
     //context.fillText(vx + " ｋｍ／ｈ",50,50); 
     /*context.fillText("dupa",-30,0); 
     context.beginPath(); 
     context.moveTo(-20,5); 
     context.lineTo(-5,10); 
     context.strokeStyle = "green"; //KOLOR LINII ;_; 
     context.stroke();*/ 
     blazeatron420(); 
     context.restore(); 
    } 

    setInterval(drawEverything, 20);

和提琴http://jsfiddle.net/tomasthall/q40zvd6v/1/

來源

2015-04-23 TomasThall

我forgote改變它：/抱歉 – TomasThall

我搬到你的激光繪製出旋轉的上下文。在發射的瞬間發起lx和ly到x y。

laser = true; 
lx = x; 
ly = y;

http://jsfiddle.net/q40zvd6v/2/

現在你需要隨便給激光適當的載體。這可以從你的船的角度和一些三角學來計算。

 if (32 in keys && keys[32]){ 
      laser = true; 
      lx = x; 
      ly = y; 
      var angle_in_radians = convertToRadians(angle); 
      lvx = Math.cos(angle_in_radians);     
      lvy = Math.sin(angle_in_radians); 
     };

而且現在細筍： http://jsfiddle.net/q40zvd6v/4/

如果添加船載體雖然拋射矢量看起來更漂亮。

 if (32 in keys && keys[32]){ 
      laser = true; 
      lx = x; 
      ly = y; 
      var angle_in_radians = convertToRadians(angle); 
      lvx = Math.cos(angle_in_radians);     
      lvy = Math.sin(angle_in_radians); 
      lvx += vx; 
      lvy += vy; 
     };

http://jsfiddle.net/q40zvd6v/5/

你的遊戲好運氣：>

來源

2015-04-23 12:44:15 sEver

完美的作品：d感謝的人：d – TomasThall

很高興能幫助：> – sEver

@sEver任何想法，如果像這樣的東西適用於DOM？ http://stackoverflow.com/questions/43723656/transforms-are-added-endlessly –

這是你的問題就在這裏：

 context.rotate(convertToRadians(angle)); 
     context.translate(-7,-10);

你旋轉畫布上的一切..

時實際上你只應該旋轉blazeatron420

請看看這個問題： How do I rotate a single object on an html 5 canvas?

，看到了解決方案，用於旋轉一個單一的「對象」 ..

來源

2015-04-23 12:35:03 Henrik

帆布小行星遊戲

回答

相關問題