Comment créer une piste de course en mouvement en utilisant javascript?

J'ai essayé de créer un jeu de course de voiture classique en utilisant JavaScript et canvas.Comment créer une piste de course en mouvement en utilisant javascript?

Ceci est la partie JavaScript (car_race.js) Je suis capable de créer une piste qui bouge mais ce n'est pas très réaliste comme il se doit. Ecrire maintenant ce qui se passe est si une barre de délimitation a complètement disparu alors seulement elle apparaît en haut de la toile. ce que je veux faire est quand une barre de frontière traverse la toile complète de haut en bas je veux qu'elle reprenne de haut en haut la quantité de corps qu'elle a disparue de la partie inférieure de la toile. Quelqu'un peut-il m'aider avec cette partie.

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>

Source

2017-10-10 Sourav Suman

avez besoin plus rectangles sur les deux côtés (8 au lieu de 6), et permettre à celui du haut d'avoir une coordonnée Y négatif, de sorte qu'il est (partiellement) caché.

Ensuite, lorsque vous déplacez ces rectangles, détectez lorsque vous avez déplacé la distance d'un tel rectangle (plus le rembourrage): cela signifie que vous pouvez déjà revenir à la situation initiale et répéter. Au lieu de setInterval (avec un nombre de millisecondes trop petit de toute façon), utilisez requestAnimationFrame.

Voici votre code adapté (je ne pouvais pas aider à corriger une erreur d'orthographe, et de faire des noms de propriété commencent par une minuscule):

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>

Notez que j'ai adapté la gauche décalage, de sorte qu'il convient mieux dans cet extrait.

Source

2017-10-10 19:42:02 trincot

@Kaiido, le dernier était en effet en train de disparaître trop tôt. Augmentation du nombre de 7 à 8 pour résoudre ce problème. Je vais laisser le 'setInterval' tel quel, car l'OP n'avait aucune question à ce sujet. Avec un pixel se déplace à un rythme si lent, l'utilisation de 'window.requestAnimationFrame()' n'est pas vraiment ajouter des avantages. – trincot

Ah oui, j'ai complètement négligé le nombre fractionnaire. Remplacé par 'window.requestAnimationFrame()', qui est alors la meilleure option. Merci d'avoir souligné cela! – trincot

merci pour l'aide trincot –

Comment créer une piste de course en mouvement en utilisant javascript?

Répondre

Questions connexes