JSFiddle - React, Tailwind, and code Playground

by webEugene29

HTML

<div class="wrapper">
	<!-- user -->
		<div class="userPlayer">
			<div class="block_things">
			<h1>Вы</h1>
			<div class="items">	
				<span><i class="fa fa-hand-rock-o fa-2x rock"></i></span>
				<span><i class="fa fa-hand-scissors-o fa-2x scissors"></i></span>
				<span><i class="fa fa-hand-paper-o fa-2x paper"></i></span>
			</div>
				<div id="scorePlayer">Очки</div>
                <div id="userResult"></div>

			</div>
		</div>
	<!-- computer -->
		<div class="computerPlayer">
		<h1>Компьютер</h1>
				<div id="scorePlayerComp">Очки</div>
                <div id="computerResult"></div>
		</div>
		<div style="clear:both;"></div>
		<button id="play" onclick="compare()">Играть</button>
		<div id="result"></div>
	</div>

CSS

body{
	margin: 0;
	padding: 0;
	background-color: #B3D8D9;
}

.wrapper{
	width:50%;
	margin:1rem auto;
}

.userPlayer{
	height:20rem;
	width:49%;
	border-right: 0.1rem solid #000;
	float:left;
}

.items > div{
	display: inline-block;
}

.computerPlayer{
	float:left;
	width:50%;
	margin-left:0.2rem;
}

#rock, #scissors, #paper{
	display: inline-block;
}

JavaScript

// userPlayer
var chosenClass = null;
(function(){
	var elements = document.querySelectorAll('.items > span');
	for (var i = 0; i < elements.length; i++){
		elements[i].onclick = function(){
			document.getElementById('userResult').innerHTML = this.innerHTML;

			var chosenClass = this.childNodes[0].classList[3];
				if(chosenClass === 'rock'){
					console.log(11111);
				}else{
					console.log(3334343434);
				}
				
			
		}
	}
})();

// var userChoice = chosenClass;
console.log(chosenClass);


// computerPlayer
var comRock = 'rocks';
var comScissors = 'scissors';
var comPaper = 'paper';
var computerChoice = Math.random();

if(computerChoice < 0.34){
 	computerChoice = comRock;
}else if(computerChoice <= 0.64){
 	computerChoice = comScissors;
}else{
	computerChoice = comPaper;
}

// logic play
var countComputer = 0;
var countYou = 0;
function compare(choice1, choice2){
	if(choice1 === choice2){
		return document.getElementById('result').innerHTML = "Ничья! Повторить!";
	}else if(choice1 == comRock){

		  if(choice2 === comScissors){
			return document.getElementById('result').innerHTML = "Выиграли вы!";
			countYou++;
	  	  }else{
			return document.getElementById('result').innerHTML = "Выиграл компьютер!";
			countComputer++;
		  }
	
	}else if(choice1 === comPaper){
		
		  if(choice2 === comRock){
			return document.getElementById('result').innerHTML = "Выиграл компьютер!";
			countComputer++;
		}else{
			return document.getElementById('result').innerHTML = "Выиграли вы!";
			countYou++
		}
		
	}else if(choice1 === comScissors){

		if(choice2 === comRock){
			return document.getElementById('result').innerHTML = "Выиграли вы!";
			countYou++;
		}else{
			return document.getElementById('result').innerHTML = "Выиграл компьютер!";
			countComputer++;
		}
	}
};

document.getElementById('computerResult').innerHTML = countComputer;

compare(chosenClass, computerChoice);