Pyroflame

CreedSimAssassin

Aug 27th, 2025
123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.24 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>CreedSimAssassin™</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             background: linear-gradient(135deg, #2c1810, #4a3426);
  16.             font-family: 'Courier New', monospace;
  17.             overflow: hidden;
  18.             color: #f4e4c1;
  19.         }
  20.  
  21.         #gameContainer {
  22.             position: relative;
  23.             width: 100vw;
  24.             height: 100vh;
  25.             overflow: hidden;
  26.         }
  27.  
  28.         #gameCanvas {
  29.             display: block;
  30.             background: linear-gradient(180deg, #87ceeb 0%, #deb887 70%, #8b4513 100%);
  31.             image-rendering: pixelated;
  32.         }
  33.  
  34.         #ui {
  35.             position: absolute;
  36.             top: 10px;
  37.             left: 10px;
  38.             z-index: 100;
  39.             color: #f4e4c1;
  40.             text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  41.         }
  42.  
  43.         #controls {
  44.             position: absolute;
  45.             bottom: 10px;
  46.             left: 10px;
  47.             z-index: 100;
  48.             font-size: 12px;
  49.             background: rgba(0,0,0,0.7);
  50.             padding: 10px;
  51.             border-radius: 5px;
  52.         }
  53.  
  54.         .title {
  55.             position: absolute;
  56.             top: 20px;
  57.             right: 20px;
  58.             font-size: 24px;
  59.             font-weight: bold;
  60.             text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
  61.             color: #d4af37;
  62.         }
  63.  
  64.         #combo-display {
  65.             position: absolute;
  66.             top: 60px;
  67.             right: 20px;
  68.             font-size: 18px;
  69.             color: #ff6b35;
  70.             text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <div id="gameContainer">
  76.         <canvas id="gameCanvas"></canvas>
  77.         <div class="title">CreedSimAssassin™</div>
  78.         <div id="ui">
  79.             <div>Health: <span id="health">100</span></div>
  80.             <div>Score: <span id="score">0</span></div>
  81.             <div>Level: <span id="level">1</span></div>
  82.         </div>
  83.         <div id="combo-display"></div>
  84.         <div id="controls">
  85.             WASD/Arrow Keys: Move | Space: Jump/Wall Jump | E: Assassinate | Q: Stealth Attack | R: Combo Strike
  86.         </div>
  87.     </div>
  88.  
  89.     <script>
  90.         class CreedSimAssassin {
  91.             constructor() {
  92.                 this.canvas = document.getElementById('gameCanvas');
  93.                 this.ctx = this.canvas.getContext('2d');
  94.                 this.canvas.width = window.innerWidth;
  95.                 this.canvas.height = window.innerHeight;
  96.  
  97.                 this.camera = { x: 0, y: 0 };
  98.                 this.keys = {};
  99.                 this.gameState = 'playing';
  100.                
  101.                 this.player = {
  102.                     x: 100,
  103.                     y: 400,
  104.                     width: 20,
  105.                     height: 30,
  106.                     vx: 0,
  107.                     vy: 0,
  108.                     onGround: false,
  109.                     onWall: false,
  110.                     wallDirection: 0,
  111.                     health: 100,
  112.                     maxHealth: 100,
  113.                     facing: 1,
  114.                     isStealthed: false,
  115.                     stealthCooldown: 0,
  116.                     comboCount: 0,
  117.                     lastAttackTime: 0,
  118.                     color: '#8b4513'
  119.                 };
  120.  
  121.                 this.enemies = [];
  122.                 this.platforms = [];
  123.                 this.walls = [];
  124.                 this.particles = [];
  125.                
  126.                 this.score = 0;
  127.                 this.level = 1;
  128.                
  129.                 this.initializeLevel();
  130.                 this.bindEvents();
  131.                 this.gameLoop();
  132.             }
  133.  
  134.             initializeLevel() {
  135.                 // Create platforms
  136.                 this.platforms = [
  137.                     {x: 0, y: 550, width: 200, height: 20},
  138.                     {x: 250, y: 480, width: 150, height: 20},
  139.                     {x: 450, y: 400, width: 120, height: 20},
  140.                     {x: 620, y: 350, width: 100, height: 20},
  141.                     {x: 800, y: 420, width: 180, height: 20},
  142.                     {x: 1050, y: 300, width: 150, height: 20},
  143.                     {x: 1300, y: 450, width: 200, height: 20}
  144.                 ];
  145.  
  146.                 // Create walls for climbing
  147.                 this.walls = [
  148.                     {x: 400, y: 200, width: 20, height: 200},
  149.                     {x: 720, y: 150, width: 20, height: 200},
  150.                     {x: 1200, y: 100, width: 20, height: 200}
  151.                 ];
  152.  
  153.                 // Create enemies
  154.                 this.enemies = [
  155.                     {x: 300, y: 450, width: 18, height: 28, health: 50, maxHealth: 50, vx: 0, facing: -1, type: 'guard', alertness: 0, patrolStart: 250, patrolEnd: 400},
  156.                     {x: 500, y: 370, width: 18, height: 28, health: 75, maxHealth: 75, vx: 0, facing: 1, type: 'archer', alertness: 0, patrolStart: 450, patrolEnd: 570},
  157.                     {x: 850, y: 390, width: 18, height: 28, health: 60, maxHealth: 60, vx: 0, facing: -1, type: 'guard', alertness: 0, patrolStart: 800, patrolEnd: 980}
  158.                 ];
  159.             }
  160.  
  161.             bindEvents() {
  162.                 window.addEventListener('keydown', (e) => {
  163.                     this.keys[e.code] = true;
  164.                     this.handleKeyDown(e);
  165.                 });
  166.  
  167.                 window.addEventListener('keyup', (e) => {
  168.                     this.keys[e.code] = false;
  169.                 });
  170.  
  171.                 window.addEventListener('resize', () => {
  172.                     this.canvas.width = window.innerWidth;
  173.                     this.canvas.height = window.innerHeight;
  174.                 });
  175.             }
  176.  
  177.             handleKeyDown(e) {
  178.                 switch(e.code) {
  179.                     case 'KeyE':
  180.                         this.performAssassination();
  181.                         break;
  182.                     case 'KeyQ':
  183.                         this.performStealthAttack();
  184.                         break;
  185.                     case 'KeyR':
  186.                         this.performComboStrike();
  187.                         break;
  188.                 }
  189.             }
  190.  
  191.             update() {
  192.                 this.updatePlayer();
  193.                 this.updateEnemies();
  194.                 this.updateParticles();
  195.                 this.updateCamera();
  196.                 this.checkCollisions();
  197.                
  198.                 if (this.player.stealthCooldown > 0) {
  199.                     this.player.stealthCooldown--;
  200.                 }
  201.  
  202.                 // Reset combo if too much time passes
  203.                 if (Date.now() - this.player.lastAttackTime > 3000) {
  204.                     this.player.comboCount = 0;
  205.                 }
  206.             }
  207.  
  208.             updatePlayer() {
  209.                 const player = this.player;
  210.                 const speed = 4;
  211.                 const jumpPower = 12;
  212.  
  213.                 // Horizontal movement
  214.                 if (this.keys['KeyA'] || this.keys['ArrowLeft']) {
  215.                     player.vx = -speed;
  216.                     player.facing = -1;
  217.                 } else if (this.keys['KeyD'] || this.keys['ArrowRight']) {
  218.                     player.vx = speed;
  219.                     player.facing = 1;
  220.                 } else {
  221.                     player.vx *= 0.8; // Friction
  222.                 }
  223.  
  224.                 // Jumping and wall jumping
  225.                 if (this.keys['Space'] || this.keys['KeyW'] || this.keys['ArrowUp']) {
  226.                     if (player.onGround) {
  227.                         player.vy = -jumpPower;
  228.                         player.onGround = false;
  229.                     } else if (player.onWall && !player.onGround) {
  230.                        // Wall jump
  231.                        player.vy = -jumpPower * 0.8;
  232.                         player.vx = player.wallDirection * speed * 1.5;
  233.                         player.onWall = false;
  234.                     }
  235.                 }
  236.  
  237.                 // Apply gravity
  238.                 player.vy += 0.6;
  239.                
  240.                 // Terminal velocity
  241.                 if (player.vy > 15) player.vy = 15;
  242.  
  243.                 // Update position
  244.                 player.x += player.vx;
  245.                 player.y += player.vy;
  246.  
  247.                 // Keep player in bounds
  248.                 if (player.x < 0) player.x = 0;
  249.                if (player.x > 1500 - player.width) player.x = 1500 - player.width;
  250.                 if (player.y > this.canvas.height) {
  251.                     player.health -= 20;
  252.                     player.x = 100;
  253.                     player.y = 400;
  254.                     player.vx = 0;
  255.                     player.vy = 0;
  256.                 }
  257.             }
  258.  
  259.             updateEnemies() {
  260.                 this.enemies.forEach(enemy => {
  261.                     // Simple AI patrol behavior
  262.                     if (enemy.type === 'guard') {
  263.                         if (enemy.x <= enemy.patrolStart) {
  264.                            enemy.facing = 1;
  265.                        } else if (enemy.x >= enemy.patrolEnd) {
  266.                             enemy.facing = -1;
  267.                         }
  268.                         enemy.x += enemy.facing * 0.5;
  269.                     }
  270.  
  271.                     // Check if player is nearby (detection)
  272.                     const distToPlayer = Math.abs(this.player.x - enemy.x);
  273.                     if (distToPlayer < 80 && !this.player.isStealthed) {
  274.                        enemy.alertness = Math.min(100, enemy.alertness + 2);
  275.                        // Move toward player when alerted
  276.                        if (enemy.alertness > 50) {
  277.                             const direction = this.player.x > enemy.x ? 1 : -1;
  278.                             enemy.x += direction * 1.2;
  279.                             enemy.facing = direction;
  280.                         }
  281.                     } else {
  282.                         enemy.alertness = Math.max(0, enemy.alertness - 1);
  283.                     }
  284.                 });
  285.             }
  286.  
  287.             updateParticles() {
  288.                 this.particles = this.particles.filter(particle => {
  289.                     particle.x += particle.vx;
  290.                     particle.y += particle.vy;
  291.                     particle.life--;
  292.                     particle.opacity = particle.life / particle.maxLife;
  293.                     return particle.life > 0;
  294.                 });
  295.             }
  296.  
  297.             updateCamera() {
  298.                 // Follow player with some smoothing
  299.                 const targetX = this.player.x - this.canvas.width / 2;
  300.                 this.camera.x += (targetX - this.camera.x) * 0.1;
  301.                
  302.                 // Keep camera in bounds
  303.                 if (this.camera.x < 0) this.camera.x = 0;
  304.                if (this.camera.x > 1500 - this.canvas.width) {
  305.                     this.camera.x = 1500 - this.canvas.width;
  306.                 }
  307.             }
  308.  
  309.             checkCollisions() {
  310.                 this.player.onGround = false;
  311.                 this.player.onWall = false;
  312.  
  313.                 // Platform collisions
  314.                 this.platforms.forEach(platform => {
  315.                     if (this.isColliding(this.player, platform)) {
  316.                         // Top collision (landing on platform)
  317.                         if (this.player.vy > 0 && this.player.y < platform.y) {
  318.                            this.player.y = platform.y - this.player.height;
  319.                             this.player.vy = 0;
  320.                             this.player.onGround = true;
  321.                         }
  322.                     }
  323.                 });
  324.  
  325.                 // Wall collisions
  326.                 this.walls.forEach(wall => {
  327.                     if (this.isColliding(this.player, wall)) {
  328.                         if (this.player.vx > 0) {
  329.                             // Right side collision
  330.                             this.player.x = wall.x - this.player.width;
  331.                             this.player.onWall = true;
  332.                             this.player.wallDirection = -1;
  333.                             this.player.vy *= 0.7; // Wall slide
  334.                         } else if (this.player.vx < 0) {
  335.                            // Left side collision
  336.                            this.player.x = wall.x + wall.width;
  337.                            this.player.onWall = true;
  338.                            this.player.wallDirection = 1;
  339.                            this.player.vy *= 0.7; // Wall slide
  340.                        }
  341.                    }
  342.                });
  343.            }
  344.  
  345.            isColliding(rect1, rect2) {
  346.                return rect1.x < rect2.x + rect2.width &&
  347.                       rect1.x + rect1.width > rect2.x &&
  348.                       rect1.y < rect2.y + rect2.height &&
  349.                       rect1.y + rect1.height > rect2.y;
  350.             }
  351.  
  352.             performAssassination() {
  353.                 const assassinRange = 40;
  354.                 let targetEnemy = null;
  355.  
  356.                 this.enemies.forEach(enemy => {
  357.                     const distance = Math.sqrt(
  358.                         Math.pow(this.player.x - enemy.x, 2) +
  359.                         Math.pow(this.player.y - enemy.y, 2)
  360.                     );
  361.                    
  362.                     if (distance < assassinRange) {
  363.                        targetEnemy = enemy;
  364.                    }
  365.                });
  366.  
  367.                if (targetEnemy) {
  368.                    // Instant kill for assassination
  369.                    targetEnemy.health = 0;
  370.                    this.score += 100 + (this.player.comboCount * 25);
  371.                    this.player.comboCount++;
  372.                    this.player.lastAttackTime = Date.now();
  373.                    
  374.                    // Create blood particles
  375.                    this.createParticles(targetEnemy.x, targetEnemy.y, '#ff0000', 8);
  376.                    
  377.                    // Remove dead enemy
  378.                    this.enemies = this.enemies.filter(enemy => enemy !== targetEnemy);
  379.                    
  380.                     this.updateComboDisplay('ASSASSINATION!');
  381.                 }
  382.             }
  383.  
  384.             performStealthAttack() {
  385.                 if (this.player.stealthCooldown > 0) return;
  386.  
  387.                 this.player.isStealthed = true;
  388.                 this.player.stealthCooldown = 180; // 3 seconds at 60fps
  389.                 this.player.color = '#4a4a4a'; // Darker color when stealthed
  390.                
  391.                 const stealthRange = 35;
  392.                 this.enemies.forEach(enemy => {
  393.                     const distance = Math.sqrt(
  394.                         Math.pow(this.player.x - enemy.x, 2) +
  395.                         Math.pow(this.player.y - enemy.y, 2)
  396.                     );
  397.                    
  398.                     if (distance < stealthRange) {
  399.                        enemy.health -= 40;
  400.                        enemy.alertness = 0; // Reset alertness
  401.                        this.score += 75 + (this.player.comboCount * 20);
  402.                        this.player.comboCount++;
  403.                        this.player.lastAttackTime = Date.now();
  404.                        
  405.                        this.createParticles(enemy.x, enemy.y, '#purple', 5);
  406.                        
  407.                        if (enemy.health <= 0) {
  408.                            this.enemies = this.enemies.filter(e => e !== enemy);
  409.                         }
  410.                     }
  411.                 });
  412.  
  413.                 setTimeout(() => {
  414.                     this.player.isStealthed = false;
  415.                     this.player.color = '#8b4513';
  416.                 }, 1000);
  417.  
  418.                 this.updateComboDisplay('STEALTH STRIKE!');
  419.             }
  420.  
  421.             performComboStrike() {
  422.                 const comboRange = 50;
  423.                 let hitCount = 0;
  424.  
  425.                 this.enemies.forEach(enemy => {
  426.                     const distance = Math.sqrt(
  427.                         Math.pow(this.player.x - enemy.x, 2) +
  428.                         Math.pow(this.player.y - enemy.y, 2)
  429.                     );
  430.                    
  431.                     if (distance < comboRange) {
  432.                        const damage = 25 + (this.player.comboCount * 10);
  433.                        enemy.health -= damage;
  434.                        hitCount++;
  435.                        
  436.                        this.createParticles(enemy.x, enemy.y, '#ffd700', 6);
  437.                        
  438.                        if (enemy.health <= 0) {
  439.                            this.score += 60 + (this.player.comboCount * 15);
  440.                            this.enemies = this.enemies.filter(e => e !== enemy);
  441.                         }
  442.                     }
  443.                 });
  444.  
  445.                 if (hitCount > 0) {
  446.                     this.player.comboCount += hitCount;
  447.                     this.player.lastAttackTime = Date.now();
  448.                     this.score += hitCount * 30;
  449.                    
  450.                     this.updateComboDisplay(`COMBO x${this.player.comboCount}!`);
  451.                 }
  452.             }
  453.  
  454.             createParticles(x, y, color, count) {
  455.                 for (let i = 0; i < count; i++) {
  456.                    this.particles.push({
  457.                        x: x + Math.random() * 20 - 10,
  458.                        y: y + Math.random() * 20 - 10,
  459.                        vx: Math.random() * 6 - 3,
  460.                        vy: Math.random() * 6 - 3,
  461.                        color: color,
  462.                        life: 30,
  463.                        maxLife: 30,
  464.                        opacity: 1
  465.                    });
  466.                }
  467.            }
  468.  
  469.            updateComboDisplay(text) {
  470.                const display = document.getElementById('combo-display');
  471.                display.textContent = text;
  472.                display.style.opacity = '1';
  473.                
  474.                setTimeout(() => {
  475.                     display.style.opacity = '0';
  476.                 }, 2000);
  477.             }
  478.  
  479.             render() {
  480.                 // Clear canvas
  481.                 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  482.                
  483.                 // Save context for camera transform
  484.                 this.ctx.save();
  485.                 this.ctx.translate(-this.camera.x, -this.camera.y);
  486.  
  487.                 // Draw platforms
  488.                 this.ctx.fillStyle = '#654321';
  489.                 this.platforms.forEach(platform => {
  490.                     this.ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
  491.                 });
  492.  
  493.                 // Draw walls
  494.                 this.ctx.fillStyle = '#8b7355';
  495.                 this.walls.forEach(wall => {
  496.                     this.ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
  497.                 });
  498.  
  499.                 // Draw enemies
  500.                 this.enemies.forEach(enemy => {
  501.                     // Enemy body
  502.                     this.ctx.fillStyle = enemy.alertness > 50 ? '#ff4444' : '#444444';
  503.                     this.ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
  504.                    
  505.                     // Health bar
  506.                     const healthRatio = enemy.health / enemy.maxHealth;
  507.                     this.ctx.fillStyle = '#ff0000';
  508.                     this.ctx.fillRect(enemy.x, enemy.y - 8, enemy.width, 3);
  509.                     this.ctx.fillStyle = '#00ff00';
  510.                     this.ctx.fillRect(enemy.x, enemy.y - 8, enemy.width * healthRatio, 3);
  511.                    
  512.                     // Alert indicator
  513.                     if (enemy.alertness > 25) {
  514.                         this.ctx.fillStyle = '#ffff00';
  515.                         this.ctx.fillRect(enemy.x + 5, enemy.y - 15, 2, 2);
  516.                     }
  517.                 });
  518.  
  519.                 // Draw player
  520.                 this.ctx.fillStyle = this.player.color;
  521.                 if (this.player.isStealthed) {
  522.                     this.ctx.globalAlpha = 0.5;
  523.                 }
  524.                 this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);
  525.                
  526.                 // Player direction indicator
  527.                 this.ctx.fillStyle = '#ffffff';
  528.                 const eyeX = this.player.x + (this.player.facing > 0 ? 15 : 5);
  529.                 this.ctx.fillRect(eyeX, this.player.y + 5, 2, 2);
  530.                
  531.                 this.ctx.globalAlpha = 1;
  532.  
  533.                 // Draw particles
  534.                 this.particles.forEach(particle => {
  535.                     this.ctx.fillStyle = particle.color;
  536.                     this.ctx.globalAlpha = particle.opacity;
  537.                     this.ctx.fillRect(particle.x, particle.y, 3, 3);
  538.                 });
  539.                
  540.                 this.ctx.globalAlpha = 1;
  541.  
  542.                 // Restore context
  543.                 this.ctx.restore();
  544.  
  545.                 // Update UI
  546.                 document.getElementById('health').textContent = this.player.health;
  547.                 document.getElementById('score').textContent = this.score;
  548.                 document.getElementById('level').textContent = this.level;
  549.             }
  550.  
  551.             gameLoop() {
  552.                 this.update();
  553.                 this.render();
  554.                 requestAnimationFrame(() => this.gameLoop());
  555.             }
  556.         }
  557.  
  558.         // Start the game when page loads
  559.         window.addEventListener('load', () => {
  560.             new CreedSimAssassin();
  561.         });
  562.     </script>
  563. </body>
  564. </html>
  565.  
Advertisement
Add Comment
Please, Sign In to add comment