Overview
This prompt aims to guide developers in creating a 2D side-scrolling platformer game using HTML, CSS, and JavaScript. Game developers and coding enthusiasts will benefit by learning practical implementation techniques for multiplayer game mechanics.
Prompt Overview
Purpose: This game aims to provide an engaging 2D platformer experience for two players.
Audience: It targets gamers who enjoy cooperative gameplay and platforming challenges.
Distinctive Feature: The game features independent controls for two players, enhancing teamwork and coordination.
Outcome: Players win by reaching the flag together, promoting collaboration and strategic movement.
Quick Specs
- Media: Text
- Use case: Content Creation, Generation, Planning & Strategy
- Industry: Content & Media Creation, Cryptocurrency & Blockchain
- Techniques: Decomposition, Prompt Templates, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
- [assign keys for left, right, and jump] – Assign Keys For Left, Right, And Jump
Example Variables Block
- [assign keys for left, right, and jump]: Example Assign Keys For Left, Right, And Jump
The Prompt
Create a complete 2D side-scrolling platformer game in a single HTML file using HTML, CSS, and JavaScript.
The game should support two players, each with independent controls for moving left, moving right, and jumping.
Design fixed platforms (not randomly generated) arranged strategically across the level. Implement a flag that players must reach together to win the game. When both players reach the flag, display a win message indicating success.
**Key Requirements:**
– Single HTML file containing all code (HTML, CSS, JS).
– Two players simultaneously playable with separate controls:
– Player 1: [assign keys for left, right, and jump]
– Player 2: [assign keys for left, right, and jump]
– Side-scrolling mechanics with fixed platforms for players to jump on.
– Collision detection for players and platforms.
– A flag object positioned at the end of the level.
– The game ends with a victory message only when both players reach the flag.
– Clear and functional user input handling for both players.
**Steps:**
1. Define the HTML structure, including a canvas or game area.
2. Implement CSS styling to clearly display the game area.
3. Use JavaScript to:
– Create player objects with positions, velocities, and controls.
– Design fixed platforms at specific coordinates.
– Handle user inputs for both players.
– Implement physics for movement and jumping.
– Perform collision detection with platforms.
– Detect when each player reaches the flag.
– Track if both players are at the flag and display a win message.
**Output Format:**
Provide a single, self-contained HTML file with embedded CSS and JavaScript that fully implements the described 2-player platformer game.
The code should be well-organized, commented for readability, and ready to run by simply opening the HTML file in a web browser.
Screenshot Examples
Tips for Best Results
- HTML Structure: Create a canvas element for the game area and include a simple layout for the game.
- CSS Styling: Style the canvas and game elements to ensure clear visibility and a pleasant user experience.
- JavaScript Logic: Implement player movement, jumping mechanics, and collision detection with platforms using event listeners for controls.
- Victory Condition: Check if both players reach the flag simultaneously and display a win message on the canvas.
FAQ
- What is the main objective of the game?
Players must reach the flag together to win the game. - How many players can play the game simultaneously?
The game supports two players with independent controls. - What are the controls for Player 1?
Player 1 can move left, right, and jump using assigned keys. - What happens when both players reach the flag?
A win message is displayed indicating their success.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
