CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadowstrike Division</title>
<style>
.shadowstrikedivision5692-body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #0A0E17;
color: #E0E0E0;
}
.shadowstrikedivision5692-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #0A0E17, #1A2639);
}
.shadowstrikedivision5692-game-area {
width: 1200px;
height: 675px;
background-color: #1E293B;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
border-radius: 15px;
position: relative;
overflow: hidden;
}
.shadowstrikedivision5692-canvas {
position: absolute;
top: 0;
left: 0;
}
.shadowstrikedivision5692-ui {
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
font-size: 18px;
background-color: rgba(30, 41, 59, 0.8);
padding: 15px;
border-radius: 10px;
backdrop-filter: blur(5px);
}
.shadowstrikedivision5692-character-select {
display: flex;
justify-content: space-around;
margin-top: 30px;
}
.shadowstrikedivision5692-character {
cursor: pointer;
padding: 20px 30px;
background-color: #2C3E50;
border-radius: 10px;
transition: all 0.3s;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.shadowstrikedivision5692-character:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.shadowstrikedivision5692-character.active {
background-color: #3498DB;
color: #FFF;
}
.shadowstrikedivision5692-buttons {
display: flex;
justify-content: center;
margin-top: 30px;
}
.shadowstrikedivision5692-button {
margin: 0 15px;
padding: 15px 30px;
background-color: #E74C3C;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
}
.shadowstrikedivision5692-button:hover {
background-color: #C0392B;
transform: translateY(-3px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
}
.shadowstrikedivision5692-info {
max-width: 1000px;
margin-top: 40px;
text-align: center;
background-color: rgba(30, 41, 59, 0.8);
padding: 30px;
border-radius: 15px;
backdrop-filter: blur(5px);
}
.shadowstrikedivision5692-info h1 {
color: #3498DB;
margin-bottom: 20px;
font-size: 36px;
}
.shadowstrikedivision5692-info p {
margin-bottom: 25px;
font-size: 18px;
line-height: 1.6;
}
.shadowstrikedivision5692-info ul {
text-align: left;
margin-left: 40px;
font-size: 16px;
}
</style>
</head>
<body class="shadowstrikedivision5692-body">
<div class="shadowstrikedivision5692-container">
<div class="shadowstrikedivision5692-game-area">
<canvas id="gameCanvas" class="shadowstrikedivision5692-canvas" width="1200" height="675"></canvas>
<div class="shadowstrikedivision5692-ui">
<div id="health">Health: 100</div>
<div id="energy">Energy: 100</div>
<div id="gadgets">Gadgets: 3</div>
<div id="score">Score: 0</div>
</div>
</div>
<div class="shadowstrikedivision5692-character-select">
<div class="shadowstrikedivision5692-character active" data-character="chad">Chad</div>
<div class="shadowstrikedivision5692-character" data-character="sadie">Sadie</div>
<div class="shadowstrikedivision5692-character" data-character="alex">Alex</div>
<div class="shadowstrikedivision5692-character" data-character="abigail">Abigail</div>
</div>
<div class="shadowstrikedivision5692-buttons">
<button id="startButton" class="shadowstrikedivision5692-button">Start Game</button>
<button id="newGameButton" class="shadowstrikedivision5692-button">New Game</button>
<button id="pauseButton" class="shadowstrikedivision5692-button">Pause</button>
</div>
<div class="shadowstrikedivision5692-info">
<h1>Shadowstrike Division</h1>
<p>An advanced spy-themed action-adventure game with realistic physics, stealth mechanics, hacking, and gadget-based puzzle solving.</p>
<h3>How to play:</h3>
<ul>
<li>Use arrow keys or WASD to move</li>
<li>Press 'Space' to jump</li>
<li>Press 'S' for stealth mode</li>
<li>Press 'H' to hack nearby devices</li>
<li>Press 'G' to use gadgets</li>
<li>Press 'C' to change characters</li>
<li>Press 'E' to interact with objects</li>
<li>Press 'Q' for special ability</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<script>
// Matter.js module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
Composite = Matter.Composite;
// Create engine
var engine = Engine.create();
// Create renderer
var render = Render.create({
canvas: document.getElementById('gameCanvas'),
engine: engine,
options: {
width: 1200,
height: 675,
wireframes: false,
background: '#1E293B'
}
});
// Character definitions
const characters = {
chad: { color: '#FF4136', skills: ['hacking', 'fighting'], specialAbility: 'EMP Blast' },
sadie: { color: '#2ECC40', skills: ['distraction', 'sniping'], specialAbility: 'Cloak' },
alex: { color: '#0074D9', skills: ['stealth', 'survival'], specialAbility: 'Shadow Step' },
abigail: { color: '#FFDC00', skills: ['medical', 'tech'], specialAbility: 'Nano Heal' }
};
let currentCharacter = 'chad';
let gameState = 'menu';
let health = 100;
let energy = 100;
let gadgets = 3;
let score = 0;
let level = 1;
// Create player
var player = Bodies.rectangle(100, 200, 40, 60, {
label: 'player',
render: {
fillStyle: characters[currentCharacter].color
}
});
// Create ground
var ground = Bodies.rectangle(600, 670, 1200, 60, {
isStatic: true,
render: {
fillStyle: '#34495E'
}
});
// Add bodies to world
World.add(engine.world, [player, ground]);
// Run the engine
Engine.run(engine);
// Run the renderer
Render.run(render);
// Game loop
function gameLoop() {
if (gameState === 'playing') {
updateGame();
requestAnimationFrame(gameLoop);
}
}
function updateGame() {
// Update player position based on keyboard input
if (keys.ArrowRight || keys.d) Body.setVelocity(player, { x: 5, y: player.velocity.y });
if (keys.ArrowLeft || keys.a) Body.setVelocity(player, { x: -5, y: player.velocity.y });
if ((keys.ArrowUp || keys.w) && Math.abs(player.velocity.y) < 0.1) Body.setVelocity(player, { x: player.velocity.x, y: -10 });
// Check for collisions
var collisions = Matter.Query.collides(player, [ground]);
if (collisions.length > 0) {
// Player is on the ground
if (keys.Space) Body.setVelocity(player, { x: player.velocity.x, y: -15 });
}
// Update UI
document.getElementById('health').textContent = `Health: ${health}`;
document.getElementById('energy').textContent = `Energy: ${energy}`;
document.getElementById('gadgets').textContent = `Gadgets: ${gadgets}`;
document.getElementById('score').textContent = `Score: ${score}`;
// Check game over condition
if (health <= 0) {
gameState = 'gameOver';
alert('Game Over! Your score: ' + score);
}
// Check level completion
if (player.position.x > 1150) {
level++;
resetLevel();
alert('Level ' + level + ' completed!');
}
}
function resetLevel() {
Body.setPosition(player, { x: 100, y: 200 });
// Add more level reset logic here
}
// Keyboard input
let keys = {};
document.addEventListener('keydown', (e) => { keys[e.code] = true; });
document.addEventListener('keyup', (e) => { keys[e.code] = false; });
document.addEventListener('keydown', (e) => {
if (gameState !== 'playing') return;
switch (e.key) {
case 's': console.log('Stealth mode activated'); break;
case 'h': console.log('Hacking nearby device'); break;
case 'g': console.log('Using gadget'); gadgets = Math.max(0, gadgets - 1); break;
case 'c': console.log('Changing character'); break;
case 'e': console.log('Interacting with object'); break;
case 'q': useSpecialAbility(); break;
}
});
function useSpecialAbility() {
console.log(`Using ${characters[currentCharacter].specialAbility}`);
// Implement special ability effects here
}
document.getElementById('startButton').addEventListener('click', () => {
gameState = 'playing';
gameLoop();
});
document.getElementById('newGameButton').addEventListener('click', () => {
health = 100;
energy = 100;
gadgets = 3;
score = 0;
level = 1;
resetLevel();
gameState = 'playing';
gameLoop();
});
document.getElementById('pauseButton').addEventListener('click', () => {
if (gameState === 'playing') {
gameState = 'paused';
document.getElementById('pauseButton').textContent = 'Resume';
} else if (gameState === 'paused') {
gameState = 'playing';
document.getElementById('pauseButton').textContent = 'Pause';
gameLoop();
}
});
document.querySelectorAll('.shadowstrikedivision5692-character').forEach(char => {
char.addEventListener('click', () => {
document.querySelector('.shadowstrikedivision5692-character.active').classList.remove('active');
char.classList.add('active');
currentCharacter = char.dataset.character;
player.render.fillStyle = characters[currentCharacter].color;
});
});
// Particle system
function createParticle(x, y, color) {
return Bodies.circle(x, y, 2, {
render: {
fillStyle: color
},
collisionFilter: {
category: 0x0002
},
frictionAir: 0.1
});
}
function emitParticles(x, y, color, count) {
for (let i = 0; i < count; i++) {
let particle = createParticle(x, y, color);
Body.setVelocity(particle, {
x: (Math.random() - 0.5) * 5,
y: (Math.random() - 0.5) * 5
});
World.add(engine.world, particle);
setTimeout(() => {
World.remove(engine.world, particle);
}, 1000);
}
}
// Example usage of particle system
setInterval(() => {
if (gameState === 'playing') {
emitParticles(player.position.x, player.position.y, characters[currentCharacter].color, 5);
}
}, 100);
// Add some platforms
function addPlatforms() {
let platforms = [
Bodies.rectangle(300, 500, 200, 20, { isStatic: true, render: { fillStyle: '#34495E' } }),
Bodies.rectangle(600, 400, 150, 20, { isStatic: true, render: { fillStyle: '#34495E' } }),
Bodies.rectangle(900, 300, 180, 20, { isStatic: true, render: { fillStyle: '#34495E' } })
];
World.add(engine.world, platforms);
}
addPlatforms();
// Add some collectibles
function addCollectibles() {
let collectibles = [
Bodies.circle(300, 450, 10, { isStatic: true, isSensor: true, render: { fillStyle: '#F1C40F' } }),
Bodies.circle(600, 350, 10, { isStatic: true, isSensor: true, render: { fillStyle: '#F1C40F' } }),
Bodies.circle(900, 250, 10, { isStatic: true, isSensor: true, render: { fillStyle: '#F1C40F' } })
];
World.add(engine.world, collectibles);
}
addCollectibles();
// Collision detection
Matter.Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
if (pair.bodyA === player || pair.bodyB === player) {
var otherBody = pair.bodyA === player ? pair.bodyB : pair.bodyA;
if (otherBody.isSensor) {
// Collectible collected
World.remove(engine.world, otherBody);
score += 10;
emitParticles(otherBody.position.x, otherBody.position.y, '#F1C40F', 20);
}
}
}
});
</script>
</body>
</html>