Guest User

Untitled

a guest
Jul 4th, 2015
243
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*jslint plusplus: true, sloppy: true, indent: 4 */
  2. (function () {
  3.     "use strict";
  4.     // this function is strict...
  5. }());
  6.  
  7. // RequestAnimFrame: a browser API for getting smooth animations
  8. window.requestAnimFrame = (function() {
  9.     return window.requestAnimationFrame ||
  10.         window.webkitRequestAnimationFrame ||
  11.         window.mozRequestAnimationFrame ||
  12.         window.oRequestAnimationFrame ||
  13.         window.msRequestAnimationFrame ||
  14.     function(callback) {
  15.         window.setTimeout(callback, 1000 / 60);
  16.     };
  17. })();
  18.  
  19. // Globals
  20. var canvas = null,
  21.     ctx = null,
  22.     background = null,
  23.     car_sprite = null,
  24.     game_data = null,
  25.     CAR_WIDTH = 100,
  26.     CAR_HEIGHT = 37,
  27.     STEP_COUNT_MILLISECONDS =  1000 / 30,
  28.     RACE_LENGTH = 20,
  29.     RACE_FINISH_LINE_X = 770,
  30.     iTime = 0,
  31.     iFinishPlace = 1,
  32.     random_graph;
  33.  
  34. function clearCanvas() {
  35.  
  36.     // clear canvas
  37.     ctx.clearRect(0, 0, canvas.height, canvas.width);
  38. }
  39.  
  40. function drawBackground() {
  41.  
  42.     clearCanvas();
  43.     ctx.drawImage(background, 0, 0);
  44.    
  45.     loadCarSprite();
  46. }
  47.  
  48. function loadBackground() {
  49.  
  50.     // Load the timer
  51.     background = new Image();
  52.     background.src = 'race-scence.png';
  53.     background.onload = drawBackground;
  54. }
  55.  
  56. function setupGameData() {
  57.  
  58.     var json =
  59.     {
  60.         cars:
  61.         [
  62.             {
  63.                 "colour": 'blue',
  64.                 "x": 0,
  65.                 "y": 450,
  66.                 "spritex": 0,
  67.                 "spritey": 0,
  68.                 "graph": null,
  69.                 "step": 77,
  70.                 "position": null,
  71.                 "speed": 3.2,
  72.                 "speed_late": 1.7
  73.             },
  74.             {
  75.                 "colour": 'green',
  76.                 "x": 0,
  77.                 "y": 470,
  78.                 "spritex": 0,
  79.                 "spritey": 37,
  80.                 "graph": null,
  81.                 "step": 65,
  82.                 "position": null,
  83.                 "speed": 1.1,
  84.                 "speed_late": 2.8
  85.             },
  86.             {
  87.                 "colour": 'red',
  88.                 "x": 0,
  89.                 "y": 490,
  90.                 "spritex": 0,
  91.                 "spritey": 74,
  92.                 "graph": null,
  93.                 "step": 53,
  94.                 "position": null,
  95.                 "speed": 1.7,
  96.                 "speed_late": 1
  97.             },
  98.             {
  99.                 "colour": 'green',
  100.                 "x": 0,
  101.                 "y": 510,
  102.                 "spritex": 0,
  103.                 "spritey": 111,
  104.                 "graph": null,
  105.                 "step": 39,
  106.                 "position": null,
  107.                 "speed": 1.2,
  108.                 "speed_late": 3.2
  109.             }
  110.         ],
  111.         graphs:
  112.         [
  113.             [0,5,10,20,40,60,70],
  114.             [0,10,20,30,40,50,60],
  115.             [0,20,39,40,50,55,58],
  116.             [0,10,20,30,40,50,55],
  117.             [0,25,45,47,49,50,52],
  118.             [0,10,20,29,38,45,50],
  119.             [0,15,20,25,30,40,45],
  120.             [0,2,4,8,20,30,40],
  121.             [0,5,10,15,20,25,30],
  122.             [0,1,3,14,15,22,30],
  123.             [0,5,11,14,17,22,25],
  124.             [0,20,30,44,67,72,90],
  125.             [0,2,7,24,47,52,65],
  126.             [0,2,9,20,40,52,70]
  127.         ]
  128.     };
  129.  
  130.     random_graph = Math.floor( Math.random() * json.graphs.length );
  131.  
  132.     return json;    
  133. }
  134.  
  135. function drawCar(car) {
  136.    
  137.     // Draw the car onto the canvas
  138.     ctx.drawImage(car_sprite,
  139.         car.spritex, car.spritey,
  140.         CAR_WIDTH, CAR_HEIGHT,
  141.         car.x + car.step, car.y,
  142.         CAR_WIDTH, CAR_HEIGHT);
  143.        
  144.      drawText(car);
  145. }
  146.  
  147. function drawCars() {
  148.  
  149.     var iCarCounter;
  150.    
  151.     for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {
  152.        
  153.         drawCar(game_data.cars[iCarCounter]);
  154.     }
  155. }
  156.  
  157. function initCar(current_car) {
  158.    
  159.     current_car.graph = random_graph;
  160.        
  161. }
  162.  
  163. function initGameState() {
  164.  
  165.     var iCarCounter;
  166.    
  167.     for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {
  168.  
  169.         initCar(game_data.cars[iCarCounter]);
  170.  
  171.     }
  172. }
  173.  
  174. function getPositionAtTime(graph_index, percentageElapsed, current_car) {
  175.        
  176.     var graph = game_data.graphs[graph_index],
  177.         iNumberOfGraphPoints = graph.length,
  178.         iGraphPosition = null,
  179.         iFloor = null,
  180.         iCeil = null,
  181.         p = null;
  182.         position = null;
  183.  
  184.     graph = graph.map( function( val, i ) {
  185.  
  186.         if ( i === 0 ) {
  187.  
  188.             return val;
  189.  
  190.         }
  191.  
  192.         var car_speed = undefined === current_car.speed ? 1 : current_car.speed,
  193.             car_speed_late = undefined === current_car.speed_late ? car_speed : current_car.speed_late;
  194.  
  195.         return ( i < Math.floor( graph.length / 2 ) ) ? car_speed : car_speed_late;
  196.  
  197.     });
  198.  
  199.     iGraphPosition = (iNumberOfGraphPoints / 100) * percentageElapsed;
  200.    
  201.     iFloor = Math.floor(iGraphPosition);
  202.     iCeil = Math.ceil(iGraphPosition);
  203.    
  204.     if(iGraphPosition === iFloor) {
  205.        
  206.         position = graph[iFloor];
  207.        
  208.     } else if(iGraphPosition === iCeil) {
  209.        
  210.         position = graph[iCeil];
  211.        
  212.     } else {
  213.                
  214.         p = (graph[iCeil] - graph[iFloor]) / 100;
  215.        
  216.         position = ((iGraphPosition - iFloor) * 100) * p + graph[iFloor];
  217.  
  218.     }
  219.  
  220.     return position;
  221.  
  222. }
  223.  
  224. function redrawRoadSection() {
  225.    
  226.     ctx.drawImage(background, 0, 400, 1000, 200, 0, 400, 1000, 200);
  227.    
  228. }
  229.  
  230. function graphPosToScreenPos() {
  231.    
  232.     return (900 / 100)  * (position / 60 * 100);
  233.    
  234. }
  235.  
  236. function updateDebugWindow() {
  237.  
  238.     // Debug window
  239.     var time = document.getElementById('time');
  240.  
  241.     if(time !== null)  {
  242.        
  243.        time.value = iTime / 1000;
  244.     }
  245. }
  246.  
  247.  
  248. function drawText(current_car) {
  249.  
  250.     if(current_car.position !== null) {
  251.        
  252.         ctx.strokeStyle = "black";
  253.         ctx.font = "normal 12px Facebook Letter Faces";
  254.         ctx.strokeText(current_car.position, RACE_FINISH_LINE_X + current_car.step + 110, current_car.y + 25);
  255.    
  256.     }
  257.      
  258. }
  259.  
  260. function moveCar(iCarCounter) {
  261.  
  262.     var current_car =  game_data.cars[iCarCounter],
  263.         seconds = iTime / 1000,
  264.         percentageElapsed = (seconds / RACE_LENGTH) * 100,
  265.         a = 20,
  266.         velocity = 2,
  267.         position = getPositionAtTime(current_car.graph, percentageElapsed,current_car);
  268.    
  269.     if(current_car.x < RACE_FINISH_LINE_X) {
  270.        
  271.         current_car.x =  graphPosToScreenPos(position) + (velocity * seconds) + (1/2 * a * Math.pow(seconds, 2));
  272.        
  273.     }
  274.     else {
  275.        
  276.         current_car.x = RACE_FINISH_LINE_X;
  277.        
  278.         if(current_car.position === null) {
  279.            
  280.             current_car.position = iFinishPlace++;
  281.         }
  282.     }
  283.    
  284.     drawCar(current_car);
  285. }
  286.  
  287. function initCars() {
  288.    
  289.     game_data = setupGameData();
  290.    
  291.     initGameState();
  292.     drawCars();
  293. }
  294.  
  295. function stopLoop() {
  296.  
  297.     iTime = 0;
  298.     iFinishPlace = 1;
  299. }
  300.  
  301.  
  302. function startRace() {
  303.    
  304.     var iCarCounter;
  305.  
  306.     redrawRoadSection();
  307.    
  308.     for(iCarCounter = 0; iCarCounter < game_data.cars.length; iCarCounter++) {
  309.  
  310.         moveCar(iCarCounter);
  311.      
  312.     }
  313.  
  314.     updateDebugWindow();
  315.    
  316.     if(iFinishPlace > 4) {
  317.    
  318.         stopLoop();
  319.        
  320.     } else {
  321.        
  322.         iTime += STEP_COUNT_MILLISECONDS;
  323.    
  324.         requestAnimFrame(startRace);
  325.     }
  326. }
  327.  
  328. function startLoop() {
  329.    
  330.     stopLoop();
  331.    
  332.     requestAnimFrame(startRace);
  333. }
  334.  
  335. function loadCarSprite() {
  336.  
  337.     // Load the timer
  338.     car_sprite = new Image();
  339.     car_sprite.src = 'car-sprite.gif';
  340.     car_sprite.onload = initCars;
  341. }
  342.  
  343. function draw() {
  344.  
  345.     // Main entry point got the motion canvas example
  346.     canvas = document.getElementById('motion');
  347.  
  348.     // Canvas supported?
  349.     if (canvas.getContext) {
  350.        
  351.         ctx = canvas.getContext('2d');
  352.  
  353.         loadBackground();
  354.  
  355.     } else {
  356.         alert("Canvas not supported!");
  357.     }
  358. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×