madelinben / arcade-canvas

Responsive web application with account and rankings system, showcasing a collection of canvas mini-games.

Canvas Coding Challenges ✨

A Collection of re-imagined arcade games turned Challenges to practice Responsive Web Development and Handle User Interaction Cases.

🚀 Site Structure

Gallery:

• [ ]

📁 Dynamic Pages:

• Add a gallery tile to the home page for each project.
• Import the relevant files from a selected project's dir.
• Implement import file to setup canvas environment and simplify project format.

🚧 Projects:

• Organise project gallery in a tile layout with dynamic sizing.
• Clean up canvas environment to clearly showcase the selected game and related user information.
• Scale canvas and js and arrange canvas and info container.
• Update project thumbnail to the canvas state of the highest scoring game.

Responsive Layout:

• [ ]

🧾 Account Management

Functionality

• Format page structure for account pages (Login, Register, Profile)
• Style layout using flexbox
• Setup MySQL database connection with phpmyadmin
• Based on the action validate the input values using isset and POST
• Encrypt password value before any computation.
• Execute queries establishing database connection
• Validate the results and provide feedback to the user
• escape service page if invalid entry
• Update userid Session to track relevant information.

Drop-Down Interface

• Format header elements, positioning the site logo and action button at either end of the flex container.
• Hide and Show the dropdown container to reveal content elements and links.
• Alter the action button and label, providing sign in/out and profile options.

Preference Data

• [ ]
• Implement profile system to track user scores.

🕹️ Arcade Challenges

🏓 Pong

• Format canvas environment and draw method
• Return ball to center spot when starting a game.
• Alternate between players and vary the initial ball angle.
• Implement interactive paddles for both players with unique key binds.
• Validate collisions between the ball and paddles to alter vector speed.
• Display each player score.
• Implement general COMP intelligence with a lower speed.

🐍 Snake

• Format canvas environment and draw method
• Allow the user to control the snakes moving direction using key inputs.
• Implement boundaries to contain Snake within the canvas area.
• Randomly generate fruit positions.
• Determine if the snake has eaten a piece of fruit in order to increment the snake size and player score.
• Validate whether the snake has collided to reset the game.

🐞 BUGS!

Header:

• Grow highlighted elements to further show selectability.
• Encapsulate page sections within a centered 80vw wrapper to align everything.

Account:

• Account input elements are converting lowercase characters to allcaps.
• Success and Error messages are wrapping flex elements.
• Hide dropdown if visible when user clicks outside the content container.

Gallery:

• Ensure project tiles are fixed to 300x300 scale.
• Overflow the content section and position the footer relative to the bottom.

Footer:

• Text decoration on credit repo link.

Project:

• Existing game graphics need to be scaled on window resize.
• Game frame rate should increase exponentially as the rounds go on.

Pong:

• Ball angle should initially travel towards the winning player. Game is currently just randomising the angle.
• Ball y velocity is not changed when the underside of the paddle is hit.

Snake:

• Snake game needs to terminate if the snake head collides outside the canvas boundary.

What's Next!

• Block Breaker
• Asteroids