Hey everyone!
We wanted to share a little behind-the-scenes look at a fun project we’ve been working on: creating an interactive, retro-style pixel art dinosaur game that runs right in your web browser! It’s been a cool journey combining creative coding with game mechanics, and we thought you might find the process interesting. MOBILE Attn: The game is built for Desktop & requires a keyboard for movement (forward, back, jumping, throwing fireballs),
The main issues are usually input methods (no keyboard) and screen size/resolution.
The Foundation: Creative Coding with p5.js
To build the game world and handle all the drawing, animation, and interactivity, we turned to the amazing p5.js library. If you haven’t heard of it, p5.js is a JavaScript library specifically designed for creative coding – making it much easier for artists, designers, and developers to work with visuals and interactions on the web. It gave us simple ways to draw shapes, load images, and respond to keyboard input without getting bogged down in lower-level web complexities.
Keeping Organized: Scenes and Libraries via CDN
As games get more features, code organization is key! We used a helpful add-on, the p5.js Scene Manager, to structure the game into different states or “scenes” – think the main gameplay screen, the title screen (if we added one), and the “Game Over” screen. This keeps the code for each part separate and manageable.
Getting these libraries into the project was super easy using a CDN (Content Delivery Network). Instead of downloading the library files, we could simply link to versions hosted online directly in our webpage code. This speeds up setup and ensures users get efficient access to the library.
Setting the Stage: Web Server Presence with PHP
While p5.js runs entirely in the user’s browser (client-side JavaScript), we decided to set up the project using a .php file instead of just .html. Why? This requires the page to be served by a web server (like Apache or Nginx, often part of setups like XAMPP/MAMP or standard web hosting). Even though we haven’t added complex server-side features yet, having the PHP structure in place means we will be adding things like a global leaderboard, user accounts, or saving progress to a database in the future without changing the core file structure. For now, the server simply delivers the HTML and JavaScript needed to run the game in the browser.
From Blocks to Beasts: Visual Evolution
We didn’t start with fancy graphics! Initially, our dino and the cacti obstacles were just simple colored rectangles – placeholder “pixel blocks”. This is a common technique that lets you focus on getting the game mechanics (like moving, jumping, collisions) working correctly first.
Once the core gameplay felt right, we replaced those blocks with actual pixel art .png images. Tools like Piskel (a great free online pixel art editor) are perfect for creating these retro-style sprites. Using p5.js’s preload() function, we could load these .png files before the game starts, bringing our pixelated dino and world to life!
Adding the Action: Gameplay Features
The game evolved through several stages:
- Basic Jump: Started as a classic runner – the world scrolls left, and the player just needs to time jumps (
SPACEbar) to avoid obstacles. - Adding Movement: We then gave the player more control, allowing the dino to move forwards and backwards(
A/Dor Left/Right arrows). - Fighting Back (Fireballs!): To make it more interactive, we added a shooting mechanic (
Xkey). The dino can now fire projectiles (we imagined them as fireballs or energy bolts) to destroy incoming cacti – complete with collision detection! - Dynamic Obstacles: Finally, instead of just sliding, the cacti now spawn randomly at the top or bottom of the screen. Some fall from above, while those on the ground have a chance to jump randomly, making them less predictable!
What’s Next?
It’s been a fantastic learning experience building this little game, piece by piece. It really shows how accessible creative coding and game development can be with tools like p5.js. There’s always more we could add and coming soon – Player Leaderboard (gift cards to top 3), sound effects, different enemy types, maybe even power-ups!
We hope you enjoyed this high-level look at our dino game’s creation! Please check back as we develop this game.
