API tools faq
paste
Advertisement
r3dglov3

Sqd

r3dglov3
Mar 8th, 2025
171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.88 KB | Source Code | 0 0
raw download clone embed print report
  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>Squid Game 2</title>
  7.   <style>
  8.     body {
  9.       font-family: Arial, sans-serif;
  10.     }
  11.     #squid {
  12.       position: fixed;
  13.       top: 10px;
  14.       left: 50%;
  15.       transform: translateX(-50%);
  16.       width: 100px;
  17.       height: 100px;
  18.       background-color: red;
  19.       border-radius: 50%;
  20.     }
  21.     #squid.active {
  22.       background-color: blue;
  23.     }
  24.     .user {
  25.       position: absolute;
  26.       bottom: 20px;
  27.       width: 50px;
  28.       height: 50px;
  29.       background-color: blue;
  30.       text-align: center;
  31.       line-height: 50px;
  32.       color: white;
  33.       font-weight: bold;
  34.     }
  35.     .x {
  36.       background-color: gray !important;
  37.     }
  38.     .status {
  39.       position: absolute;
  40.       width: 200px;
  41.       text-align: center;
  42.       color: red;
  43.       font-weight: bold;
  44.     }
  45.     #controls {
  46.       position: fixed;
  47.       bottom: 20px;
  48.       left: 50%;
  49.       transform: translateX(-50%);
  50.       display: flex;
  51.       gap: 10px;
  52.     }
  53.     button {
  54.       padding: 10px 20px;
  55.       font-size: 16px;
  56.     }
  57.     #message {
  58.       display: none;
  59.       text-align: center;
  60.       margin-top: 20px;
  61.       font-size: 18px;
  62.       font-weight: bold;
  63.     }
  64.   </style>
  65. </head>
  66. <body>
  67.   <div id="squid"></div>
  68.   <div class="user" id="user1">P1</div>
  69.   <div class="status" id="status1" style="left: 10%; bottom: 80px;">Player 1 - Normal</div>
  70.   <div class="user" id="user2">P2</div>
  71.   <div class="status" id="status2" style="left: 70%; bottom: 80px;">Player 2 - Normal</div>
  72.   <div id="message"></div>
  73.   <div id="controls">
  74.     <button id="walk">Walk</button>
  75.     <button id="stop" disabled>Stop</button>
  76.     <button id="reset" style="display: none;">Reset</button>
  77.   </div>
  78.   <script>
  79.   document.addEventListener("DOMContentLoaded", () => {
  80.     const users = Array.from(document.querySelectorAll(".user"));
  81.     const statuses = Array.from(document.querySelectorAll(".status"));
  82.     const squid = document.getElementById("squid");
  83.     const walkBtn = document.getElementById("walk");
  84.     const stopBtn = document.getElementById("stop");
  85.     const resetBtn = document.getElementById("reset");
  86.     const gameMessage = document.getElementById("message");
  87.  
  88.     let squidActive = false;
  89.     let moveInterval = null;
  90.     let walking = false;
  91.     let gameEnded = false;
  92.     const MIN_SPEED = 0.8;
  93.  
  94.     const userSpeeds = {};
  95.     const penaltyTurns = {};
  96.  
  97.     // Start Walking
  98.     function walkPlayers() {
  99.       if (gameEnded || squidActive || walking) return;
  100.  
  101.       walking = true;
  102.       walkBtn.disabled = true;
  103.       stopBtn.disabled = false;
  104.  
  105.       moveInterval = setInterval(() => {
  106.         users.forEach((user, index) => {
  107.           const userId = user.id;
  108.           const currentBottom = parseInt(user.style.bottom || "20px", 10);
  109.  
  110.           if (penaltyTurns[userId] || user.classList.contains("x")) return;
  111.  
  112.           // Move player forward
  113.           const newPosition = currentBottom + userSpeeds[userId];
  114.           user.style.bottom = `${newPosition}px`;
  115.  
  116.           // Check if player reached the finish line
  117.           if (newPosition >= window.innerHeight - 100) {
  118.             clearInterval(moveInterval);
  119.             declareWinner(user.id);
  120.           }
  121.         });
  122.       }, 50);
  123.     }
  124.  
  125.     // Stop Players
  126.     function stopPlayers() {
  127.       if (!walking) return;
  128.  
  129.       walking = false;
  130.       walkBtn.disabled = false;
  131.       stopBtn.disabled = true;
  132.  
  133.       clearInterval(moveInterval);
  134.  
  135.       // Mark players as not moving
  136.       users.forEach((user) => {
  137.         user.dataset.moving = "false";
  138.       });
  139.     }
  140.  
  141.     // Toggle Squid State
  142.     function toggleSquid() {
  143.       if (gameEnded) return;
  144.  
  145.       squidActive = !squidActive;
  146.       squid.classList.toggle("active", squidActive);
  147.  
  148.       if (squidActive) {
  149.         // Check moving players
  150.         users.forEach((user, index) => {
  151.           const isMoving = user.dataset.moving === "true";
  152.           const userId = user.id;
  153.           const status = statuses[index];
  154.  
  155.           if (isMoving && !penaltyTurns[userId]) {
  156.            user.classList.add("x");
  157.             penaltyTurns[userId] = 2;
  158.             userSpeeds[userId] = Math.max(userSpeeds[userId] / 2, MIN_SPEED);
  159.             status.textContent = `Player ${index + 1} - Penalty - Slow Movement`;
  160.           }
  161.         });
  162.       } else {
  163.         // Reduce penalties
  164.         users.forEach((user, index) => {
  165.           const userId = user.id;
  166.           const status = statuses[index];
  167.  
  168.           if (penaltyTurns[userId]) {
  169.             penaltyTurns[userId]--;
  170.             if (penaltyTurns[userId] === 0) {
  171.               user.classList.remove("x");
  172.               delete penaltyTurns[userId];
  173.               status.textContent = `Player ${index + 1} - Normal`;
  174.             }
  175.           }
  176.         });
  177.       }
  178.     }
  179.  
  180.     // Declare Winner
  181.     function declareWinner(userId) {
  182.       gameEnded = true;
  183.       gameMessage.textContent = `🎉 Player ${userId.toUpperCase()} Wins!`;
  184.       gameMessage.style.display = "block";
  185.  
  186.       walkBtn.disabled = true;
  187.       stopBtn.disabled = true;
  188.       resetBtn.style.display = "block";
  189.     }
  190.  
  191.     // Reset Game
  192.     function resetGame() {
  193.       gameEnded = false;
  194.       gameMessage.style.display = "none";
  195.       resetBtn.style.display = "none";
  196.  
  197.       users.forEach((user, index) => {
  198.         user.classList.remove("x");
  199.         user.style.bottom = "20px";
  200.         user.dataset.moving = "false";
  201.         userSpeeds[user.id] = Math.random() * 3 + 1;
  202.         statuses[index].textContent = `Player ${index + 1} - Normal`;
  203.       });
  204.  
  205.       // Re-enable walk button
  206.       walkBtn.disabled = false;
  207.       stopBtn.disabled = true;
  208.  
  209.       startGame();
  210.     }
  211.  
  212.     // Initialize Game
  213.     function startGame() {
  214.       users.forEach((user) => {
  215.         userSpeeds[user.id] = Math.random() * 3 + 1;
  216.         user.style.left = `${Math.random() * 80 + 10}%`;
  217.       });
  218.  
  219.       setInterval(toggleSquid, Math.random() * 5000 + 2000);
  220.     }
  221.  
  222.     // Event Listeners
  223.     walkBtn.addEventListener("click", () => {
  224.       if (squidActive) {
  225.         // Trigger penalty if squid is active
  226.         users.forEach((user, index) => {
  227.           user.classList.add("x");
  228.           const status = statuses[index];
  229.           penaltyTurns[user.id] = 2;
  230.           userSpeeds[user.id] = Math.max(userSpeeds[user.id] / 2, MIN_SPEED);
  231.           status.textContent = `Player ${index + 1} - Penalty - Slow Movement`;
  232.         });
  233.       } else {
  234.         walkPlayers();
  235.         // Mark players as moving
  236.         users.forEach((user) => {
  237.           user.dataset.moving = "true";
  238.         });
  239.       }
  240.     });
  241.  
  242.     stopBtn.addEventListener("click", stopPlayers);
  243.     resetBtn.addEventListener("click", resetGame);
  244.  
  245.     // Start Game
  246.     startGame();
  247.   });
  248.   </script>
  249. </body>
  250. </html>
Tags: game
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!