Webleb - Snippets de Código -

HTML

CSS

@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

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);

Recomendado

Estrutura HTML do contêiner de animação CSS

112 OPERADORES

Animação de árvore de Natal em SVG com JavaScript

HTML

CSS

JS

Recomendado

Estrutura HTML do contêiner de animação CSS

112 OPERADORES

Animação de árvore de Natal em SVG com JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS