“Speed Racer” Documentation by “demonisblack” v1.3
“Speed Racer”
Created: 19/9/2017
By: demonisblack
Email: [email protected]
Thank you for purchasing my game. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
- Introduction
- Getting Started
- HTML Structure
- CSS Files and Structure
- JavaScript
- Game Functions
- Game Assets
- Compatibility
- Sources and Credits
- Changelog
- Support Policy
A) Introduction - top
Speed Racer is a HTML5 game where you can drive through the forest world, collecting the powers along the road to help extend the fuel, race with turbo mode and collect coin to get high score!
The ZIP package contains the game with 768×1024 resolution that scales to fit the whole screen device, but it may not be perfectly full screen.
How To Play:
1) Press W,A,S,D keyboard or touch to drive the car.
2) Avoid obstacles and collect the powers to get high score.
B) Getting Started - top
To install the game just upload folder 'game' to your server. The game won't run locally with some browser like Chrome due to some security mode.
You need a website that runs PHP to make facebook share button work, and make sure to change Facebook Open Graph meta and Twitter meta in index.html, just replace [GAME_URL] to your game URL.
<!-- for Facebook -->
<meta property="og:image" content="[GAME_URL]/share.jpg" />
<meta property="og:url" content="[GAME_URL]" />
<!-- for Twitter -->
<meta name="twitter:image" content="[GAME_URL]/share.jpg" />
You can easily customize game text and settings in game.js file
//background assets
var backgroundData = {
hills: { src:'assets/background_hills.png'},
sky: { src:'assets/background_sky.png'},
trees: { src:'assets/background_trees.png'}
};
//road assets
var roadData = {
width:1800,
rumbleLength:2,
lanes:3,
fog:'#045b4c',
light:{road:'#434343', grass:'#509b50', rumble:'#7c4d29', lane:'#CCCCCC'},
dark:{road:'#444', grass:'#5bae5d', rumble:'#7c4d29'}
};
//player assets
var playerCarData = {
left: { src:'assets/car_left.png'},
right: { src:'assets/car_right.png'},
straight: { src:'assets/car_straight.png'},
up_left: { src:'assets/car_up_left.png'},
up_right: { src:'assets/car_up_right.png'},
up_straight: { src:'assets/car_up_straight.png'}
};
//world assets
var spritesData = {
TREE1:{src:'assets/tree_01.png'},
TREE2:{src:'assets/tree_02.png'},
TREE3:{src:'assets/tree_03.png'},
TREE4:{src:'assets/tree_04.png'},
TREE5:{src:'assets/tree_05.png'},
ROCK1:{src:'assets/rock_01.png'},
ROCK2:{src:'assets/rock_02.png'},
ROCK3:{src:'assets/rock_03.png'},
TRUCK01:{src:'assets/truck_01.png'},
TRUCK02:{src:'assets/truck_02.png'},
JEEP01:{src:'assets/jeep_01.png'},
CAR04:{src:'assets/car_04.png'},
CAR03:{src:'assets/car_03.png'},
CAR02:{src:'assets/car_02.png'},
CAR01:{src:'assets/car_01.png'},
NITRO:{src:'assets/item_power_nitro.png'},
COIN:{src:'assets/item_power_coin.png'},
FUEL:{src:'assets/item_power_fuel.png'}
};
spritesData.PLANTS = [spritesData.TREE1, spritesData.TREE2, spritesData.TREE3, spritesData.TREE4, spritesData.TREE5, spritesData.ROCK1, spritesData.ROCK2, spritesData.ROCK3];
spritesData.CARS = [spritesData.CAR01, spritesData.CAR02, spritesData.CAR03, spritesData.CAR04, spritesData.JEEP01, spritesData.TRUCK01, spritesData.TRUCK02];
var intructionDisplayText = 'Press W,A,S,D to\ndrive the car.'; //instruction display text
//keyboard keycode
var keyboard_arr = {left:[65,37],
right:[68,39],
up:[87,38],
down:[83,40]};
//powers
var scoreData = {text:'SCORE: [NUMBER]', //score display text
coin:500} //collect coin score
var fuelData = {text:'FUEL:', //fuel display text
total:100, //total fuel
add:20, //collect fuel total
updateTime:1, //fuel update timer
decrease:3, //fuel decrease
bar:{width:200, height:28, backgroundColor:'#2f2f2f', blankColor:'#fff', fillColor:'#25bf1d', space:3} //fuel bar
};
var nitroData = {maxSpeed:20000, //nitro max speed
accel:2800, //nitro accelerate speed
cameraHeight:1500, //camera height
timer:5}; //total nitro time
//game status (text, color and font size)
var statusData = {
start:{text:'GO', color:'#fff', size:120},
nitro:{text:'TURBO', color:'#f68b1f', size:70},
fuel:{text:'+FUEL', color:'#39b54a', size:70},
score:{text:'+[NUMBER]', color:'#fcdb05', size:70},
penalty:{text:'TIMEOUT:\n[NUMBER]', color:'#ec3e34', size:70},
lowFuel:{text:'LOW FUEL', color:'#ff7f00', size:70},
noFuel:{text:'FUEL EMPTY', color:'#ec3e34', size:70},
}
var exitMessage = 'Are you sure\nyou want to quit?'; //go to main page message
var resultTitleText = 'GAME OVER'; //result text display
var resultScoreText = 'BEST SCORE:'; //result text display
//Social share, [SCORE] will replace with game score
var shareEnable = true; //toggle share
var shareText = 'SHARE YOUR SCORE'; //social share message
var shareTitle = 'Highscore on Speed Racer Game is [SCORE]PTS.';//social share score title
var shareMessage = '[SCORE]PTS is mine new highscore on Speed Racer Game! Try it now!'; //social share score message
The sound can be easily disabled to avoid compatibility issues in sound.js file:
var enableMobileSound = true;
The mobile rotate instruction can be easily change in mobile.js file:
var rotateInstruction = true; //enable rotate instruction for mobile
var forPortrait=true; //for portrait only, set false for landscape mode
C) HTML Structure - top
The page start with the loader wrapper that covering the whole screen in the body. It shows loader progress when calls the function initPreload()
<!-- PERCENT LOADER START-->
<div id="mainLoader"><img src="assets/loader.png" /><br/><span>0</span></div>
<!-- PERCENT LOADER END-->
This section is for browser not support page when calls the function checkBrowser(). It shows error message when detect the browser does not support canvas.
<!-- BROWSER NOT SUPPORT START-->
<div id="notSupportHolder">
<div class="notSupport">YOUR BROWSER ISN'T SUPPORTED.<br/>PLEASE UPDATE YOUR BROWSER IN ORDER TO RUN THE GAME</div>
</div>
<!-- BROWSER NOT SUPPORT END-->
Device rotate instruction page when calls the function checkMobileOrientation(). It shows rotate instruction when device is in landscape view.
<!-- ROTATE INSTRUCTION START-->
<div id="rotateHolder">
<div class="mobileRotate">
<div class="rotateImg"><img src="assets/rotate.png" /></div>
<div class="rotateDesc">ROTATE YOUR DEVICE <br/>TO PORTRAIT</div>
</div>
</div>
<!-- ROTATE INSTRUCTION END-->
Follow by one canvas tag in the body. The game start initiatie by calls the main function of the game initMain().
<!-- CANVAS START-->
<div id="canvasHolder">
<canvas id="gameCanvas" width="768" height="1024"></canvas>
</div>
<!-- CANVAS END-->
D) CSS Files and Structure - top
I'm using two CSS files in this game. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The second file contains all of the specific stylings for the page.
E) JavaScript - top
This game using Javascript files below.
-
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
-
Detect Mobile Browser is a open source scripts to detect mobile browsers and phones.
-
CreateJs plugin is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.
-
TweenMax is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).
-
The game have the following js files
- init.js : check if browser or device support
- loader.js : loader to load all game images
- main.js : initiate game setup and browser resize function
- mobile.js : mobile orientation change
- canvas.js : canvas setup and resize
- sound.js : sound event
- game.js : game play and logics
- plugins.js : additonal useful plugins
- init.js : check if browser or device support
Complete game flow:
- The index.html file start init.js for browser detection
- If browser is supported, init loader.js to start load asserts with loading progress
- For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
- When all asserts contained in "/assets" folder are loaded, the game start construct canvas.js and main.js from game.js thats shows game menu
- If user click race button in game menu, the game will start with game.js
- If user press W keyboard or up button, the car will accelerate
- If user press S keyboard or down button, the car will brake
- If user press A,D keyboard or left,right button, the car will move left or right
- If user hit any cars or obstacles, the car will slow down or stop
- If user car keep accelerating, the score will increase
- If user hit the power coin, will get extra score
- If user hit the power fuel, will get extra fuel
- If user hit the power turbo, will help speed up
- If user car fuel is run out, the game will end
- If user car is not moving and penalty timesup, the game will end
- If user click replay button at game result, it will restart game
F) Game Functions - top
The most important functions used for page.
-
checkBrowser()
This function is runs for browser detection
-
checkMobileEvent()
This function runs for mobile event
The most important functions used for game.
-
initMain()
This function build canvas
-
startGame()
This function start gameplay
-
stopGame()
This function stop gameplay
-
saveGame()
This function save game score
G) Game Assets - top
The game contain 'design' folder which include following:
- speedracer_768x1024.psd - with layer folders below
- Option
- Result
- Game
- Landing
The folder 'assets' in 'game' folder contains all the images of the game that can be replaced. Is better to have the same size of the old ones if you want to reskin the game graphic without coding.
I) Compatibility - top
This game is build for Desktop browsers that support HTML5 canvas. Any mobile/tablet should work in landscape view, but they are not officially supported.
J) Sources and Credits - top
I've used the following font and sound files as listed.
- Dimitri from file Fontalicious
- Free Vector DeLorean Car Illustration from file nightwolfdezines
- Free Car Rear View Icon Vector from file dreamerice
- Jeep Front Free Vector from file lizfa
- Videogame nature elements in flat design from file freepik
- Landscape background of platform video game from file freepik
- turbo.mp3 from file luis2004lima
- CollectCoin.wav from file bradwesson
- Collect special coin.wav from file Cabeeno Rossley
- Open button 2 from file kickhat
- Retro arcade video game descending, lose life tone from file alanmcki
- Porsche Slowing Down from file mkiuk
- proximity.ogg from file a10fjet
- Incar Speeding 2 from file HarryPeeks
J) Changelog - top
Version 1.3- Update Google to Whatsapp share
- Fixed audio not playing in Chrome browser
- Added billboards
K) Support Policy - top
Check out support policy here.
Once again, thank you so much for purchasing this game, if you have a more general question relating to the games on CodeCanyon, you might consider visiting the item page in the "Support" section.
If you like the game, please take a moment to rate it. Thanks! 
How to rate an item on CodeCanyon?
If you want to rate one of our items on CodeCanyon please do it like this:- Login to CodeCanyon
- Open the menu on the top right, and click onto the link “Downloads” which shows a list of your downloads
- Rate our items using the stars
- That’s it. Thank you very much!
demonisblack