Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CreedSimAssassin™</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- background: linear-gradient(135deg, #2c1810, #4a3426);
- font-family: 'Courier New', monospace;
- overflow: hidden;
- color: #f4e4c1;
- }
- #gameContainer {
- position: relative;
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- }
- #gameCanvas {
- display: block;
- background: linear-gradient(180deg, #87ceeb 0%, #deb887 70%, #8b4513 100%);
- image-rendering: pixelated;
- }
- #ui {
- position: absolute;
- top: 10px;
- left: 10px;
- z-index: 100;
- color: #f4e4c1;
- text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
- }
- #controls {
- position: absolute;
- bottom: 10px;
- left: 10px;
- z-index: 100;
- font-size: 12px;
- background: rgba(0,0,0,0.7);
- padding: 10px;
- border-radius: 5px;
- }
- .title {
- position: absolute;
- top: 20px;
- right: 20px;
- font-size: 24px;
- font-weight: bold;
- text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
- color: #d4af37;
- }
- #combo-display {
- position: absolute;
- top: 60px;
- right: 20px;
- font-size: 18px;
- color: #ff6b35;
- text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
- }
- </style>
- </head>
- <body>
- <div id="gameContainer">
- <canvas id="gameCanvas"></canvas>
- <div class="title">CreedSimAssassin™</div>
- <div id="ui">
- <div>Health: <span id="health">100</span></div>
- <div>Score: <span id="score">0</span></div>
- <div>Level: <span id="level">1</span></div>
- </div>
- <div id="combo-display"></div>
- <div id="controls">
- WASD/Arrow Keys: Move | Space: Jump/Wall Jump | E: Assassinate | Q: Stealth Attack | R: Combo Strike
- </div>
- </div>
- <script>
- class CreedSimAssassin {
- constructor() {
- this.canvas = document.getElementById('gameCanvas');
- this.ctx = this.canvas.getContext('2d');
- this.canvas.width = window.innerWidth;
- this.canvas.height = window.innerHeight;
- this.camera = { x: 0, y: 0 };
- this.keys = {};
- this.gameState = 'playing';
- this.player = {
- x: 100,
- y: 400,
- width: 20,
- height: 30,
- vx: 0,
- vy: 0,
- onGround: false,
- onWall: false,
- wallDirection: 0,
- health: 100,
- maxHealth: 100,
- facing: 1,
- isStealthed: false,
- stealthCooldown: 0,
- comboCount: 0,
- lastAttackTime: 0,
- color: '#8b4513'
- };
- this.enemies = [];
- this.platforms = [];
- this.walls = [];
- this.particles = [];
- this.score = 0;
- this.level = 1;
- this.initializeLevel();
- this.bindEvents();
- this.gameLoop();
- }
- initializeLevel() {
- // Create platforms
- this.platforms = [
- {x: 0, y: 550, width: 200, height: 20},
- {x: 250, y: 480, width: 150, height: 20},
- {x: 450, y: 400, width: 120, height: 20},
- {x: 620, y: 350, width: 100, height: 20},
- {x: 800, y: 420, width: 180, height: 20},
- {x: 1050, y: 300, width: 150, height: 20},
- {x: 1300, y: 450, width: 200, height: 20}
- ];
- // Create walls for climbing
- this.walls = [
- {x: 400, y: 200, width: 20, height: 200},
- {x: 720, y: 150, width: 20, height: 200},
- {x: 1200, y: 100, width: 20, height: 200}
- ];
- // Create enemies
- this.enemies = [
- {x: 300, y: 450, width: 18, height: 28, health: 50, maxHealth: 50, vx: 0, facing: -1, type: 'guard', alertness: 0, patrolStart: 250, patrolEnd: 400},
- {x: 500, y: 370, width: 18, height: 28, health: 75, maxHealth: 75, vx: 0, facing: 1, type: 'archer', alertness: 0, patrolStart: 450, patrolEnd: 570},
- {x: 850, y: 390, width: 18, height: 28, health: 60, maxHealth: 60, vx: 0, facing: -1, type: 'guard', alertness: 0, patrolStart: 800, patrolEnd: 980}
- ];
- }
- bindEvents() {
- window.addEventListener('keydown', (e) => {
- this.keys[e.code] = true;
- this.handleKeyDown(e);
- });
- window.addEventListener('keyup', (e) => {
- this.keys[e.code] = false;
- });
- window.addEventListener('resize', () => {
- this.canvas.width = window.innerWidth;
- this.canvas.height = window.innerHeight;
- });
- }
- handleKeyDown(e) {
- switch(e.code) {
- case 'KeyE':
- this.performAssassination();
- break;
- case 'KeyQ':
- this.performStealthAttack();
- break;
- case 'KeyR':
- this.performComboStrike();
- break;
- }
- }
- update() {
- this.updatePlayer();
- this.updateEnemies();
- this.updateParticles();
- this.updateCamera();
- this.checkCollisions();
- if (this.player.stealthCooldown > 0) {
- this.player.stealthCooldown--;
- }
- // Reset combo if too much time passes
- if (Date.now() - this.player.lastAttackTime > 3000) {
- this.player.comboCount = 0;
- }
- }
- updatePlayer() {
- const player = this.player;
- const speed = 4;
- const jumpPower = 12;
- // Horizontal movement
- if (this.keys['KeyA'] || this.keys['ArrowLeft']) {
- player.vx = -speed;
- player.facing = -1;
- } else if (this.keys['KeyD'] || this.keys['ArrowRight']) {
- player.vx = speed;
- player.facing = 1;
- } else {
- player.vx *= 0.8; // Friction
- }
- // Jumping and wall jumping
- if (this.keys['Space'] || this.keys['KeyW'] || this.keys['ArrowUp']) {
- if (player.onGround) {
- player.vy = -jumpPower;
- player.onGround = false;
- } else if (player.onWall && !player.onGround) {
- // Wall jump
- player.vy = -jumpPower * 0.8;
- player.vx = player.wallDirection * speed * 1.5;
- player.onWall = false;
- }
- }
- // Apply gravity
- player.vy += 0.6;
- // Terminal velocity
- if (player.vy > 15) player.vy = 15;
- // Update position
- player.x += player.vx;
- player.y += player.vy;
- // Keep player in bounds
- if (player.x < 0) player.x = 0;
- if (player.x > 1500 - player.width) player.x = 1500 - player.width;
- if (player.y > this.canvas.height) {
- player.health -= 20;
- player.x = 100;
- player.y = 400;
- player.vx = 0;
- player.vy = 0;
- }
- }
- updateEnemies() {
- this.enemies.forEach(enemy => {
- // Simple AI patrol behavior
- if (enemy.type === 'guard') {
- if (enemy.x <= enemy.patrolStart) {
- enemy.facing = 1;
- } else if (enemy.x >= enemy.patrolEnd) {
- enemy.facing = -1;
- }
- enemy.x += enemy.facing * 0.5;
- }
- // Check if player is nearby (detection)
- const distToPlayer = Math.abs(this.player.x - enemy.x);
- if (distToPlayer < 80 && !this.player.isStealthed) {
- enemy.alertness = Math.min(100, enemy.alertness + 2);
- // Move toward player when alerted
- if (enemy.alertness > 50) {
- const direction = this.player.x > enemy.x ? 1 : -1;
- enemy.x += direction * 1.2;
- enemy.facing = direction;
- }
- } else {
- enemy.alertness = Math.max(0, enemy.alertness - 1);
- }
- });
- }
- updateParticles() {
- this.particles = this.particles.filter(particle => {
- particle.x += particle.vx;
- particle.y += particle.vy;
- particle.life--;
- particle.opacity = particle.life / particle.maxLife;
- return particle.life > 0;
- });
- }
- updateCamera() {
- // Follow player with some smoothing
- const targetX = this.player.x - this.canvas.width / 2;
- this.camera.x += (targetX - this.camera.x) * 0.1;
- // Keep camera in bounds
- if (this.camera.x < 0) this.camera.x = 0;
- if (this.camera.x > 1500 - this.canvas.width) {
- this.camera.x = 1500 - this.canvas.width;
- }
- }
- checkCollisions() {
- this.player.onGround = false;
- this.player.onWall = false;
- // Platform collisions
- this.platforms.forEach(platform => {
- if (this.isColliding(this.player, platform)) {
- // Top collision (landing on platform)
- if (this.player.vy > 0 && this.player.y < platform.y) {
- this.player.y = platform.y - this.player.height;
- this.player.vy = 0;
- this.player.onGround = true;
- }
- }
- });
- // Wall collisions
- this.walls.forEach(wall => {
- if (this.isColliding(this.player, wall)) {
- if (this.player.vx > 0) {
- // Right side collision
- this.player.x = wall.x - this.player.width;
- this.player.onWall = true;
- this.player.wallDirection = -1;
- this.player.vy *= 0.7; // Wall slide
- } else if (this.player.vx < 0) {
- // Left side collision
- this.player.x = wall.x + wall.width;
- this.player.onWall = true;
- this.player.wallDirection = 1;
- this.player.vy *= 0.7; // Wall slide
- }
- }
- });
- }
- isColliding(rect1, rect2) {
- return rect1.x < rect2.x + rect2.width &&
- rect1.x + rect1.width > rect2.x &&
- rect1.y < rect2.y + rect2.height &&
- rect1.y + rect1.height > rect2.y;
- }
- performAssassination() {
- const assassinRange = 40;
- let targetEnemy = null;
- this.enemies.forEach(enemy => {
- const distance = Math.sqrt(
- Math.pow(this.player.x - enemy.x, 2) +
- Math.pow(this.player.y - enemy.y, 2)
- );
- if (distance < assassinRange) {
- targetEnemy = enemy;
- }
- });
- if (targetEnemy) {
- // Instant kill for assassination
- targetEnemy.health = 0;
- this.score += 100 + (this.player.comboCount * 25);
- this.player.comboCount++;
- this.player.lastAttackTime = Date.now();
- // Create blood particles
- this.createParticles(targetEnemy.x, targetEnemy.y, '#ff0000', 8);
- // Remove dead enemy
- this.enemies = this.enemies.filter(enemy => enemy !== targetEnemy);
- this.updateComboDisplay('ASSASSINATION!');
- }
- }
- performStealthAttack() {
- if (this.player.stealthCooldown > 0) return;
- this.player.isStealthed = true;
- this.player.stealthCooldown = 180; // 3 seconds at 60fps
- this.player.color = '#4a4a4a'; // Darker color when stealthed
- const stealthRange = 35;
- this.enemies.forEach(enemy => {
- const distance = Math.sqrt(
- Math.pow(this.player.x - enemy.x, 2) +
- Math.pow(this.player.y - enemy.y, 2)
- );
- if (distance < stealthRange) {
- enemy.health -= 40;
- enemy.alertness = 0; // Reset alertness
- this.score += 75 + (this.player.comboCount * 20);
- this.player.comboCount++;
- this.player.lastAttackTime = Date.now();
- this.createParticles(enemy.x, enemy.y, '#purple', 5);
- if (enemy.health <= 0) {
- this.enemies = this.enemies.filter(e => e !== enemy);
- }
- }
- });
- setTimeout(() => {
- this.player.isStealthed = false;
- this.player.color = '#8b4513';
- }, 1000);
- this.updateComboDisplay('STEALTH STRIKE!');
- }
- performComboStrike() {
- const comboRange = 50;
- let hitCount = 0;
- this.enemies.forEach(enemy => {
- const distance = Math.sqrt(
- Math.pow(this.player.x - enemy.x, 2) +
- Math.pow(this.player.y - enemy.y, 2)
- );
- if (distance < comboRange) {
- const damage = 25 + (this.player.comboCount * 10);
- enemy.health -= damage;
- hitCount++;
- this.createParticles(enemy.x, enemy.y, '#ffd700', 6);
- if (enemy.health <= 0) {
- this.score += 60 + (this.player.comboCount * 15);
- this.enemies = this.enemies.filter(e => e !== enemy);
- }
- }
- });
- if (hitCount > 0) {
- this.player.comboCount += hitCount;
- this.player.lastAttackTime = Date.now();
- this.score += hitCount * 30;
- this.updateComboDisplay(`COMBO x${this.player.comboCount}!`);
- }
- }
- createParticles(x, y, color, count) {
- for (let i = 0; i < count; i++) {
- this.particles.push({
- x: x + Math.random() * 20 - 10,
- y: y + Math.random() * 20 - 10,
- vx: Math.random() * 6 - 3,
- vy: Math.random() * 6 - 3,
- color: color,
- life: 30,
- maxLife: 30,
- opacity: 1
- });
- }
- }
- updateComboDisplay(text) {
- const display = document.getElementById('combo-display');
- display.textContent = text;
- display.style.opacity = '1';
- setTimeout(() => {
- display.style.opacity = '0';
- }, 2000);
- }
- render() {
- // Clear canvas
- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
- // Save context for camera transform
- this.ctx.save();
- this.ctx.translate(-this.camera.x, -this.camera.y);
- // Draw platforms
- this.ctx.fillStyle = '#654321';
- this.platforms.forEach(platform => {
- this.ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
- });
- // Draw walls
- this.ctx.fillStyle = '#8b7355';
- this.walls.forEach(wall => {
- this.ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
- });
- // Draw enemies
- this.enemies.forEach(enemy => {
- // Enemy body
- this.ctx.fillStyle = enemy.alertness > 50 ? '#ff4444' : '#444444';
- this.ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
- // Health bar
- const healthRatio = enemy.health / enemy.maxHealth;
- this.ctx.fillStyle = '#ff0000';
- this.ctx.fillRect(enemy.x, enemy.y - 8, enemy.width, 3);
- this.ctx.fillStyle = '#00ff00';
- this.ctx.fillRect(enemy.x, enemy.y - 8, enemy.width * healthRatio, 3);
- // Alert indicator
- if (enemy.alertness > 25) {
- this.ctx.fillStyle = '#ffff00';
- this.ctx.fillRect(enemy.x + 5, enemy.y - 15, 2, 2);
- }
- });
- // Draw player
- this.ctx.fillStyle = this.player.color;
- if (this.player.isStealthed) {
- this.ctx.globalAlpha = 0.5;
- }
- this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);
- // Player direction indicator
- this.ctx.fillStyle = '#ffffff';
- const eyeX = this.player.x + (this.player.facing > 0 ? 15 : 5);
- this.ctx.fillRect(eyeX, this.player.y + 5, 2, 2);
- this.ctx.globalAlpha = 1;
- // Draw particles
- this.particles.forEach(particle => {
- this.ctx.fillStyle = particle.color;
- this.ctx.globalAlpha = particle.opacity;
- this.ctx.fillRect(particle.x, particle.y, 3, 3);
- });
- this.ctx.globalAlpha = 1;
- // Restore context
- this.ctx.restore();
- // Update UI
- document.getElementById('health').textContent = this.player.health;
- document.getElementById('score').textContent = this.score;
- document.getElementById('level').textContent = this.level;
- }
- gameLoop() {
- this.update();
- this.render();
- requestAnimationFrame(() => this.gameLoop());
- }
- }
- // Start the game when page loads
- window.addEventListener('load', () => {
- new CreedSimAssassin();
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment