yunyunliu / driving-game

A dynamic HTML, CSS, and JavaScript driving game.

I'm a full stack web developer, technology enthusiast, and life-long autodidact.

My academic background is in cognitive psychology and linguistics. I am especially interested in how people interact with technology and in creating applications that are intuitive and user-friendly.

I build applications using:

Languages and Frameworks: JavaScript, HTML & CSS, Node, Vue 3, React, Express
Databases: PostgreSQL, MongoDB
Tools: Figma, Postman, Webpack, Babel, NPM, Chrome DevTools

And I am always excited for opportunities to learn new tech.

Links

• LinkedIn

driving-game's Issues

user-can-steer-their-car

💰 Motivation

Our game needs MAXIMUM realism to be immersive 😂.

📐 Plan

Change the car's location based on which direction it is facing.

✅ Task List

• ...

User can stop their car.

💰 Motivation

If the user cannot stop their car, it goes off the page.

📐 Plan

Stop the car if the user presses space again.

Hints!
Add a boolean to your data model to indicate whether or not the car is started.

✅ Task List

• ...

User can see their car.

You will attempt to write your own task list before coding this feature. Refer to past projects for an example of what a task list should look like. Lots of small tasks is better than a few large tasks.

💰 Motivation

The user needs to see what they will be controlling.

📐 Plan

Put a top-down image of a car on the page.

✅ Task List

• find appropriate image and add img element to page
• position img element correctly (ie at the top, left corner; front of the image should also face right)
• change background color

User can start their car.

💰 Motivation

It's a driving game, duh!

📐 Plan

Move the car a few pixels every 16 milliseconds when the user presses space.

Hints!

• Add a location to your data model to hold the car's x and y coordinates on the page.
• Use absolute positioning for your image.
• Use the style property of element objects to change your car's top and left box offset styles.
• Move your car every 16 milliseconds for a smooth movement.
• The car doesn't have to change directions yet, that's a different feature.

✅ Task List

• confirm that the repeat keyboard event works the way I think it does.
• review how absolute positioning and the offset properties work

User can turn their car.

💰 Motivation!

The user needs to be able to control which way their car is facing.

📐 Plan

Rotate the image with CSS classes when the user presses an arrow key.

Hints!

• Create a simple data model that includes which way the car is facing, (north, south, east, or west).
• Listen for 'keydown' events on the document.

You will attempt to write your own task list before coding this feature. Refer to past projects for an example of what a task list should look like. Lots of small tasks is better than a few large tasks.

✅ Task List

• review how CSS transform property rotate() transform function work
• create a data model for keeping track of the direction the car is facing
  • the initial direction set to 'west'
• write handler for 'keydown' event; function does these things:
  • car image rotates to face the direction of pressed arrow key
    - [ ] ex. pressing down array rotates car 90 deg clockwise (south) from its initial direction (west)
  • updates data model to match rotation
• check for errors and fix them
• once you've established things are working as intended remove console logs
• check for and remove CSS that isn't doing anything