如何讓移動的精靈集中在屏幕上？

我已經創建了一個側面滾動遊戲，其中包括一個平移「照相機」和一個移動的精靈。平移「照相機」是由與主精靈的相反方向移動的障礙物產生的效果。問題在於精靈不在一個位置;它不斷在屏幕上移動，最終離開視野。 我希望精靈似乎在移動，但實際上它被設置在一個位置，因此它不會從視圖中移出屏幕。如何讓移動的精靈集中在屏幕上？

代碼移動雪碧：

ctx.beginPath(); 
ctx.moveTo(positionX - small, positionY - large); 
ctx.lineTo(positionX + small, positionY - large); 
ctx.lineTo(positionX + small, positionY); 
ctx.lineTo(positionX - small, positionY); 
ctx.closePath(); 
ctx.stroke();

小變量等於10，大變量等於20.這些變量在這裏是因爲我們隨着時間的推移精靈的大小變化。

守則「攝像機」：

function drawSquare1() { 
ctx.beginPath(); 
ctx.rect(250 - positionX, 145, 30, 30); 
ctx.fillStyle = "#FF0000"; 
ctx.fill(); 
ctx.closePath(); 
}

這些代碼行創建在我們的遊戲中移動的障礙物。具體行：
ctx.rect(250 - positionX, 145, 30, 30創建移動的「相機」錯覺。

所有代碼：

<!DOCTYPE html> 
<html> 

<body> 
<canvas id="canvas" width="2000" height="2000"></canvas> 

<script> 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 

    var positionX = 50.0; 
    var positionY = 175.0; 
    var velocityX = 2; 
    var velocityY = 0.0; 
    var gravity = 0.5; 
    var onGround = false; 
    var deaths = 0; 
    var points = 0; 
    var color = "#DCD93C"; 
    var change1 = 175; 

    //circle 1 
    var point1x1 = 339; 
    var point1x2 = 372; 
    var point1y1 = 90; 
    var point1y2 = 150; 
    var circlex1 = 350; 
    var circley1 = 100; 

    //circle 2 
    var point2x1 = 565; 
    var point2x2 = 590; 
    var point2y1 = 90; 
    var point2y2 = 150; 
    var circlex2 = 575; 
    var circley2 = 100; 

    //circle 3 
    var point3x1 = 855; 
    var point3x2 = 880; 
    var point3y1 = 20; 
    var point3y2 = 50; 
    var circlex3 = 865; 
    var circley3 = 35; 

    //square size change 
    small = 10; 
    large = 20; 



    window.addEventListener("mousedown", StartJump, false); 
    window.addEventListener("mouseup", EndJump, false); 

    Loop(); 

    function StartJump() { 
    if (onGround) { 
     velocityY = -12.0; 
     onGround = false; 
    } 
    } 

    function EndJump() { 
    if (velocityY < -6.0) 
     velocityY = -6.0; 
    } 

    function Loop() { 
    Update(); 
    Render(); 
    window.setTimeout(Loop, 30); 
    } 

    function Update() { 
    velocityY += gravity; 
    positionY += velocityY; 
    positionX += velocityX; 

    // Collision Detection // 
    if ((positionX > (239 - positionX) && positionX < (292 - positionX) && positionY > 145) || (positionX > (439 - positionX) && positionX < (492 - positionX) && positionY > 145) || (positionX > (639 - positionX) && positionX < (692 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 50 && positionY < 100) || (positionX > (1039 - positionX) && positionX < (1700 - positionX) && positionY > 166 && positionY < 176)) { 
     positionY = 175; 
     positionX = 50; 
     deaths++; 
     points = 0; 

     small = 10; 
     large = 20; 

// circle 1 

     circlex1 = 350; 
     circley1 = 100; 
     point1x1 = 339; 
     point1x2 = 372; 
     point1y1 = 90; 
     point1y2 = 150; 

//circle 2 

     circlex2 = 575; 
     circley2 = 100; 
     point2x1 = 565; 
     point2x2 = 595; 
     point2y1 = 90; 
     point2y2 = 150; 

//circle 3 

     point3x1 = 855; 
     point3x2 = 880; 
     point3y1 = 20; 
     point3y2 = 50; 
     circlex3 = 865; 
     circley3 = 35; 

    } 

    if (positionY > change1) { 
     positionY = change1; 
     velocityY = 0.0; 
     onGround = true; 
    } 

// End World 
    if (positionX < 0 || positionX > 2000) 
     velocityX *= -1; 

// Platform 1 
if (positionX > (1039 - positionX) && positionX < (1300 - positionX) && positionY > 101 && positionY < 111) 
    { 
    change1 = 111; 
    } 

    if (positionX > (1300 - positionX)) 
    { 
    change1 = 175; 
    } 

    //Platform 2 
if (positionX > (1439 - positionX) && positionX < (1510 - positionX) && positionY > 81 && positionY < 101) 
    { 
    change1 = 91; 
    } 

    if (positionX > (1510 - positionX)) 
    { 
    change1 = 175; 
    } 

//Platform 3 
if (positionX > (1600 - positionX) && positionX < (1750 - positionX) && positionY > 111 && positionY < 131) 
    { 
    change1 = 121; 
    } 

    if (positionX > (1750 - positionX)) 
    { 
    change1 = 175; 
    } 


// Point 1 
    if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > point1y1 && positionY < point1y2) { 
     points++; 
     circlex1 = -10; 
     circley1 = -10; 
     point1x1 = -10; 
     point1x2 = -10; 
     point1y1 = -10; 
     point1y2 = -10; 
     small += -2; 
     large = small * 2; 

    } 




// Point 2 
    if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > point2y1 && positionY < point2y2) { 
     points++; 
     circlex2 = -10; 
     circley2 = -10; 
     point2x1 = -10; 
     point2x2 = -10; 
     point2y1 = -10; 
     point2y2 = -10; 
     small += -2; 
     large = small * 2; 
    } 

// Point 3 
    if (positionX > (point3x1 - positionX) && positionX < (point3x2 - positionX) && positionY > point3y1 && positionY < point3y2) { 
     points++; 
     circlex3 = -10; 
     circley3 = -10; 
     point3x1 = -10; 
     point3x2 = -10; 
     point3y1 = -10; 
     point3y2 = -10; 
     small += -2; 
     large = small * 2; 
    } 

// Gets Bigger One 
    if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > 150) { 
     small += .2; 
     large = small * 2; 
    } 

// Gets Bigger Two 
      if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > 150) { 
     small += .2; 
     large = small * 2; 
    } 

// Gets Bigger Three 
      if (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 101 && positionY < 149) { 
     small += .2; 
     large = small * 2; 
    } 



    } 


    function drawPlatform1() { 
    ctx.beginPath(); 
    ctx.rect(1050 - positionX, 111, 250, 10); 
    ctx.fillStyle = "#0066FF"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawPlatform2() { 
    ctx.beginPath(); 
    ctx.rect(1450 - positionX, 91, 60, 10); 
    ctx.fillStyle = "#0066FF"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawPlatform3() { 
    ctx.beginPath(); 
    ctx.rect(1600 - positionX, 121, 150, 10); 
    ctx.fillStyle = "#0066FF"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare1() { 
    ctx.beginPath(); 
    ctx.rect(250 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawCircle1() { 
    ctx.beginPath(); 
    ctx.arc(circlex1 - positionX, circley1, 7, 7, 500); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawCircle2() { 
    ctx.beginPath(); 
    ctx.arc(circlex2 - positionX, circley2, 7, 7, 500); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawCircle3() { 
    ctx.beginPath(); 
    ctx.arc(circlex3 - positionX, circley3, 7, 7, 500); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
    } 


    function drawSquare2() { 
    ctx.beginPath(); 
    ctx.rect(450 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare3() { 
    ctx.beginPath(); 
    ctx.rect(650 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare5() { 
    ctx.beginPath(); 
    ctx.rect(850 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare6() { 
    ctx.beginPath(); 
    ctx.rect(1050 - positionX, 165, 700, 10); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare4() { 
    ctx.beginPath(); 
    ctx.rect(850 - positionX, 50, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawDeaths() { 
    ctx.font = "16px Arial"; 
    ctx.fillStyle = "#0095DD"; 
    ctx.fillText("Deaths: " + deaths, 10, 20); 
    } 

    function drawPoints() { 
    ctx.font = "16px Arial"; 
    ctx.fillStyle = "#0095DD"; 
    ctx.fillText("Points: " + points, 10, 50); 
    } 

    function Render() { 
    ctx.clearRect(0, 0, 2000, 2000); 
    drawPlatform1(); 
    drawPlatform2(); 
    drawPlatform3(); 
    drawCircle1(); 
    drawCircle2(); 
    drawCircle3(); 
    drawSquare1(); 
    drawSquare2(); 
    drawSquare3(); 
    drawSquare4(); 
    drawSquare5(); 
    drawSquare6(); 

    drawDeaths(); 
    drawPoints(); 

    ctx.beginPath(); 
    ctx.moveTo(0, 175); 
    ctx.lineTo(2000, 175); 
    ctx.stroke(); 



    ctx.beginPath(); 
    ctx.moveTo(positionX - small, positionY - large); 
    ctx.lineTo(positionX + small, positionY - large); 
    ctx.lineTo(positionX + small, positionY); 
    ctx.lineTo(positionX - small, positionY); 
    ctx.closePath(); 
    ctx.stroke(); 
    } 
</script> 
</body> 

</html>

Link to game

來源

2016-04-29 Mit

@DarkBee我重申了我的問題，並進行了更多細節，因爲我認爲這是我的另一個問題的問題？ – Mit

你應該刪除你的其他問題，然後......重構原始而不是重複會更好。 – Seth

如果你有一個太空飛船

ship = { 
    x : 100, 
    y : 200, 
}

，你通過比賽場

ship.move = function(){ 
    this.x += 2; 
}

，你甲肝移動它Ë萬個像素以上的規模上了一個大操場隨機放置一些對象

var objects = []; 
for(i = 0; i < 1000; i ++){ 
    objects.push(obj = { 
     x: Math.random() * 10000; 
     y: Math.random() * ctx.canvas.height; 
    });

那你只畫在那裏他們

 obj.draw = function(){ 
     ctx.drawImage(objectImage,this.x,this.y); 
    } 

}

您可以通過創建一個轉換，保持船建立一個視圖在中心。

所以在開始您的更新/主循環移動船

function update(){ // the update function called once a frame 
    // clear the screen 
    ship.move(); // move the ship

然後設置當前變換，使其在畫布寬度和高度可達半，離開了船。

ctx.setTransform(1,0,0,1,ship.x - ctx.canvas.width/2,ship.y - ctx.canvas.height/2);

繪製船，

ctx.drawImage(shipImage,ship.x,ship.y)

和借鑑的對象

for(i = 0; i < 1000; i ++){ 
    objects[i].draw(); 
}

現在你畫的一切將是相對於船。如果你在10000座標上遇到障礙物，並且船隻只有100，那麼你將不會看到障礙物，直到船隻靠近它。

如果你這樣做，那麼你可以繪製所有的東西，你不必擔心把所有東西都搬到船上。變換爲你帶來一切。

如果您希望船在屏幕上的不同位置，只需將船的偏移量更改爲畫布的左上角。

來源

2016-04-29 19:14:04 Blindman67

謝謝你的詳細解答！ – Mit

如何讓移動的精靈集中在屏幕上？

回答

相關問題