RaWiLOGIC

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.