WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1303
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Hai bisogno di un sito web?
Consigliato
27 November 2024
generatore di citazioni
8 February 2025
caricamento animazione
29 June 2025
Power Gym: modello HTML per fitness, allenamento e corsi
HTML
Copy
Andev Web
Rock, Paper & Scissor
Select your arm
Start
VS
Play Again
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap'); :root { --primary: #FABC3F; } * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; text-align:center; flex-direction: column; gap: 40px; align-items: center; justify-content: center; background: radial-gradient(at center, #A04747, #000); color: #fafafa; font-family: "Nerko One", cursive; font-weight: 400; font-style: normal; font-size: 16px; } .title { font-size: 3.5rem; } h2 { font-size: 2rem; } b { color: var(--primary); } main { position: relative; } #getReady { opacity: 1; } #ctr-arm { display: flex; gap: 16px; margin: 16px 0; } #ctr-arm span { background-size: contain; background-position: center; width: 150px; height: 150px; cursor: pointer; } #ctr-arm span:hover { transform: scale(1.1); } .active { filter: drop-shadow(0px 0px 15px var(--primary)); transform: scale(1.1); } #rock { background-image: url('https://images.vexels.com/content/145641/preview/earth-stone-illustration-8dd583.png'); } #paper { background-image: url('https://cdn-icons-png.freepik.com/512/2541/2541988.png'); } #scissor { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Gtk-cut.svg/1024px-Gtk-cut.svg.png'); } #btn-start, #btn-reset { font-family: "Nerko One", cursive; font-size: 1.8rem; background: var(--primary); color: #fafafa; border: none; outline: none; cursor: pointer; padding: 6px 30px; border-radius: 25px; } #btn-start:hover, #btn-reset:hover { transform: scale(1.2); box-shadow: 4px 4px 10px rgba(0, 0, 0, .2); } #pvp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; align-items: center; justify-content: center; display: none; } #pvp span { width: 100%; aspect-ratio: 1/1; background-size:contain; background-position:center; } #pvp p { font-size: 2.5rem; } #btn-reset { position:absolute; bottom: -10%; } .cell { width: 100%; height: 100%; position: relative; overflow: hidden; mask-image: linear-gradient( to bottom, rgba(61, 0, 0, 0), rgba(61, 0, 0, 1) 20%, rgba(61, 0, 0, 1) 80%, rgba(61, 0, 0, 0) ); } .cell span { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; animation: autoSlide 2s linear infinite; animation-delay: calc((2s / 3) * (3 - var(--i)) * -1); } @keyframes autoSlide { to { top: -200%; } } .cell span:nth-child(1) { background-image: url('https://images.vexels.com/content/145641/preview/earth-stone-illustration-8dd583.png'); } .cell span:nth-child(2) { background-image: url('https://cdn-icons-png.freepik.com/512/2541/2541988.png'); } .cell span:nth-child(3) { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Gtk-cut.svg/1024px-Gtk-cut.svg.png'); } #result { position: absolute; font-size: 5rem; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 0px 0px 60px rgba(0, 0, 0, 1), 0px 0px 60px rgba(0, 0, 0, 1), 0px 0px 60px rgba(0, 0, 0, 1); padding: 30px 80px; pointer-events: none; display: none; }
JS
Copy
const $armors = document.querySelectorAll('.armor'); const $start = document.getElementById('btn-start'); const $yourArm = document.getElementById('yourArm'); const $botArm = document.getElementById('botArm'); const $pvp = document.getElementById('pvp'); const $getReady = document.getElementById('getReady'); const $btnReset = document.getElementById('btn-reset'); const $cell = document.querySelector('.cell'); const $result = document.getElementById('result'); const resourceLink = { rock: 'https://images.vexels.com/content/145641/preview/earth-stone-illustration-8dd583.png', paper: 'https://cdn-icons-png.freepik.com/512/2541/2541988.png', scissor: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Gtk-cut.svg/1024px-Gtk-cut.svg.png' } let currentArm = ''; let currentBotArm = ''; let state = ''; let botArmy = ''; const selectWin = (me, bot)=>{ if (me == bot) return 'DRAW'; else if ( (me == 'rock' && bot == 'scissor') || (me == 'scissor' && bot == 'paper') || (me == 'paper' && bot == 'rock') ) {return 'WIN'}; return "TRY AGAIN"; } const reset = ()=>{ confetti.reset(); estate = ''; currentArm = ''; botArmy = ''; currentBotArm = ''; $getReady.style.opacity = '1'; $pvp.style.display = 'none'; removeSelection(); $cell.style.opacity = '1'; $botArm.style.backgroundImage = 'none'; $result.innerText = ''; $result.style.display = 'none'; } const machineArm = ()=>{ const select = ['rock', 'paper', 'scissor']; const random = Math.floor(Math.random()*3); return select[random]; } const removeSelection = ()=>$armors.forEach(arm=>arm.classList.remove('active')); $armors.forEach(army=>{ army.addEventListener('click',(e)=>{ removeSelection(); currentArm = e.target.id; e.target.classList.add('active'); }) }) $start.addEventListener('click', ()=>{ if (!currentArm) { alert('Select an army'); return; } $getReady.style.opacity = '0'; $pvp.style.display = 'flex'; $yourArm.style.backgroundImage = `url(${resourceLink[currentArm]})`; currentBotArm = machineArm(); setTimeout(()=>{ $cell.style.opacity = '0'; $botArm.style.backgroundImage = `url(${resourceLink[currentBotArm]})` }, 2000); setTimeout(()=>{ state = selectWin(currentArm, currentBotArm); $result.innerText = state; $result.style.display = 'inherit'; if (state == 'WIN') {confetti()} }, 2500); }) $btnReset.addEventListener('click', reset);