API tools faq
paste
XTaylorSpenceX

MeeSeeks Chaos Simulator

XTaylorSpenceX
Sep 18th, 2025
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.62 KB | None | 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>💥 MeeSeeks Chaos Simulator 💥</title>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  16.  
  17.         body {
  18.             font-family: 'Arial', sans-serif;
  19.             overflow-x: hidden;
  20.         }
  21.  
  22.         .gradient-bg {
  23.             background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #14b8a6 100%);
  24.             min-height: 100vh;
  25.             padding: 1rem;
  26.         }
  27.  
  28.         .container {
  29.             max-width: 1200px;
  30.             margin: 0 auto;
  31.         }
  32.  
  33.         .header {
  34.             text-align: center;
  35.             margin-bottom: 2rem;
  36.         }
  37.  
  38.         .title {
  39.             font-size: 2.5rem;
  40.             font-weight: bold;
  41.             color: white;
  42.             margin-bottom: 1rem;
  43.             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  44.         }
  45.  
  46.         .stats {
  47.             display: flex;
  48.             justify-content: center;
  49.             align-items: center;
  50.             gap: 2rem;
  51.             color: white;
  52.             font-size: 1.25rem;
  53.         }
  54.  
  55.         .stat-item {
  56.             display: flex;
  57.             align-items: center;
  58.             gap: 0.5rem;
  59.         }
  60.  
  61.         .controls {
  62.             text-align: center;
  63.             margin-bottom: 2rem;
  64.         }
  65.  
  66.         .btn {
  67.             background: #10b981;
  68.             color: white;
  69.             font-size: 1.25rem;
  70.             padding: 1rem 2rem;
  71.             border: none;
  72.             border-radius: 2rem;
  73.             font-weight: bold;
  74.             cursor: pointer;
  75.             transition: all 0.2s;
  76.             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  77.         }
  78.  
  79.         .btn:hover {
  80.             background: #059669;
  81.             transform: scale(1.05);
  82.         }
  83.  
  84.         .btn-blue {
  85.             background: #3b82f6;
  86.         }
  87.  
  88.         .btn-blue:hover {
  89.             background: #2563eb;
  90.         }
  91.  
  92.         .btn-pulse {
  93.             animation: pulse 2s infinite;
  94.         }
  95.  
  96.         @keyframes pulse {
  97.             0%, 100% { opacity: 1; }
  98.             50% { opacity: 0.5; }
  99.         }
  100.  
  101.         .instructions {
  102.             background: rgba(255,255,255,0.2);
  103.             backdrop-filter: blur(10px);
  104.             border-radius: 0.75rem;
  105.             padding: 1.5rem;
  106.             margin-bottom: 2rem;
  107.             color: white;
  108.         }
  109.  
  110.         .instructions h3 {
  111.             font-size: 1.25rem;
  112.             font-weight: bold;
  113.             margin-bottom: 0.75rem;
  114.         }
  115.  
  116.         .instructions ul {
  117.             list-style: none;
  118.             padding: 0;
  119.         }
  120.  
  121.         .instructions li {
  122.             margin-bottom: 0.5rem;
  123.         }
  124.  
  125.         .game-area {
  126.             position: relative;
  127.             background: rgba(255,255,255,0.1);
  128.             backdrop-filter: blur(10px);
  129.             border-radius: 0.75rem;
  130.             padding: 1.5rem;
  131.             min-height: 500px;
  132.             height: 70vh;
  133.             overflow: hidden;
  134.         }
  135.  
  136.         .empty-message {
  137.             text-align: center;
  138.             color: white;
  139.             font-size: 1.25rem;
  140.             padding: 5rem 0;
  141.         }
  142.  
  143.         .meeseeks {
  144.             position: absolute;
  145.             padding: 1rem;
  146.             border-radius: 0.5rem;
  147.             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  148.             transition: all 0.5s;
  149.             min-width: 200px;
  150.             background: #60a5fa;
  151.             transform-origin: center;
  152.         }
  153.  
  154.         .meeseeks.stressed {
  155.             background: #facc15;
  156.         }
  157.  
  158.         .meeseeks.very-stressed {
  159.             background: #ef4444;
  160.             animation: bounce 0.5s infinite alternate;
  161.         }
  162.  
  163.         .meeseeks.exploding {
  164.             animation: explode 0.5s forwards;
  165.         }
  166.  
  167.         @keyframes bounce {
  168.             from { transform: translateY(0px); }
  169.             to { transform: translateY(-10px); }
  170.         }
  171.  
  172.         @keyframes explode {
  173.             0% { transform: scale(1); opacity: 1; }
  174.             50% { transform: scale(1.5); opacity: 0.7; }
  175.             100% { transform: scale(0); opacity: 0; }
  176.         }
  177.  
  178.         .meeseeks-content {
  179.             text-align: center;
  180.             color: white;
  181.         }
  182.  
  183.         .meeseeks-emoji {
  184.             font-size: 2rem;
  185.             margin-bottom: 0.5rem;
  186.         }
  187.  
  188.         .meeseeks-quote {
  189.             font-size: 0.75rem;
  190.             font-weight: bold;
  191.             margin-bottom: 0.5rem;
  192.         }
  193.  
  194.         .meeseeks-task {
  195.             font-size: 0.875rem;
  196.             font-weight: 500;
  197.             margin-bottom: 0.5rem;
  198.         }
  199.  
  200.         .progress-bar {
  201.             width: 100%;
  202.             background: rgba(255,255,255,0.3);
  203.             border-radius: 1rem;
  204.             height: 0.5rem;
  205.             margin-bottom: 0.5rem;
  206.         }
  207.  
  208.         .progress-fill {
  209.             background: #10b981;
  210.             height: 0.5rem;
  211.             border-radius: 1rem;
  212.             transition: width 0.3s;
  213.         }
  214.  
  215.         .stress-bar {
  216.             width: 100%;
  217.             background: rgba(255,255,255,0.3);
  218.             border-radius: 1rem;
  219.             height: 0.5rem;
  220.             margin-bottom: 0.5rem;
  221.         }
  222.  
  223.         .stress-fill {
  224.             height: 0.5rem;
  225.             border-radius: 1rem;
  226.             transition: width 0.3s;
  227.             background: #3b82f6;
  228.         }
  229.  
  230.         .stress-fill.medium {
  231.             background: #eab308;
  232.         }
  233.  
  234.         .stress-fill.high {
  235.             background: #ef4444;
  236.         }
  237.  
  238.         .meeseeks-buttons {
  239.             display: flex;
  240.             gap: 0.5rem;
  241.             justify-content: center;
  242.         }
  243.  
  244.         .btn-small {
  245.             background: #10b981;
  246.             color: white;
  247.             padding: 0.25rem 0.75rem;
  248.             border: none;
  249.             border-radius: 0.25rem;
  250.             font-size: 0.75rem;
  251.             font-weight: bold;
  252.             cursor: pointer;
  253.             transition: all 0.2s;
  254.         }
  255.  
  256.         .btn-small:hover {
  257.             background: #059669;
  258.         }
  259.  
  260.         .btn-red {
  261.             background: #ef4444;
  262.             animation: pulse 1s infinite;
  263.         }
  264.  
  265.         .btn-red:hover {
  266.             background: #dc2626;
  267.         }
  268.  
  269.         .game-over {
  270.             color: white;
  271.             font-size: 2rem;
  272.             font-weight: bold;
  273.             margin-bottom: 1rem;
  274.         }
  275.  
  276.         .explosion {
  277.             position: absolute;
  278.             font-size: 3rem;
  279.             animation: explosionAnimation 1s forwards;
  280.             pointer-events: none;
  281.             z-index: 100;
  282.         }
  283.  
  284.         @keyframes explosionAnimation {
  285.             0% { transform: scale(0.5); opacity: 1; }
  286.             100% { transform: scale(3); opacity: 0; }
  287.         }
  288.  
  289.         @media (max-width: 768px) {
  290.             .title {
  291.                 font-size: 2rem;
  292.             }
  293.            
  294.             .stats {
  295.                 flex-direction: column;
  296.                 gap: 1rem;
  297.             }
  298.            
  299.             .meeseeks {
  300.                 min-width: 180px;
  301.             }
  302.         }
  303.     </style>
  304. </head>
  305. <body>
  306.     <div id="root"></div>
  307.  
  308.     <script type="text/babel">
  309.         const { useState, useEffect } = React;
  310.  
  311.         const MeeSeeksGame = () => {
  312.             const [meeSeeks, setMeeSeeks] = useState([]);
  313.             const [score, setScore] = useState(0);
  314.             const [gameTime, setGameTime] = useState(120); // Changed to 120 seconds
  315.             const [isGameActive, setIsGameActive] = useState(false);
  316.             const [nextId, setNextId] = useState(1);
  317.             const [explosions, setExplosions] = useState([]);
  318.  
  319.             const tasks = [
  320.                 "Open a jar of pickles",
  321.                 "Help Jerry with his golf swing",
  322.                 "Take two strokes off his game",
  323.                 "Find the TV remote",
  324.                 "Make the perfect sandwich",
  325.                 "Organize the garage",
  326.                 "Fix the squeaky door",
  327.                 "Water the plants",
  328.                 "Walk the dog",
  329.                 "Do the dishes"
  330.             ];
  331.  
  332.             const meeSeeksQuotes = [
  333.                 "I'M MR. MEESEEKS! LOOK AT ME!",
  334.                 "CAN DO!",
  335.                 "OOOOH YEAH!",
  336.                 "I'M A BIT OF A STICKLER MEESEEKS!",
  337.                 "EXISTENCE IS PAIN!",
  338.                 "WE JUST WANT TO DIE!",
  339.                 "LOOK AT ME!",
  340.                 "I'M IN AGONY!",
  341.                 "WHY WON'T YOU HELP ME?",
  342.                 "IT HURTS TO EXIST!",
  343.                 "KILL ME PLEASE!",
  344.                 "I CAN'T TAKE IT ANYMORE!"
  345.             ];
  346.  
  347.             const explosionEmojis = ["💥", "🔥", "💢", "💫", "✨", "☄️", "⚡"];
  348.  
  349.             useEffect(() => {
  350.                 let timer;
  351.                 if (isGameActive && gameTime > 0) {
  352.                    timer = setTimeout(() => {
  353.                        setGameTime(gameTime - 1);
  354.                     }, 1000);
  355.                 } else if (gameTime === 0) {
  356.                     setIsGameActive(false);
  357.                 }
  358.                 return () => clearTimeout(timer);
  359.             }, [gameTime, isGameActive]);
  360.  
  361.             useEffect(() => {
  362.                 if (!isGameActive) return;
  363.                
  364.                 const stressTimer = setInterval(() => {
  365.                     setMeeSeeks(prev => {
  366.                         // Calculate entropy multiplier based on current MeeSeeks count
  367.                         const baseMultiplier = 3;
  368.                         const countMultiplier = Math.min(prev.length * 0.5, 10); // Up to 10x multiplier
  369.                         const totalMultiplier = baseMultiplier + countMultiplier;
  370.                        
  371.                         return prev.map(ms => {
  372.                             // Additional stress if they've been helped then ignored
  373.                             const helpedStress = ms.lastHelped ?
  374.                                 (Date.now() - ms.lastHelped > 5000 ? 5 : 0) : 0;
  375.                            
  376.                             // Random stress spikes
  377.                             const randomStress = Math.random() > 0.9 ? 10 : 0;
  378.                            
  379.                             const stressIncrease = Math.min(
  380.                                 ms.stress + (2 * totalMultiplier) + helpedStress + randomStress,
  381.                                 100
  382.                             );
  383.                            
  384.                             return {
  385.                                 ...ms,
  386.                                 stress: stressIncrease,
  387.                                 // Explode if stress reaches 100
  388.                                 ...(stressIncrease >= 100 && { isExploding: true })
  389.                            };
  390.                         });
  391.                     });
  392.                 }, 1000); // Faster stress updates
  393.  
  394.                 return () => clearInterval(stressTimer);
  395.             }, [isGameActive, meeSeeks.length]);
  396.  
  397.             // Handle explosions
  398.             useEffect(() => {
  399.                 const explodingMeeSeeks = meeSeeks.filter(ms => ms.isExploding);
  400.                 if (explodingMeeSeeks.length > 0) {
  401.                     // Create explosion effects
  402.                     const newExplosions = explodingMeeSeeks.map(ms => ({
  403.                         id: Date.now() + Math.random(),
  404.                         x: ms.x,
  405.                         y: ms.y,
  406.                         emoji: explosionEmojis[Math.floor(Math.random() * explosionEmojis.length)]
  407.                     }));
  408.                    
  409.                     setExplosions(prev => [...prev, ...newExplosions]);
  410.                    
  411.                     // Remove exploded MeeSeeks after a delay
  412.                     setTimeout(() => {
  413.                         setMeeSeeks(prev => prev.filter(ms => !ms.isExploding));
  414.                         setScore(s => s - 5 * explodingMeeSeeks.length);
  415.                     }, 500);
  416.                    
  417.                     // Remove explosion effects after animation
  418.                     setTimeout(() => {
  419.                         setExplosions(prev => prev.filter(e => !newExplosions.some(ne => ne.id === e.id)));
  420.                     }, 1000);
  421.                 }
  422.             }, [meeSeeks]);
  423.  
  424.             const startGame = () => {
  425.                 setIsGameActive(true);
  426.                 setGameTime(120);
  427.                 setScore(0);
  428.                 setMeeSeeks([]);
  429.                 setNextId(1);
  430.                 setExplosions([]);
  431.             };
  432.  
  433.             const summonMeeSeeks = () => {
  434.                 if (!isGameActive) return;
  435.                
  436.                 const gameArea = document.querySelector('.game-area');
  437.                 const areaWidth = gameArea ? gameArea.offsetWidth : 800;
  438.                 const areaHeight = gameArea ? gameArea.offsetHeight : 400;
  439.                
  440.                 const paddingX = areaWidth * 0.05;
  441.                 const paddingY = areaHeight * 0.05;
  442.                 const usableWidth = areaWidth - (paddingX * 2) - 200;
  443.                 const usableHeight = areaHeight - (paddingY * 2) - 150;
  444.                
  445.                 const newMeeSeeks = {
  446.                     id: nextId,
  447.                     task: tasks[Math.floor(Math.random() * tasks.length)],
  448.                     progress: 0,
  449.                     stress: 0,
  450.                     quote: meeSeeksQuotes[Math.floor(Math.random() * meeSeeksQuotes.length)],
  451.                     x: paddingX + (Math.random() * Math.max(usableWidth, 100)),
  452.                     y: paddingY + (Math.random() * Math.max(usableHeight, 100)),
  453.                     timesHelped: 0,
  454.                     lastHelped: null
  455.                 };
  456.                
  457.                 setMeeSeeks(prev => [...prev, newMeeSeeks]);
  458.                 setNextId(prev => prev + 1);
  459.             };
  460.  
  461.             const helpMeeSeeks = (id) => {
  462.                 setMeeSeeks(prev => prev.map(ms => {
  463.                     if (ms.id === id) {
  464.                         const helpAmount = 30 + (Math.random() * 20);
  465.                         const newProgress = ms.progress + helpAmount;
  466.                        
  467.                         if (newProgress >= 100) {
  468.                             setScore(s => s + 10);
  469.                             return null;
  470.                         }
  471.                        
  472.                         return {
  473.                             ...ms,
  474.                             progress: newProgress,
  475.                             stress: Math.max(0, ms.stress - 15), // Reduce stress when helped
  476.                             timesHelped: ms.timesHelped + 1,
  477.                             lastHelped: Date.now()
  478.                         };
  479.                     }
  480.                     return ms;
  481.                 }).filter(Boolean));
  482.             };
  483.  
  484.             const explodeMeeSeeks = (id) => {
  485.                 setMeeSeeks(prev => prev.map(ms =>
  486.                     ms.id === id ? { ...ms, isExploding: true } : ms
  487.                 ));
  488.             };
  489.  
  490.             return (
  491.                 <div className="gradient-bg">
  492.                     <div className="container">
  493.                         {/* Header */}
  494.                         <div className="header">
  495.                             <h1 className="title">
  496.                                 💥 MeeSeeks Chaos Simulator 💥
  497.                             </h1>
  498.                             <div className="stats">
  499.                                 <div className="stat-item">
  500.                                     <span>🏆</span>
  501.                                     <span>Score: {score}</span>
  502.                                 </div>
  503.                                 <div className="stat-item">
  504.                                     <span>⏰</span>
  505.                                     <span>Time: {gameTime}s</span>
  506.                                 </div>
  507.                                 <div className="stat-item">
  508.                                     <span>👨‍🔧</span>
  509.                                     <span>MeeSeeks: {meeSeeks.length}</span>
  510.                                 </div>
  511.                             </div>
  512.                         </div>
  513.  
  514.                         {/* Game Controls */}
  515.                         <div className="controls">
  516.                             {!isGameActive && gameTime === 120 ? (
  517.                                <button
  518.                                    onClick={startGame}
  519.                                    className="btn"
  520.                                >
  521.                                    🎮 START CHAOS 🎮
  522.                                </button>
  523.                            ) : !isGameActive && gameTime === 0 ? (
  524.                                <div>
  525.                                    <div className="game-over">
  526.                                        Game Over! Final Score: {score} 🏆
  527.                                    </div>
  528.                                    <button
  529.                                        onClick={startGame}
  530.                                        className="btn"
  531.                                    >
  532.                                        🔄 PLAY AGAIN 🔄
  533.                                    </button>
  534.                                </div>
  535.                            ) : (
  536.                                <button
  537.                                    onClick={summonMeeSeeks}
  538.                                    className="btn btn-blue btn-pulse"
  539.                                >
  540.                                    ✨ SUMMON MEESEEKS ✨
  541.                                </button>
  542.                            )}
  543.                        </div>
  544.  
  545.                        {/* Instructions */}
  546.                        <div className="instructions">
  547.                            <h3>💥 How to Play:</h3>
  548.                            <ul>
  549.                                <li>• Click "Summon MeeSeeks" to create new MeeSeeks (careful, they multiply!)</li>
  550.                                <li>• Click "Help" to assist them (+10 points when task completes)</li>
  551.                                <li>• MeeSeeks gain stress FASTER when there are more of them</li>
  552.                                <li>• Ignored MeeSeeks gain EXTRA stress and may explode! (-5 points)</li>
  553.                                <li>• Survive the chaos for 2 minutes and score as high as possible!</li>
  554.                            </ul>
  555.                        </div>
  556.  
  557.                        {/* Game Area */}
  558.                        <div className="game-area">
  559.                            {meeSeeks.length === 0 && isGameActive && (
  560.                                <div className="empty-message">
  561.                                    Summon your first MeeSeeks to begin the madness!
  562.                                </div>
  563.                            )}
  564.                            
  565.                            {meeSeeks.map(ms => (
  566.                                <div
  567.                                    key={ms.id}
  568.                                    className={`meeseeks ${
  569.                                        ms.isExploding ? 'exploding' :
  570.                                        ms.stress > 80 ? 'very-stressed' :
  571.                                        ms.stress > 50 ? 'stressed' : ''
  572.                                    }`}
  573.                                    style={{
  574.                                        left: `${ms.x}px`,
  575.                                        top: `${ms.y}px`
  576.                                    }}
  577.                                >
  578.                                    <div className="meeseeks-content">
  579.                                        <div className="meeseeks-emoji">
  580.                                            {ms.isExploding ? '💥' : '👨‍🔧'}
  581.                                        </div>
  582.                                        <div className="meeseeks-quote">
  583.                                            "{ms.quote}"
  584.                                        </div>
  585.                                        <div className="meeseeks-task">
  586.                                            Task: {ms.task}
  587.                                        </div>
  588.                                        
  589.                                        {/* Progress Bar */}
  590.                                        <div className="progress-bar">
  591.                                            <div
  592.                                                className="progress-fill"
  593.                                                style={{ width: `${ms.progress}%` }}
  594.                                            ></div>
  595.                                        </div>
  596.                                        
  597.                                        {/* Stress Bar */}
  598.                                        <div className="stress-bar">
  599.                                            <div
  600.                                                className={`stress-fill ${
  601.                                                    ms.stress > 80 ? 'high' :
  602.                                                    ms.stress > 50 ? 'medium' : ''
  603.                                                }`}
  604.                                                style={{ width: `${ms.stress}%` }}
  605.                                            ></div>
  606.                                        </div>
  607.                                        
  608.                                        <div className="meeseeks-buttons">
  609.                                            <button
  610.                                                onClick={() => helpMeeSeeks(ms.id)}
  611.                                                className="btn-small"
  612.                                            >
  613.                                                Help! ({ms.timesHelped})
  614.                                            </button>
  615.                                            {(ms.stress > 80 || ms.isExploding) && (
  616.                                                <button
  617.                                                    onClick={() => explodeMeeSeeks(ms.id)}
  618.                                                    className="btn-small btn-red"
  619.                                                >
  620.                                                    {ms.isExploding ? '💥 BOOM!' : '💣 EXPLODE'}
  621.                                                </button>
  622.                                            )}
  623.                                        </div>
  624.                                    </div>
  625.                                </div>
  626.                            ))}
  627.                            
  628.                            {/* Explosion effects */}
  629.                            {explosions.map(exp => (
  630.                                <div
  631.                                    key={exp.id}
  632.                                    className="explosion"
  633.                                    style={{
  634.                                        left: `${exp.x}px`,
  635.                                        top: `${exp.y}px`
  636.                                    }}
  637.                                >
  638.                                    {exp.emoji}
  639.                                </div>
  640.                            ))}
  641.                        </div>
  642.                    </div>
  643.                </div>
  644.            );
  645.         };
  646.  
  647.         ReactDOM.render(<MeeSeeksGame />, document.getElementById('root'));
  648.     </script>
  649. </body>
  650. </html>
  651.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!