Webleb - Snippet di Codice -

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

Consigliato

informazioni sulla carta

Esempio di modello HTML di base

Modello di sito Web del portfolio dello sviluppatore

HTML

CSS

JS

Consigliato

informazioni sulla carta

Esempio di modello HTML di base

Modello di sito Web del portfolio dello sviluppatore

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS