邊界，你無法通過（帆布遊戲）

Question

去，我必須做出對學校遊戲:)

我'在Javascript（英文）初學者，我有一個關於畫布的問題。

我在畫布上製作了一個飛船，我可以用箭頭鍵在它周圍飛翔。問題是我的飛船可以飛過我的畫布邊界..那不是它的必要條件。

我希望你們中的一位能幫助我！ :)

這裏是我的代碼..

window.onload = init; 
var ctx; 
var x = 750; 
var y = 400; 
var up = false; 
var right = false; 
var left = false; 
var gravity = -1.1; 
var horizontalSpeed = 0.1; 
function init() { 
    document.onkeydown = handleKeyDown; 
    document.onkeyup = handleKeyUp; 
    var canvas = document.querySelector("canvas"); 
    ctx = canvas.getContext("2d"); 
    animate(); 

} 

function animate() { 
    moveShip(); 
    drawScene(); 
    requestAnimationFrame(animate); 
} 
function drawScene(){ 
    ctx.clearRect(0,0,1600,800); 
    drawSpaceship(); 
} 
function moveShip() { 
    if (left) { 
     horizontalSpeed -= 0.1; 
    }else if (right){ 
     horizontalSpeed += 0.1; 
    } 
    if (up) { 
     gravity -=0.4; 
    } 
    gravity += 0.12; 
    y += gravity; 
    x += horizontalSpeed; 
} 
function drawSpaceship() { 
    ctx.save(); 
    ctx.translate(x, y); 
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(0, -40); 
    ctx.lineTo(30,-80); 
    ctx.lineTo(60,-40); 
    ctx.lineTo(60,0); 
    ctx.lineTo(80,30); 
    ctx.lineTo(80,90); 
    ctx.lineTo(60,50); 
    ctx.lineTo(0,50); 
    ctx.lineTo(-20,90); 
    ctx.lineTo(-20,30); 
    ctx.lineTo(0,0); 
    ctx.strokeStyle = 'white'; 
    ctx.stroke(); 
    ctx.closePath(); 
    ctx.restore(); 
} 
function handleKeyDown (evt) { 
    evt = evt || window.event; 
    switch (evt.keyCode) { 
     case 37: 
      left = true; 
      break; 
     case 38: 
      up = true; 
      break; 
     case 39: 
      right = true; 
      break; 
    } 
} 
function handleKeyUp(evt) { 
    evt = evt || window.event; 
    switch (evt.keyCode) { 
     case 37: 
      left = false; 
      break; 
     case 38: 
      up = false; 
      break; 
     case 39: 
      right = false; 
      break; 
    } 
} 

Answer 1

你需要一個被稱爲 「夾緊」 的概念。

夾緊限制了指定範圍內的值。

您希望將船的水平位置固定爲不小於0且不大於畫布寬度。

您希望將您的船的垂直位置固定爲不小於0且不大於畫布高度。

這是用於限制最小值和最大值之間的值的代碼。

clampedValue = Math.min(Math.max(currentValue, min), max); 

保留的[X，Y]畫布中，您可以夾住X，Y這樣的：

clampedX = Math.min(Math.max(x, 0), canvasWidth); 
clampedY = Math.min(Math.max(y, 0), canvasHeight); 

現在你的船，不只是一個更大的[X，Y]點。因此，要保持你的整船在畫布中，你會夾住[X，Y]是這樣的：

y += gravity; 
x += horizontalSpeed; 
x=Math.min(Math.max(x,0+20),width-80); 
y=Math.min(Math.max(y,0+80),height-90); 

而且，即使你船是在地面上你讓重度增加。此時重力效應變爲零，因爲船隻完全由地面支撐以抵禦重力。因此，你要重設爲零，當船在地面上：

if(y==height-90){gravity=0;} 

這裏是你的代碼重構，以保持你的船帆布內：

var x = 200; 
 
var y = 100; 
 
var up = false; 
 
var right = false; 
 
var left = false; 
 
var gravity = -1.1; 
 
var horizontalSpeed = 0.1; 
 

 
var canvas = document.querySelector("canvas"); 
 
var width=canvas.width; 
 
var height=canvas.height; 
 
var ctx = canvas.getContext("2d"); 
 

 

 
init(); 
 

 
function init() { 
 
    document.onkeydown = handleKeyDown; 
 
    document.onkeyup = handleKeyUp; 
 

 
    animate(); 
 
} 
 

 
function animate() { 
 
    moveShip(); 
 
    drawScene(); 
 
    requestAnimationFrame(animate); 
 
} 
 
function drawScene(){ 
 
    ctx.clearRect(0,0,1600,800); 
 
    drawSpaceship(); 
 
} 
 
function moveShip() { 
 
    if (left) { 
 
    horizontalSpeed -= 0.1; 
 
    }else if (right){ 
 
    horizontalSpeed += 0.1; 
 
    } 
 
    if (up) { 
 
    gravity -=0.4; 
 
    } 
 
    gravity += 0.12; 
 
    y += gravity; 
 
    x += horizontalSpeed; 
 
    x=Math.min(Math.max(x,0+20),width-80); 
 
    y=Math.min(Math.max(y,0+80),height-90); 
 
    if(y==height-90){gravity=0;} 
 
} 
 
function drawSpaceship() { 
 
    ctx.save(); 
 
    ctx.translate(x, y); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0, 0); 
 
    ctx.lineTo(0, -40); 
 
    ctx.lineTo(30,-80); 
 
    ctx.lineTo(60,-40); 
 
    ctx.lineTo(60,0); 
 
    ctx.lineTo(80,30); 
 
    ctx.lineTo(80,90); 
 
    ctx.lineTo(60,50); 
 
    ctx.lineTo(0,50); 
 
    ctx.lineTo(-20,90); 
 
    ctx.lineTo(-20,30); 
 
    ctx.lineTo(0,0); 
 
    ctx.strokeStyle = 'blue'; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
    ctx.restore(); 
 
} 
 
function handleKeyDown (evt) { 
 
    evt = evt || window.event; 
 
    switch (evt.keyCode) { 
 
    case 37: 
 
     left = true; 
 
     break; 
 
    case 38: 
 
     up = true; 
 
     break; 
 
    case 39: 
 
     right = true; 
 
     break; 
 
    } 
 
} 
 
function handleKeyUp(evt) { 
 
    evt = evt || window.event; 
 
    switch (evt.keyCode) { 
 
    case 37: 
 
     left = false; 
 
     break; 
 
    case 38: 
 
     up = false; 
 
     break; 
 
    case 39: 
 
     right = false; 
 
     break; 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<h4>Hold down the arrow keys to move the ship.</h4> 
 
<canvas id="canvas" width=500 height=400></canvas>