API tools faq
paste
Advertisement
migex25079

Untitled

migex25079
Aug 14th, 2024 (edited)
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 15.71 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Gra internetowa</title>
  5.     <style>
  6.         html, body {
  7.             margin: 0;
  8.             padding: 0;
  9.             height: 100%;
  10.             overflow: hidden;
  11.         }
  12.        
  13.         #game-container {
  14.             position: relative;
  15.             width: 100vw;
  16.             height: 100vh;
  17.             border: 1px solid black;
  18.             display: none;
  19.         }
  20.        
  21.         #catcher {
  22.             position: absolute;
  23.             bottom: 5vh;
  24.             width: 11.6vw;
  25.             height: 3vh;
  26.             background-color: blue;
  27.             border-radius: 0; /* Default: no rounded corners */
  28.             transition: border-radius 0.3s; /* Smooth transition */
  29.         }
  30.  
  31.         #catcher.rounded {
  32.             border-radius: 215px; /* Rounded corners when toggled */
  33.         }
  34.        
  35.         .object {
  36.             position: absolute;
  37.             width: 1.7vw;
  38.             height: 1.7vw;
  39.             background-color: red;
  40.         }
  41.  
  42.         #end-message {
  43.             position: absolute;
  44.             top: 50%;
  45.             left: 50%;
  46.             transform: translate(-50%, -50%);
  47.             font-weight: bold;
  48.             font-size: 45px;
  49.             display: none;
  50.             text-align: center;
  51.         }
  52.  
  53.         .menu-container {
  54.             position: absolute;
  55.             top: 50%;
  56.             left: 50%;
  57.             transform: translate(-50%, -50%);
  58.             text-align: center;
  59.             font-size: 19px;
  60.         }
  61.        
  62.         .menu-title {
  63.             font-weight: bold;
  64.             font-size: 40px;
  65.         }
  66.        
  67.         .menu-item {
  68.             font-size: 19px;
  69.             cursor: pointer;
  70.             margin-bottom: 10px;
  71.         }
  72.  
  73.         .clickable-text {
  74.             font-size: 19px;
  75.             cursor: pointer;
  76.             font-weight: 100;
  77.             margin-bottom: 28px;
  78.             color: black;
  79.         }
  80.  
  81.         .color-palette {
  82.             display: none;
  83.             justify-content: center;
  84.             margin-bottom: 20px;
  85.         }
  86.        
  87.         .color-swatch {
  88.             width: 40px;
  89.             height: 40px;
  90.             border: 2px solid #000;
  91.             margin: 0 5px;
  92.             cursor: pointer;
  93.         }
  94.  
  95.         /* New CSS for green text highlight */
  96.         .highlight-green {
  97.             color: #05f545;
  98.         }
  99.     </style>
  100. </head>
  101. <body>
  102.     <div id="game-container">
  103.         <div id="catcher"></div>
  104.     </div>
  105.     <div id="end-message">
  106.         Koniec Gry! Twój wynik to: <span id="score"></span><br>
  107.         <div class="clickable-text" onclick="restartGame()">Zagraj ponownie</div>
  108.         <div class="clickable-text" onclick="goToMenu()">Wróć do menu</div>
  109.     </div>
  110.    
  111.     <div id="main-menu" class="menu-container">
  112.         <div class="menu-title">Menu główne</div>
  113.         <br>
  114.         <div class="menu-item" onclick="startGame()">Zacznij grać</div>
  115.         <br>
  116.         <div class="menu-item" onclick="showSettings()">Ustawienia</div>
  117.         <br>
  118.         <div class="menu-item" onclick="showControls()">Sterowanie</div>
  119.         <br>
  120.         <div class="menu-item" onclick="showHowToPlay()">Jak grać</div>
  121.     </div>
  122.    
  123.     <div id="settings-menu" class="menu-container" style="display: none;">
  124.         <div class="menu-item" onclick="hideSettings()"><b>Wróć</b></div>
  125.         <div class="menu-item" onclick="togglePaddleShape()">Zmień kształt paletki</div>
  126.         <br>
  127.         <div class="clickable-text" onclick="toggleColorPalette()">Zmień kolor paletki</div>
  128.         <div class="color-palette">
  129.             <div class="color-swatch" style="background-color: red;" onclick="setPaddleColor('red')"></div>
  130.             <div class="color-swatch" style="background-color: orange;" onclick="setPaddleColor('orange')"></div>
  131.             <div class="color-swatch" style="background-color: yellow;" onclick="setPaddleColor('yellow')"></div>
  132.             <div class="color-swatch" style="background-color: green;" onclick="setPaddleColor('green')"></div>
  133.             <div class="color-swatch" style="background-color: blue;" onclick="setPaddleColor('blue')"></div>
  134.             <div class="color-swatch" style="background-color: purple;" onclick="setPaddleColor('purple')"></div>
  135.         </div>
  136.         <div class="menu-item" id="toggle-color-change" onclick="toggleCubeColorChange()">Przestań zmieniać kolory kwadracików</div>
  137.     </div>
  138.    
  139.     <div id="controls-menu" class="menu-container" style="display: none;">
  140.         <div class="menu-item" onclick="hideControls()"><b>Wróć</b></div>
  141.         <div>Poruszaj myszką w lewo i prawo, aby sterować niebieską paletką.</div>
  142.     </div>
  143.    
  144.     <div id="how-to-play-menu" class="menu-container" style="display: none;">
  145.         <div class="menu-item" onclick="hideHowToPlay()"><b>Wróć</b></div>
  146.         <div>Zbieraj paletką kolorowe kwadraciki aby zdobywać punkty. Jeżeli ominiesz jednego, to przegrywasz!</div>
  147.     </div>
  148.    
  149.     <script>
  150.         var gameContainer = document.getElementById("game-container");
  151.         var catcher = document.getElementById("catcher");
  152.         var endMessage = document.getElementById("end-message");
  153.         var scoreDisplay = document.getElementById("score");
  154.         var score = 0;
  155.         var missedCubes = 0;
  156.         var cubes = [];
  157.        
  158.         var initialInterval = 1500;
  159.         var intervalDecreaseRate = 0.9;
  160.         var minInterval = 500;
  161.         var speedIncreaseRate = 0.1;
  162.         var cubeSpeed = 1.0;
  163.         var collectedCubes = 0;
  164.         var colorChangeInterval = 500;
  165.         var changingCubeColors = true;
  166.         var paddleShape = 'rectangle';
  167.         var paddleColor = 'blue';
  168.        
  169.         var mainMenu = document.getElementById("main-menu");
  170.         var settingsMenu = document.getElementById("settings-menu");
  171.         var controlsMenu = document.getElementById("controls-menu");
  172.         var howToPlayMenu = document.getElementById("how-to-play-menu");
  173.         var objectCreationInterval;      
  174.  
  175.         function startGame() {
  176.             mainMenu.style.display = "none";
  177.             settingsMenu.style.display = "none";
  178.             controlsMenu.style.display = "none";
  179.             howToPlayMenu.style.display = "none";
  180.             gameContainer.style.display = "block";
  181.             catcher.style.display = "block";
  182.             score = -4;
  183.             scoreDisplay.textContent = score;
  184.             collectedCubes = 0;
  185.             cubeSpeed = 1.0;
  186.             colorChangeInterval = 500;
  187.             catcher.style.backgroundColor = paddleColor;
  188.             if (paddleShape === 'rounded') {
  189.                 catcher.classList.add('rounded');
  190.             } else {
  191.                 catcher.classList.remove('rounded');
  192.             }
  193.             initializeGame();
  194.         }
  195.        
  196.         function showSettings() {
  197.             mainMenu.style.display = "none";
  198.             settingsMenu.style.display = "block";
  199.         }
  200.        
  201.         function hideSettings() {
  202.             settingsMenu.style.display = "none";
  203.             mainMenu.style.display = "block";
  204.         }
  205.        
  206.         function showControls() {
  207.             mainMenu.style.display = "none";
  208.             controlsMenu.style.display = "block";
  209.         }
  210.        
  211.         function hideControls() {
  212.             controlsMenu.style.display = "none";
  213.             mainMenu.style.display = "block";
  214.         }
  215.        
  216.         function showHowToPlay() {
  217.             mainMenu.style.display = "none";
  218.             howToPlayMenu.style.display = "block";
  219.         }
  220.        
  221.         function hideHowToPlay() {
  222.             howToPlayMenu.style.display = "none";
  223.             mainMenu.style.display = "block";
  224.         }
  225.        
  226.         function setPaddleColor(color) {
  227.             paddleColor = color;
  228.             catcher.style.backgroundColor = paddleColor;
  229.             hideColorPalette();
  230.         }
  231.        
  232.         function toggleColorPalette() {
  233.             var colorPalette = document.querySelector(".color-palette");
  234.             colorPalette.style.display = colorPalette.style.display === "flex" ? "none" : "flex";
  235.         }
  236.  
  237.         function hideColorPalette() {
  238.             var colorPalette = document.querySelector(".color-palette");
  239.             colorPalette.style.display = "none";
  240.         }
  241.        
  242.         function togglePaddleShape() {
  243.             paddleShape = (paddleShape === 'rectangle') ? 'rounded' : 'rectangle';
  244.             catcher.classList.toggle('rounded', paddleShape === 'rounded');
  245.             highlightText('Zmień kształt paletki');
  246.         }
  247.  
  248.         function highlightText(menuItemText) {
  249.             var menuItem = Array.from(document.querySelectorAll('.menu-item')).find(item => item.textContent.trim() === menuItemText);
  250.             if (menuItem) {
  251.                 menuItem.classList.add('highlight-green');
  252.                 setTimeout(function() {
  253.                     menuItem.classList.remove('highlight-green');
  254.                 }, 200);
  255.             }
  256.         }
  257.  
  258.         function toggleCubeColorChange() {
  259.             changingCubeColors = !changingCubeColors;
  260.             document.getElementById("toggle-color-change").textContent = changingCubeColors ? "Przestań zmieniać kolory kwadracików" : "Zacznij zmieniać kolory kwadracików";
  261.            
  262.             cubes.forEach(cube => {
  263.                 if (changingCubeColors) {
  264.                     startCubeColorChange(cube);
  265.                 } else {
  266.                     stopCubeColorChange(cube);
  267.                 }
  268.             });
  269.  
  270.             console.log('Toggled cube color change. New state:', changingCubeColors);
  271.         }
  272.  
  273.         function startCubeColorChange(cube) {
  274.             const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
  275.             let currentColorIndex = 0;
  276.  
  277.             // Clear any existing interval
  278.             if (cube.colorChangeIntervalId) {
  279.                 clearInterval(cube.colorChangeIntervalId);
  280.             }
  281.  
  282.             cube.colorChangeIntervalId = setInterval(() => {
  283.                 currentColorIndex = (currentColorIndex + 1) % colors.length;
  284.                 cube.style.backgroundColor = colors[currentColorIndex];
  285.             }, colorChangeInterval);
  286.  
  287.             console.log('Started color change for cube:', cube, 'Interval ID:', cube.colorChangeIntervalId);
  288.         }
  289.        
  290.         function stopCubeColorChange(cube) {
  291.             if (cube.colorChangeIntervalId) {
  292.                 console.log('Clearing interval for cube:', cube, 'Interval ID:', cube.colorChangeIntervalId);
  293.                 clearInterval(cube.colorChangeIntervalId);
  294.                 cube.colorChangeIntervalId = undefined; // Clear the interval ID
  295.                 cube.style.backgroundColor = 'red'; // Reset color to red
  296.             } else {
  297.                 console.log('No interval to clear for cube:', cube);
  298.             }
  299.         }
  300.        
  301.         function adjustColorChangeSpeed(factor) {
  302.             colorChangeInterval = Math.max(colorChangeInterval * factor, 100);
  303.             cubes.forEach(cube => {
  304.                 if (changingCubeColors && cube.colorChangeIntervalId) {
  305.                     stopCubeColorChange(cube);
  306.                     startCubeColorChange(cube);
  307.                 }
  308.             });
  309.         }
  310.        
  311.         function adjustObjectCreationInterval() {
  312.             if (objectCreationInterval) {
  313.                 clearInterval(objectCreationInterval);
  314.             }
  315.            
  316.             var newInterval = initialInterval;
  317.             if (collectedCubes >= 1) {
  318.                 newInterval *= 0.001; // More frequent
  319.             }
  320.             newInterval = Math.max(newInterval * intervalDecreaseRate, minInterval);
  321.  
  322.             objectCreationInterval = setInterval(createObject, newInterval);
  323.         }
  324.        
  325.         function createObject() {
  326.             var object = document.createElement("div");
  327.             object.className = "object";
  328.            
  329.             var containerWidth = gameContainer.offsetWidth;
  330.             var objectWidth = object.offsetWidth;
  331.             var maxObjectX = containerWidth - objectWidth;
  332.             var objectX = Math.floor(Math.random() * maxObjectX);
  333.            
  334.             object.style.left = objectX + "px";
  335.             object.style.top = "0px";
  336.            
  337.             object.colorChangeIntervalId = undefined; // Initialize interval ID
  338.             cubes.push(object);
  339.             gameContainer.appendChild(object);
  340.            
  341.             var objectCaught = false;
  342.             var animationInterval = setInterval(function() {
  343.                 var objectY = object.offsetTop;
  344.                 var containerHeight = gameContainer.offsetHeight;
  345.                
  346.                 if (!objectCaught && objectY + object.offsetHeight >= catcher.offsetTop &&
  347.                     objectY <= catcher.offsetTop + catcher.offsetHeight &&
  348.                     isColliding(catcher, object)) {
  349.                    
  350.                     objectCaught = true;
  351.                     clearInterval(animationInterval);
  352.                     gameContainer.removeChild(object);
  353.                     cubes.splice(cubes.indexOf(object), 1);
  354.                    
  355.                     score++;
  356.                     scoreDisplay.textContent = score;
  357.                     cubeSpeed += speedIncreaseRate;
  358.                     collectedCubes++;
  359.                    
  360.                     if (collectedCubes % 5 === 0) {
  361.                         adjustColorChangeSpeed(0.75);
  362.                     }
  363.                    
  364.                     if (collectedCubes % 10 === 0) {
  365.                         adjustObjectCreationInterval();
  366.                     }
  367.                 } else if (objectY >= containerHeight) {
  368.                     clearInterval(animationInterval);
  369.                     gameContainer.removeChild(object);
  370.                     cubes.splice(cubes.indexOf(object), 1);
  371.                     missedCubes++;
  372.                     if (missedCubes >= 1) {
  373.                         endGame();
  374.                     }
  375.                 } else {
  376.                     object.style.top = (objectY + cubeSpeed) + "px";
  377.                 }
  378.             }, 10);
  379.            
  380.             if (changingCubeColors) {
  381.                 startCubeColorChange(object);
  382.             }
  383.         }
  384.        
  385.         function isColliding(catcher, object) {
  386.             var catcherRect = catcher.getBoundingClientRect();
  387.             var objectRect = object.getBoundingClientRect();
  388.             return !(objectRect.right < catcherRect.left ||
  389.                      objectRect.left > catcherRect.right ||
  390.                      objectRect.bottom < catcherRect.top ||
  391.                      objectRect.top > catcherRect.bottom);
  392.         }
  393.        
  394.         function endGame() {
  395.             clearInterval(objectCreationInterval);
  396.             gameContainer.style.display = "none";
  397.             endMessage.style.display = "block";
  398.             scoreDisplay.textContent = score;
  399.         }
  400.        
  401.         function restartGame() {
  402.             endMessage.style.display = "none";
  403.             startGame();
  404.         }
  405.        
  406.         function goToMenu() {
  407.             endMessage.style.display = "none";
  408.             mainMenu.style.display = "block";
  409.         }
  410.        
  411.         function initializeGame() {
  412.             objectCreationInterval = setInterval(createObject, initialInterval);
  413.         }
  414.  
  415.         document.addEventListener('mousemove', function(event) {
  416.             var containerRect = gameContainer.getBoundingClientRect();
  417.             var mouseX = event.clientX - containerRect.left;
  418.             var catcherWidth = catcher.offsetWidth;
  419.             var newLeft = Math.max(0, Math.min(mouseX - catcherWidth / 2, gameContainer.offsetWidth - catcherWidth));
  420.             catcher.style.left = newLeft + 'px';
  421.         });
  422.     </script>
  423. </body>
  424. </html>
Tags: #code #html
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!