Alright, let’s tackle this user request. They want me to create a game called “Systolic Showdown” with specific HTML, CSS, and JavaScript files. The user provided a detailed synopsis, so I need to make sure all parts are covered.
First, I’ll start by setting up the basic HTML structure. I need a canvas element for the game, along with HUD elements for health and energy. The CSS should style the game container, players, projectiles, and HUD. I’ll use flexbox to center everything and set a dark background to match the bloodstream setting.
Next, the JavaScript part. The game loop is crucial for animation. I’ll use requestAnimationFrame. Player movement will be handled with keydown and keyup event listeners. The players should move with arrow keys and WASD. Collision detection is needed for projectiles and players. I’ll need variables for health, energy, and other stats.
The game mechanics include Sonic Boom attacks, which are projectiles. When a player presses the attack key (Space or Enter), a projectile is created. These projectiles move in the direction the player is facing. I’ll need to check for collisions between projectiles and the opposing player, then update health accordingly.
Cellular absorption is another feature. Collecting red blood cells gives a shield. I’ll spawn cells randomly and check if players collect them. Shields should be temporary, so a timeout will remove the shield after a few seconds.
The medical intervention event is a timed mini-game. I’ll create a progress bar and a moving cursor. Players need to press the key when the cursor is in the green zone. Success gives a health boost. This requires an interval to move the cursor and an event listener for the key press.
I need to handle game states: showing a title screen initially, then the game, and a game over screen when someone’s health reaches zero. The startGame function will reset all variables and spawn cells. The gameOver function stops the loop and displays the winner.
Testing is important. I’ll make sure all features work together without errors. Possible issues might be collision detection accuracy or performance with multiple projectiles. I’ll optimize by limiting projectiles and using efficient checks.
Finally, adding audio and images as per the tools mentioned. The user mentioned PNG, JPG, and sound files, so I’ll include placeholders for those. The generateImage and generateAudio tools will create the necessary assets with appropriate prompts related to the game’s setting.
I should ensure all parts from the synopsis are included: movement, combat, absorption, medical events, different modes, customization, hazards, etc. Since it’s a browser game, keeping it lightweight and responsive is key.
Now, putting it all together, making sure the code is clean and well-commented. I’ll structure the CSS for clarity, use classes for players and projectiles, and manage game states smoothly. Testing each feature step by step to catch any bugs early on.
Background:
In 2047, the Geneva BioAccords collapsed as corporations weaponized medical nanotech. Biovore’s Wrath-Class Infiltrators (red triangle logo) specialize in host manipulation, while GeneSys Whitecoat Units (blue caduceus emblem) developed countermeasures during the Tokyo Pandemic. Your mission occurs in Patient Zero – CEO Elias Voss, whose augmented circulatory system became the ultimate corporate battleground.
Your Move, Operative:
Will you prioritize eliminating the rival nanobot or stabilizing the host? Choose your corporate allegiance and initial deployment strategy.
