yaxamedia / project-1

Race car game made with html / javascript / css

#project-1

*** Marco Acosta / 10/06/2017 ***

STREETRACER

what is STREETRACER?

street racer is basically a racing game where 2 players race each other for VICTORY!!. Reason i chose this game is because i have an idea of how to do them and also because i love racing games!!!!

Wireframe

on paper .

Initial thoughts on game structure

I was thinking on doing key codes for the cars in the race. whenever a car goes past the finish line, an image of the racer will pop out. Also i want to use keyframes to make the cars look like they are actually running. To make the car reach the end point i was planning on relying the winner on reaching the finish line with actual pixels. Challenges i will think would be between the keycodes, keyframes and actually making the car go past the finish line. Also trying to make like a landing page for the game and trying to actually make the background image repeat somehow.

Phases of Completion

when one racer wins, a pop up of the racer will show up saying he won the race.

day 1: pesudocode + html

day 2: javascript

day 3: javascript + css

day 4: more javascript + debug

day 5: debugs

Links and Resources

game: https://www.youtube.com/watch?v=cw1tp8Ku6wA image : https://lh3.googleusercontent.com/G_Y3_sPzrVFV4e73qEZ2CwDwz0TXQOOLVdOAPChQEYlnVANfMY-PDyxN7idmvG7vJB8=h900 I learned how to call an element from css by calling it with the offset for a collition. I found this method here: http://www.developphp.com/video/JavaScript/WAPG-5-Collision-Hit-Detection-DOM-Programming-JavaScript-Tutorial.

HOW TO PLAY:

Press "S" to move player 1 forwards and use keys "W" and "X" to move up and down.

Press "J" to move player 2 forwards and use keys "U" and "M" to move up and down.

Avoid the incoming cars to win the race!

Used Javascript / HTML and CSS.