Question

我一直在尝试使用JavaScript和画布创建一款经典的赛车游戏。

这是JavaScript部分（car_race.js）我能够创建一个正在移动的轨道，但它不应该像它应该那么现实。现在写一下，如果一个边界条完全消失，那么它只会出现在画布的顶部。我想要做的是当一个边界条从上到下穿过完整的画布时，我希望它从顶部恢复，然后从画布的底部消失掉的身体量。任何人都可以帮我这部分。

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>

Answer 1

你需要两侧更多的矩形（8而不是6），并允许顶部的矩形具有负Y坐标，以便它（部分）隐藏。

然后当你将这些矩形向下移动时，检测你移动一个这样的矩形的距离（加上填充）：这意味着你已经可以回到初始状态并重复。

使用requestAnimationFrame代替setInterval（毫秒数太小），使用https://www.raymondcamden.com/2009/11/25/Quick-Tip-Treating-a-ColdFusion-Query-like-a-Structure/。

以下是您修改后的代码（我无法帮助解决拼写错误，并使属性名称以微小的方式开头）：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

请注意，我调整了左侧偏移量，因此最适合此代码段。

如何使用javascript创建移动赛道？

1 个答案: