Crossy Road Game - HTML CSS JavaScript

📌 Project Description:

The Crossy Road Game is a browser-based arcade-style game built using HTML, CSS, and JavaScript. Inspired by the original Crossy Road, this version features a character (e.g., a chicken) that the player moves vertically across lanes filled with moving obstacles like cars or logs.

The goal is to cross as many lanes as possible without colliding with an obstacle. The game combines reflexes, timing, and pattern recognition into a fun and challenging experience — ideal for learning JavaScript game development basics.

⚙️ Key Features:

• Smooth character movement (with keyboard arrows or on-screen controls)

• Randomized obstacle generation and movement

• Collision detection with game over logic

• Score tracking and display

• Grid-based layout with lanes (roads, water, grass)

• Mobile-responsive design

🕹️ How to Play:

Controls:

• Use the arrow keys (↑ ↓ ← →) or touch buttons to move the player.

Objective:

• Cross as many lanes as possible while avoiding cars, water, or other obstacles.

Scoring:

• Earn 1 point for each successful lane crossed.

Game Over:

• The game ends if you collide with a vehicle or fall into a trap.

🧠 Skills You’ll Learn:

• JavaScript game loops using requestAnimationFrame

• Handling keyboard and touch inputs

• DOM manipulation for game elements

• Obstacle movement and collision detection

• Grid-based animation logic