javascriptを使って移動レーストラックを作成するには？

私は、JavaScriptとキャンバスを使ってクラシックカーレースゲームを作成しようとしています。javascriptを使って移動レーストラックを作成するには？

これはJavaScript部分です（car_race.js）私は動いているトラックを作成することができますが、それはあまり現実的ではありません。 1つの境界バーが完全に消えてキャンバスの上部に表示されるだけであれば、今起きていることを書いてください。私がしたいのは、一つの境界バーが完全なキャンバスを上から下に通り過ぎるときです。キャンバスの底部から消えていくボディの量で上から元に戻したいと思っています。誰もがこの部分で私を助けることができますか？

var carRaceTrack = document.getElementById('carraceCanvas'); 
 
var carRaceTrackContext = carRaceTrack.getContext('2d'); 
 
var boundryWidth = 10; 
 
var boundryHeight = 80; 
 
var boundryTopOffSet = 5; 
 
var boundryLeftOffSet = 402; 
 
var boundryPadding = 8; 
 

 
setInterval(draw, 0.5); 
 

 
var leftBoundry = []; 
 
var rightBoundry = []; 
 

 
for (x = 0; x < 6; x++) { 
 
    leftBoundry[x] = { 
 
    OffSet: 0, 
 
    topOffSet: 0, 
 
    width: 0, 
 
    height: 0 
 
    }; 
 
} 
 

 
for (x = 0; x < 6; x++) { 
 
    rightBoundry[x] = { 
 
    OffSet: 0, 
 
    topOffSet: 0, 
 
    width: 0, 
 
    height: 0 
 
    }; 
 
} 
 
var x = 5; 
 

 
function draw() { 
 
    drawCanvas(400, 0, carRaceTrack.width, carRaceTrack.height, 'black'); 
 
    x++; 
 
    if (x > carRaceTrack.height) { 
 
    x = boundryTopOffSet; 
 
    } 
 

 
    //drawBoundryandCanvas(boundryLeftOffSet, x, boundryWidth, boundryHeight, 'white'); 
 
    //drawBoundryandCanvas(boundryLeftOffSet, y, boundryWidth, boundryHeight, 'white'); 
 
    for (i = 0; i < leftBoundry.length; i++) { 
 
    leftBoundry[i].OffSet = boundryLeftOffSet; 
 
    leftBoundry[i].width = boundryWidth; 
 
    leftBoundry[i].height = boundryHeight; 
 
    if (i == 0) { 
 
     leftBoundry[i].topOffSet = x; 
 
    } else { 
 
     leftBoundry[i].topOffSet = leftBoundry[i - 1].topOffSet + boundryHeight + boundryPadding; 
 
    } 
 
    if (leftBoundry[i].topOffSet > carRaceTrack.height) { 
 
     leftBoundry[i].topOffSet = boundryTopOffSet; 
 
    } 
 
    //console.log(boundry[i].topOffSet); 
 
    drawBoundry(leftBoundry[i], 'white'); 
 
    } 
 

 
    for (i = 0; i < rightBoundry.length; i++) { 
 
    rightBoundry[i].OffSet = boundryLeftOffSet - 4 + 440; 
 
    rightBoundry[i].width = boundryWidth; 
 
    rightBoundry[i].height = boundryHeight; 
 
    if (i == 0) { 
 
     rightBoundry[i].topOffSet = x; 
 
    } else { 
 
     rightBoundry[i].topOffSet = rightBoundry[i - 1].topOffSet + boundryHeight + boundryPadding; 
 
    } 
 
    if (rightBoundry[i].topOffSet > carRaceTrack.height) { 
 
     rightBoundry[i].topOffSet = boundryTopOffSet; 
 
    } 
 
    //console.log(boundry[i].topOffSet); 
 
    drawBoundry(rightBoundry[i], 'white'); 
 
    } 
 

 
} 
 

 
function drawBoundry(x, elementColor) { 
 
    carRaceTrackContext.fillStyle = elementColor; 
 
    carRaceTrackContext.fillRect(x.OffSet, x.topOffSet, x.width, x.height); 
 
} 
 

 

 
function drawCanvas(posX, posY, width, height, elementColor) { 
 
    carRaceTrackContext.fillStyle = elementColor; 
 
    carRaceTrackContext.fillRect(posX, posY, width, height); 
 
}

This is the html part. Here i am creating canvas and using car_race.js file i am accessing canvas object. 
 

 
<html> 
 
<canvas id="carraceCanvas" width="850" height="550"></canvas> 
 
<script type="text/javascript" src="car_race.js"></script> 
 

 
</html>

出典

2017-10-10 Sourav Suman

あなたは（8の代わりに6）の両側に複数の長方形を必要とし、それは（部分的に）隠されているように、一番上のものは、負のY座標を有することを可能にします。

これらの矩形を下に移動すると、そのような矩形の1つの距離（詰め物）を移動したときに検出されます。つまり、既に初期の状態に戻り、繰り返すことができます。

setInterval（とにかく小さすぎるミリ秒数）ではなく、requestAnimationFrameを使用してください。ここで

は、あなたの適応コードは（私はスペルの間違いを修正するのに役立ち、およびプロパティ名が微小で開始することができませんでした）です：私は左を適応

var carRaceTrack = document.getElementById('carraceCanvas'); 
 
var carRaceTrackContext = carRaceTrack.getContext('2d'); 
 
var boundaryWidth = 10; 
 
var boundaryHeight = 80; 
 
var boundaryTopOffset = 5; 
 
var boundaryLeftOffset = 2; // for snippet purpose I reduced this. Original = 402 
 
var boundaryPadding = 8; 
 

 
window.requestAnimationFrame(draw); // better use this for animations 
 

 
var leftBoundary = []; 
 
var rightBoundary = []; 
 

 
for (x = 0; x < 8; x++) { // We need two more 
 
    leftBoundary[x] = { 
 
    offset: boundaryLeftOffset, 
 
    topOffset: 0, 
 
    width: boundaryWidth, 
 
    height: boundaryHeight 
 
    }; 
 
} 
 

 
for (x = 0; x < 8; x++) { 
 
    rightBoundary[x] = { 
 
    offset: boundaryLeftOffset - 4 + 440, 
 
    topOffset: 0, 
 
    width: boundaryWidth, 
 
    height: boundaryHeight 
 
    }; 
 
} 
 
var cycle = 0, 
 
    totalCycle = boundaryHeight + boundaryPadding; 
 

 
function draw() { 
 
    drawCanvas(boundaryLeftOffset-2, 0, carRaceTrack.width, carRaceTrack.height, 'black'); 
 
    // Use modulo operator for resetting to 0 when cycle is complete: 
 
    cycle = (cycle + 1) % totalCycle; 
 
    // Avoid code repetition: loop over the two boundary arrays: 
 
    for (boundary of [leftBoundary, rightBoundary]) { 
 
     for (i = 0; i < boundary.length; i++) { 
 
      // Note that we put the first one at a negative coordinate! 
 
      boundary[i].topOffset = cycle + (i-1) * totalCycle; 
 
      drawBoundary(boundary[i], 'white'); 
 
     } 
 
    } 
 
    // Repeat 
 
    window.requestAnimationFrame(draw); 
 
} 
 

 
function drawBoundary(x, elementColor) { 
 
    carRaceTrackContext.fillStyle = elementColor; 
 
    carRaceTrackContext.fillRect(x.offset, x.topOffset, x.width, x.height); 
 
} 
 

 

 
function drawCanvas(posX, posY, width, height, elementColor) { 
 
    carRaceTrackContext.fillStyle = elementColor; 
 
    carRaceTrackContext.fillRect(posX, posY, width, height); 
 
}

<canvas id="carraceCanvas" width="450" height="550"></canvas>

注意オフセットがあるので、このスニペットに適しています。

出典

2017-10-10 19:42:02 trincot

@Kaiido、最後の1つは確かにすぐに消えていました。これを修正するために番号を7から8に増やしました。私は 'setInterval'をそのまま残しておきます。なぜなら、OPはそれについて疑問がないからです。このような遅いペースで1ピクセル移動すると、 'window.requestAnimationFrame（）'を使用しても実際にメリットはありません。 – trincot

ああ、私は分数を完全に見落としました。 'window.requestAnimationFrame（）'に置き換えられました。これは、より良いオプションです。これを強調してくれてありがとう！ – trincot

ヘルプtrincotに感謝 –

javascriptを使って移動レーストラックを作成するには？

答えて

関連する問題