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

Página de destino do portfólio

Um código por adwq

Um código por ledoc

HTML

CSS

JS

Recomendado

Página de destino do portfólio

Um código por adwq

Um código por ledoc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS