如何让移动的精灵集中在屏幕上？

我已经创建了一个侧面滚动游戏，其中包括一个平移“照相机”和一个移动的精灵。平移“照相机”是由与主精灵的相反方向移动的障碍物产生的效果。问题在于精灵不在一个位置;它不断在屏幕上移动，最终离开视野。 我希望精灵似乎在移动，但实际上它被设置在一个位置，因此它不会从视图中移出屏幕。如何让移动的精灵集中在屏幕上？

代码移动雪碧：

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

如何让移动的精灵集中在屏幕上？

回答

相关问题