Coding Your Own Tiny Dino Runner Game: A Beginner‘s Guide290

Ever wondered how those endlessly scrolling games like the classic Chrome Dino game are made? They might seem complex, but with a little bit of coding knowledge, you can build your own version! This tutorial will guide you through creating a simple "Tiny Dino Runner" game using JavaScript, HTML, and CSS. We'll focus on the core mechanics to get you started, leaving room for customization and expansion later on.

Setting the Stage: HTML Structure

First, we need to create the basic structure of our game using HTML. This will define the canvas where our dino and obstacles will appear. Create a new HTML file (e.g., ``) and add the following code:```html



Tiny Dino Runner







```

This sets up a canvas element with an ID of "gameCanvas," which is where our game will be drawn. We also link to an external CSS file (``) for styling and a JavaScript file (``) for the game logic. Let's create these files now.

Styling with CSS: ``

The CSS file is relatively simple. We'll just add some basic styling to center the canvas on the page:```css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0; /* Light grey background */
}
#gameCanvas {
background-color: #fff; /* White canvas */
border: 1px solid #ccc; /* Subtle border */
}
```

Game Logic with JavaScript: ``

This is where the magic happens. We'll use JavaScript to create our dino, obstacles, and game mechanics. Open `` and paste the following code:```javascript
const canvas = ('gameCanvas');
const ctx = ('2d');
// Dino properties
let dinoX = 50;
let dinoY = 150;
let dinoWidth = 20;
let dinoHeight = 30;
let dinoIsJumping = false;
let dinoVelocity = 0;
// Obstacle properties
let obstacleX = 600;
let obstacleY = 160;
let obstacleWidth = 20;
let obstacleHeight = 20;
//Game loop
function gameLoop() {
(0, 0, , ); //Clear canvas
//Draw Dino
= 'green';
(dinoX, dinoY, dinoWidth, dinoHeight);
//Draw Obstacle
= 'red';
(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
//Move Obstacle
obstacleX -= 5;
if(obstacleX < -obstacleWidth){
obstacleX = ;
}
//Jump Mechanic (Simplified)
if(dinoIsJumping){
dinoY -= dinoVelocity;
dinoVelocity -= 1;
if(dinoY >= 150){
dinoY = 150;
dinoIsJumping = false;
dinoVelocity = 0;
}
}
//Collision Detection (Basic)
if(dinoX < obstacleX + obstacleWidth &&
dinoX + dinoWidth > obstacleX &&
dinoY < obstacleY + obstacleHeight &&
dinoY + dinoHeight > obstacleY){
alert("Game Over!");
}

requestAnimationFrame(gameLoop);
}
//Jump on keypress
('keydown', (event) => {
if ( === 'Space' && !dinoIsJumping) {
dinoIsJumping = true;
dinoVelocity = 15;
}
});

gameLoop();
```

This code sets up the dino and obstacle, draws them on the canvas, moves the obstacle, implements a basic jump mechanic, and includes rudimentary collision detection. The `requestAnimationFrame` function creates a smooth animation loop.

Expanding Your Game

This is just the foundation. You can expand your Tiny Dino Runner in many ways:
Improved Graphics: Use images instead of rectangles for the dino and obstacles.
More Challenging Obstacles: Add different types of obstacles with varying speeds and sizes.
Scoring System: Keep track of the player's score based on how far they run.
Sound Effects: Add sounds for jumping, collisions, and scoring.
Game Over Screen: Display a game over screen with the final score.
Better Collision Detection: Implement more accurate collision detection to handle various obstacle shapes.
Background Scrolling: Create a background that scrolls along with the obstacles.

This tutorial provides a strong starting point for your own Tiny Dino Runner game. Remember to experiment, explore, and have fun building your game! The possibilities are endless. Good luck, and happy coding!

2025-03-28

Previous：ThinkPHP WeChat Development: A Comprehensive Guide to Video Tutorials and Downloads

Next：AI Collision Tutorial: Mastering the Art of Generative Adversarial Networks (GANs)