Game RockPaperScissors
HTML
JavaScript
CSS
Demo
<!DOCTYPE html> <html> <head> <title>RockPaperScissors</title> <link rel="stylesheet" type="text/css" href="css/rps.css" media="screen" /> </head> <body> <div id="kreis"> <svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" overflow="visible"> <style> #circle { stroke: none; fill: #2981c4; transform: scale(0,0); animation: 1.8s pulse linear forwards; } @keyframes pulse { 0% { transform: scale(0,0); } 16.66% { transform: scale(1,1); } 33.32% { transform: scale(0,0); } 49.98% { transform: scale(1,1); } 66.64% { transform: scale(0,0); } 83.3% { transform: scale(1,1); } 100% { transform: scale(0,0); } } </style> <switch><g><circle id="c" cx="70" cy="70" r="65"/></g></switch> </svg> </div> <h3><br>RockPaperScissors</h3> <div class="gameDiv"> <div class="playerDiv"> <h4>Computer</h4> <div class="symbolDiv" id="symbol1Div"></div> </div> <div class="playerDiv"> <h4>Player</h4> <div class="symbolDiv" id="symbol2Div"></div> </div> <div class="displayDiv" id="displayDiv">Starte das Spiel!</div> <div class="displayDiv"> <div class="counterDiv" id="counterComputerDiv">Computer: 0</div> <div class="counterDiv" id="counterTieDiv">Unentschieden: 0</div> <div class="counterDiv" id="counterPlayerDiv">Player: 0</div> </div> <div class="butdiv"> <button class="button" onclick="rpsStart(0)"><p>Rock</p></button> <button class="button" onclick="rpsStart(1)"><p>Paper</p></button> <button class="button" onclick="rpsStart(2)"><p>Scissors</p></button> </div> <div class="butdiv"> <a href="gamelogic.html"><button class="button" ><p>Game-Logik</p></button></a> </div> </div> <script type="text/javascript" src="js/rps.js"></script> </body> </html>
/* Game RockPaperScissors */ const symbol = ['svg/rock.svg', 'svg/paper.svg', 'svg/scissors.svg']; const message = ['Unentschieden.', 'Der Comuter hat gewonnen.', 'Du hast gewonnen.']; const anymsymbol = document.getElementById('kreis').innerHTML; const symbol1Div = document.getElementById('symbol1Div'); const symbol2Div = document.getElementById('symbol2Div'); const displayDiv = document.getElementById('displayDiv'); const counterTieDiv = document.getElementById('counterTieDiv'); const counterComputerDiv = document.getElementById('counterComputerDiv'); const counterPlayerDiv = document.getElementById('counterPlayerDiv'); let counterTie = 0; let counterComputer = 0; let counterPlayer = 0; updateStats = () => { counterTieDiv.innerHTML = 'Unentschieden: ' + counterTie; counterComputerDiv.innerHTML = 'Computer: ' + counterComputer; counterPlayerDiv.innerHTML = 'Player: ' + counterPlayer; } rpsStart = (symbolPlayer) => { symbol1Div.innerHTML = anymsymbol; symbol2Div.innerHTML = anymsymbol; displayDiv.innerHTML = 'Das Spiel beginnt...'; // Wait 2secs var aktstep = 0; var waiter = setInterval(function(){ countup() }, 20); function countup() { if (aktstep >= 100) { clearInterval(waiter); rpsExecute(symbolPlayer); } else { aktstep += 1; } } } rpsExecute = (symbolPlayer) => { var symbolComputer = Math.floor(Math.random() * 3); var gameValue = symbolPlayer + 1 + Math.pow((symbolComputer + 1), 2); symbol1Div.style.opacity = 1; symbol2Div.style.opacity = 1; switch (gameValue) { case 4: case 5: case 11: symbol1Div.innerHTML = '<img class="symbol animsize" src="' + symbol[symbolComputer] + '">'; symbol2Div.innerHTML = '<img class="symbol" src="' + symbol[symbolPlayer] + '">'; displayDiv.innerHTML = message[1]; counterComputer++; updateStats(); break; case 3: case 7: case 10: symbol1Div.innerHTML = '<img class="symbol" src="' + symbol[symbolComputer] + '">'; symbol2Div.innerHTML = '<img class="symbol animsize" src="' + symbol[symbolPlayer] + '">'; displayDiv.innerHTML = message[2]; counterPlayer++; updateStats(); break; default: symbol1Div.innerHTML = '<img class="symbol" src="' + symbol[symbolComputer] + '">'; symbol2Div.innerHTML = '<img class="symbol" src="' + symbol[symbolPlayer] + '">'; displayDiv.innerHTML = message[0]; counterTie++; updateStats(); } }
/* Styles RockPaperScissors */ * { box-sizing: border-box; } body { 	margin: 0; 	padding: 0; 	background-color: #000; 	font-family: Verdana, sans-serif; 	letter-spacing: 0.03rem; } h3 { 	font-size: 1.5rem; 	font-weight: normal; 	text-align: center; 	color: #2981c4; } h4 { 	font-size: 1.25rem; 	font-weight: normal; 	text-align: center; 	color: #2981c4; } p { 	font-size: 1rem; 	font-weight: normal; 	text-align: center; 	line-height: 1.5rem; 	color: #ccc; } #kreis { display: none; } #circle { width: 4rem; } .gameDiv { 	width: 50vw; 	margin: 0 auto; 	display: -webkit-box; 	display: -ms-flexbox; 	display: flex; 	-ms-flex-wrap: wrap; 	flex-wrap: wrap; } .playerDiv { 	width: 40%; 	margin: 0 auto; 	border: 1px solid #444; } .symbolDiv { 	width: 20%; 	height: 28rem; 	color: #ccc; 	text-align: center; 	margin: 0 auto; 	display: -webkit-box; 	display: -ms-flexbox; 	display: flex; 	-webkit-box-align: center; 	-ms-flex-align: center; 	align-items: center; 	-webkit-box-pack: center; 	-ms-flex-pack: center; 	justify-content: center; } .symbol { 	width: 100%; 	margin: 0 auto; } .animsize { 	-webkit-animation: scaleanim 1s ease forwards; 	animation: scaleanim 1s ease forwards; } @-webkit-keyframes scaleanim { 	0% { 		width: 100%; 	} 	50% { 		width: 145%; 	} 	100% { 		width: 100%; 	} } @keyframes scaleanim { 	0% { 		width: 100%; 	} 	50% { 		width: 145%; 	} 	100% { 		width: 100%; 	} } .displayDiv { 	width: 90%; 	height: 6rem; 	color: #ccc; 	text-align: center; 	margin: 2rem auto 0 auto; 	border: 1px solid #444; 	display: -webkit-box; 	display: -ms-flexbox; 	display: flex; 	-webkit-box-align: center; 	-ms-flex-align: center; 	align-items: center; 	-webkit-box-pack: center; 	-ms-flex-pack: center; 	justify-content: center; } .counterDiv { 	width: 30%; 	margin: 0 auto; } .butdiv { 	width: 100%; 	height: 3rem; 	display: -webkit-box; 	display: -ms-flexbox; 	display: flex; 	-webkit-box-align: center; 	-ms-flex-align: center; 	align-items: center; 	-webkit-box-pack: center; 	-ms-flex-pack: center; 	justify-content: center; 	margin: 2rem auto 0 auto; } .button { 	width: 8rem; 	height: auto; 	margin: 0; 	cursor: pointer; 	outline: none; 	border: 1px solid #444444; 	border-radius: 5px; 	background-image: -webkit-gradient(linear, left top, left bottom, from(#39393d), to(#23232a)); 	background-image: linear-gradient(to bottom, #39393d, #23232a); 	background-repeat: repeat-x; } .button p { 	font-weight: bold; 	line-height: 0; 	text-align: center; 	color: #2981c4; 	text-decoration: none; 	-webkit-transition: all .5s ease; 	transition: all .5s ease; } .button:hover p { 	color: #fd8f00; } @media (max-width: 1920px) { 	.gameDiv { 		width: 40vw; 	} 	.symbolDiv { 		width: 20%; 		height: 10rem; 	} 	.displayDiv { 		width: 90%; 		height: 3rem; 	} } @media (max-width: 1024px) { 	.gameDiv { 		width: 90vw; 	} } @media (max-width: 480px) { 	.gameDiv { 		width: 96vw; 	} 	.symbolDiv { 		height: 6rem; 	} }
Computer
Player
Starte das Spiel!
Computer: 0
Unentschieden: 0
Player: 0
Sorry, aber die Darstellung der Codes dieses Beispiels ist auf kleinen Displays zu unübersichtlich.Sie können sich jedoch die Codes downloaden und das Spiel auf ihrem PC/Laptop/Tablet ausprobieren.