Html 5帆布车的速度

时间:2015-08-12 22:38:46

标签: javascript html canvas html5-canvas

在功能setupGameData()中,我有2辆车的参数。在第一辆车的速度是3.00,第二辆车的速度是3.50。如果你点击“观看比赛”按钮你可以看到第一辆车3.00比第二辆车3.50快。如何修复代码以查看3.50快于3.00。

/*jslint plusplus: true, sloppy: true, indent: 4 */
(function () {
    "use strict";
    // this function is strict...
}());

// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

// Globals
var canvas = null,
    ctx = null,
    background = null,
    car_sprite = null,
    game_data = null,
    CAR_WIDTH = 170,
    CAR_HEIGHT = 37,
    STEP_COUNT_MILLISECONDS =  1000 / 30,
    RACE_LENGTH = 20,
    RACE_FINISH_LINE_X = 770,
    iTime = 0,
    iFinishPlace = 1,
    random_graph;

function clearCanvas() {

    // clear canvas
    ctx.clearRect(0, 0, canvas.height, canvas.width);
}

function drawBackground() {

    clearCanvas();
    ctx.drawImage(background, 0, -400);

    loadCarSprite();
}

function loadBackground() {

    // Load the timer
    background = new Image();
    background.src = 'http://www.upslike.net/imgdb/race-scence-f7bf19.png';
    background.onload = drawBackground;
}

function setupGameData() {

    var json =
    {
        cars:
        [
            {
                "colour": 'blue',
                "x": 0,
                "y": 50,
                "spritex": 0,
                "spritey": 0,
                "graph": null,
                "step": 77,
                "position": null,
                "speed": 3.00,
                "speed_late": 0.28            },
            {
                "colour": 'red',
                "x": 0,
                "y": 110,
                "spritex": 0,
                "spritey": 37,
                "graph": null,
                "step": 39,
                "position": null,
                "speed": 3.50,
                "speed_late": 0.48          }
        ],
        graphs:
        [
            [0,5,10,20,40,60,70],
            [0,10,20,30,40,50,60],
            [0,20,39,40,50,55,58],
            [0,10,20,30,40,50,55],
            [0,25,45,47,49,50,52],
            [0,10,20,29,38,45,50],
            [0,15,20,25,30,40,45],
            [0,2,4,8,20,30,40],
            [0,5,10,15,20,25,30],
            [0,1,3,14,15,22,30],
            [0,5,11,14,17,22,25],
            [0,20,30,44,67,72,90],
            [0,2,7,24,47,52,65],
            [0,2,9,20,40,52,70]
        ]
    };

    random_graph = Math.floor( Math.random() * json.graphs.length );

    return json;    
}

function drawCar(car) {

    // Draw the car onto the canvas

    ctx.drawImage(car_sprite,
        car.spritex, car.spritey,
        CAR_WIDTH, CAR_HEIGHT,
        car.x-70 + car.step, car.y,
        CAR_WIDTH, CAR_HEIGHT);

     drawText(car);
}

function drawCars() {

    var iCarCounter;

    for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {

        drawCar(game_data.cars[iCarCounter]);
    }
}

function initCar(current_car) {

    current_car.graph = random_graph;

}

function initGameState() {

    var iCarCounter;

    for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {

        initCar(game_data.cars[iCarCounter]);

    }
}

function getPositionAtTime(graph_index, percentageElapsed, current_car) {

    var graph = game_data.graphs[graph_index],
        iNumberOfGraphPoints = graph.length,
        iGraphPosition = null,
        iFloor = null,
        iCeil = null,
        p = null;
        position = null;

    graph = graph.map( function( val, i ) {

        if ( i === 0 ) {

            return val;

        }

        var car_speed = undefined === current_car.speed ? 1 : current_car.speed,
            car_speed_late = undefined === current_car.speed_late ? car_speed : current_car.speed_late;

        return ( i < Math.floor( graph.length / 2 ) ) ? car_speed : car_speed_late;

    });

    iGraphPosition = (iNumberOfGraphPoints / 100) * percentageElapsed;

    iFloor = Math.floor(iGraphPosition);
    iCeil = Math.ceil(iGraphPosition);

    if(iGraphPosition === iFloor) {

        position = graph[iFloor];

    } else if(iGraphPosition === iCeil) {

        position = graph[iCeil];

    } else {

        p = (graph[iCeil] - graph[iFloor]) / 100;

        position = ((iGraphPosition - iFloor) * 100) * p + graph[iFloor];

    }

    return position;

}

function redrawRoadSection() {

    ctx.drawImage(background, 0, 400, 1000, 200, 0, 0, 1000, 200);   
}

function graphPosToScreenPos() {

    return (900 / 100)  * (position / 60 * 100);   
}

function updateDebugWindow() {

  // Debug window
    var time = document.getElementById('time');

    if(time !== null)  {

       time.value = iTime / 1000;
    }

}


function drawText(current_car) {

    if(current_car.position !== null) {

        ctx.strokeStyle = "black";
        ctx.font = "normal 12px Facebook Letter Faces";
        ctx.strokeText(current_car.position, RACE_FINISH_LINE_X + current_car.step + 110, current_car.y + 25);

    }

}

function moveCar(iCarCounter) {

    var current_car =  game_data.cars[iCarCounter],
        seconds = iTime / 1000,
        percentageElapsed = (seconds / RACE_LENGTH) * 100,
        a = 20,
        velocity = 2,
        position = getPositionAtTime(current_car.graph, percentageElapsed,current_car);

    if(current_car.x < RACE_FINISH_LINE_X) {

        current_car.x =  graphPosToScreenPos(position) + (velocity * seconds) + (1/2 * a * Math.pow(seconds, 2));

    }
    else {

        current_car.x = RACE_FINISH_LINE_X;

        if(current_car.position === null) {

            current_car.position = iFinishPlace++;
        }
    }

    drawCar(current_car);
}

function initCars() {

    game_data = setupGameData();

    initGameState();
    drawCars();
}

function stopLoop() {

    iTime = 0;
    iFinishPlace = 1;
}


function startRace() {

    var iCarCounter;

    redrawRoadSection();

    for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {

        moveCar(iCarCounter);

    }

    updateDebugWindow();

    if(iFinishPlace > 4) {

        stopLoop();

    } else {

        iTime += STEP_COUNT_MILLISECONDS;

        requestAnimFrame(startRace);
    }
}

function startLoop() {

    stopLoop();

    requestAnimFrame(startRace);
}

function loadCarSprite() {

    // Load the timer
    car_sprite = new Image();
    car_sprite.src = 'http://www.upslike.net/imgdb/car-scene-53401b.png';
    car_sprite.onload = initCars;
}

function draw() {

        // Main entry point got the motion canvas example
        canvas = document.getElementById('motion');

        // Canvas supported?
        if (canvas.getContext) {

                ctx = canvas.getContext('2d');

        loadBackground();

        } else {
                alert("Canvas not supported!");
        }
}
<script>
window.onload = function() {
    draw();
}
</script>

        <center><canvas id="motion" width="1000px" height="200px"></canvas></center>                    
        <div style="position: absolute; top: 0px; left:65px;">
              <div id="alerter" class="hid">
                <input id="loop" onclick="javascript:initCars(); startLoop();" type="button" class="prikaz" value="Watch race">                                 
              </div>
              </div>
</br>

CodePen

2 个答案:

答案 0 :(得分:1)

我要做的第一件事是在你的汽车运动功能中使用console.log来查看速度是多少,对我来说,看起来你的汽车速度正在转换为int而不是双倍,所以你的速度3.50是3.00

同样在moveCar功能中,您将速度设置为2并在功能中使用该功能,您是否应该使用speed变量?

答案 1 :(得分:0)

这也取决于迟到的速度(Json)。如果你增加蓝色车的速度很晚了。然后蓝车速度很快。并提高红色车的速度&#39;然后红车速度很快。

&#13;
&#13;
/*jslint plusplus: true, sloppy: true, indent: 4 */
(function () {
    "use strict";
    // this function is strict...
}());
 
// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
// Globals
var canvas = null,
    ctx = null,
    background = null,
    car_sprite = null,
    game_data = null,
    CAR_WIDTH = 170,
    CAR_HEIGHT = 37,
    STEP_COUNT_MILLISECONDS =  1000 / 30,
    RACE_LENGTH = 20,
    RACE_FINISH_LINE_X = 770,
    iTime = 0,
    iFinishPlace = 1,
    random_graph;
 
function clearCanvas() {
 
    // clear canvas
    ctx.clearRect(0, 0, canvas.height, canvas.width);
}
 
function drawBackground() {
 
    clearCanvas();
    ctx.drawImage(background, 0, -400);
   
    loadCarSprite();
}
 
function loadBackground() {
 
    // Load the timer
    background = new Image();
    background.src = 'http://www.upslike.net/imgdb/race-scence-f7bf19.png';
    background.onload = drawBackground;
}
 
function setupGameData() {
 
    var json =
    {
        cars:
        [
            {
                "colour": 'blue',
                "x": 0,
                "y": 50,
                "spritex": 0,
                "spritey": 0,
                "graph": null,
                "step": 77,
                "position": null,
                "speed": 3.55,
                "speed_late": 1           },
            {
                "colour": 'red',
                "x": 0,
                "y": 110,
                "spritex": 0,
                "spritey": 37,
                "graph": null,
                "step": 39,
                "position": null,
                "speed": 3.55,
                "speed_late": 19          }
        ],
        graphs:
        [
            [0,5,10,20,40,60,70],
            [0,10,20,30,40,50,60],
            [0,20,39,40,50,55,58],
            [0,10,20,30,40,50,55],
            [0,25,45,47,49,50,52],
            [0,10,20,29,38,45,50],
            [0,15,20,25,30,40,45],
            [0,2,4,8,20,30,40],
            [0,5,10,15,20,25,30],
            [0,1,3,14,15,22,30],
            [0,5,11,14,17,22,25],
            [0,20,30,44,67,72,90],
            [0,2,7,24,47,52,65],
            [0,2,9,20,40,52,70]
        ]
    };
 
    random_graph = Math.floor( Math.random() * json.graphs.length );
 
    return json;    
}
 
function drawCar(car) {
   
    // Draw the car onto the canvas
    
    ctx.drawImage(car_sprite,
        car.spritex, car.spritey,
        CAR_WIDTH, CAR_HEIGHT,
        car.x-70 + car.step, car.y,
        CAR_WIDTH, CAR_HEIGHT);
       
     drawText(car);
}
 
function drawCars() {
 
    var iCarCounter;
   
    for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {
       
        drawCar(game_data.cars[iCarCounter]);
    }
}
 
function initCar(current_car) {
   
    current_car.graph = random_graph;
       
}
 
function initGameState() {
 
    var iCarCounter;
   
    for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {
 
        initCar(game_data.cars[iCarCounter]);
 
    }
}
 
function getPositionAtTime(graph_index, percentageElapsed, current_car) {
       
    var graph = game_data.graphs[graph_index],
        iNumberOfGraphPoints = graph.length,
        iGraphPosition = null,
        iFloor = null,
        iCeil = null,
        p = null;
        position = null;
 
    graph = graph.map( function( val, i ) {
 
        if ( i === 0 ) {
 
            return val;
 
        }
 
        var car_speed = undefined === current_car.speed ? 1 : current_car.speed,
            car_speed_late = undefined === current_car.speed_late ? car_speed : current_car.speed_late;
 
        return ( i < Math.floor( graph.length / 2 ) ) ? car_speed : car_speed_late;
 
    });
 
    iGraphPosition = (iNumberOfGraphPoints / 100) * percentageElapsed;
   
    iFloor = Math.floor(iGraphPosition);
    iCeil = Math.ceil(iGraphPosition);
   
    if(iGraphPosition === iFloor) {
       
        position = graph[iFloor];
       
    } else if(iGraphPosition === iCeil) {
       
        position = graph[iCeil];
       
    } else {
               
        p = (graph[iCeil] - graph[iFloor]) / 100;
       
        position = ((iGraphPosition - iFloor) * 100) * p + graph[iFloor];
 
    }
 
    return position;
 
}
 
function redrawRoadSection() {
   
    ctx.drawImage(background, 0, 400, 1000, 200, 0, 0, 1000, 200);   
}
 
function graphPosToScreenPos() {
   
    return (900 / 100)  * (position / 60 * 100);   
}
 
function updateDebugWindow() {
 
  // Debug window
    var time = document.getElementById('time');
 
    if(time !== null)  {
       
       time.value = iTime / 1000;
    }
  
}
 
 
function drawText(current_car) {
 
    if(current_car.position !== null) {
       
        ctx.strokeStyle = "black";
        ctx.font = "normal 12px Facebook Letter Faces";
        ctx.strokeText(current_car.position, RACE_FINISH_LINE_X + current_car.step + 110, current_car.y + 25);
   
    }
     
}
 
function moveCar(iCarCounter) {
 
    var current_car =  game_data.cars[iCarCounter],
        seconds = iTime / 1000,
        percentageElapsed = (seconds / RACE_LENGTH) * 100,
        a = 20,
        velocity = 2,
        position = getPositionAtTime(current_car.graph, percentageElapsed,current_car);
   
    if(current_car.x < RACE_FINISH_LINE_X) {
       
        current_car.x =  graphPosToScreenPos(position) + (velocity * seconds) + (1/2 * a * Math.pow(seconds, 2));
       
    }
    else {
       
        current_car.x = RACE_FINISH_LINE_X;
       
        if(current_car.position === null) {
           
            current_car.position = iFinishPlace++;
        }
    }
   
    drawCar(current_car);
}
 
function initCars() {
   
    game_data = setupGameData();
   
    initGameState();
    drawCars();
}
 
function stopLoop() {
 
    iTime = 0;
    iFinishPlace = 1;
}
 
 
function startRace() {
   
    var iCarCounter;
 
    redrawRoadSection();
   
    for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {
 
        moveCar(iCarCounter);
     
    }
 
    updateDebugWindow();
   
    if(iFinishPlace > 4) {
   
        stopLoop();
       
    } else {
       
        iTime += STEP_COUNT_MILLISECONDS;
   
        requestAnimFrame(startRace);
    }
}
 
function startLoop() {
   
    stopLoop();
   
    requestAnimFrame(startRace);
}
 
function loadCarSprite() {
 
    // Load the timer
    car_sprite = new Image();
    car_sprite.src = 'http://www.upslike.net/imgdb/car-scene-53401b.png';
    car_sprite.onload = initCars;
}
 
function draw() {
 
        // Main entry point got the motion canvas example
        canvas = document.getElementById('motion');
 
        // Canvas supported?
        if (canvas.getContext) {
           
                ctx = canvas.getContext('2d');
 
        loadBackground();
 
        } else {
                alert("Canvas not supported!");
        }
}
&#13;
<script>
window.onload = function() {
    draw();
}
</script>
	
		<center><canvas id="motion" width="1000px" height="200px"></canvas></center>					
		<div style="position: absolute; top: 0px; left:65px;">
              <div id="alerter" class="hid">
                <input id="loop" onclick="javascript:initCars(); startLoop();" type="button" class="prikaz" value="Watch race">                                 
              </div>
              </div>
</br>
&#13;
&#13;
&#13;

 'speed late':1
 'speed_late':19
祝你好运: