Мой инструктор в моем классе проинструктировал нас, как создать игру «Камень, ножницы, бумага», используя HTML, Javascript и CSS.

//Array that will store the actual images to be used
var pics=new Array();

var winHud = document.getElementById("extra-ammo");
var tieHud = document.getElementById("current-ammo");
var losHud = document.getElementById("current-ammo");

var winSpan = document.getElementById('You Win!')
var tieSpan = document.getElementById('It\'s A Tie!')
var losSpan = document.getElementById('You Lose')

var win = 0;
var tie = 0;
var loss = 0;

pics [0]="images/rock.jpg";
pics [1]="images/paper.jpg";
pics [2]="images/scissors.jpg";
pics [3]="images/lizard.jpg";
pics [4]="images/spock.jpg";

//Array that will store the highlighted images
var pics2=new Array();

pics2 [0]="images/rock2.jpg";
pics2 [1]="images/paper2.jpg";
pics2 [2]="images/scissors2.jpg";
pics2 [3]="images/lizard2.jpg";
pics2 [4]="images/spock2.jpg";

//Array for the player ID
var pId=new Array("rock_p","paper_p","scissors_p","lizard_p","spock_p");

//Array for the computer ID
var cId=new Array();

cId[0]="rock_c";
cId[1]="paper_c";
cId[2]="scissors_c";
cId[3]="lizard_c";
cId[4]="spock_c";



//Function that will swap the images to the highlighted ones

function swap(id,image) {
	document.getElementById(id).src=image;
	
}//end swap

//function that plays the game
function play(id) {
	swap(pId[0],pics[0]);
	swap(pId[1],pics[1]);
	swap(pId[2],pics[2]);
	swap(pId[3],pics[3]);
	swap(pId[4],pics[4]);
	
	swap(cId[0],pics[0]);
	swap(cId[1],pics[1]);
	swap(cId[2],pics[2]);
	swap(cId[3],pics[3]);
	swap(cId[4],pics[4]);
	
	//variable that will store what we pick
	var p_choice=id;
	
	//variable that will store what the computer picks
	var c_choice=id;	
	
	//math.floor rounds down the choices that the computer is going to make
	var c_choice=Math.floor(Math.random()*4.9);
	swap(pId[p_choice],pics2[p_choice]);
	swap(cId[c_choice],pics2[c_choice]);
	
	//determines who wins or loses
	switch(p_choice) {
		case 0:
		if (c_choice==0){
			alert("Tie:\nOh Rock you too then!");
		}
		else if(c_choice==1) {
			alert("Lose:\nPaper covers Rock")
		}
		else if(c_choice==2) {
			alert("Win:\nRock crushes Scissors")
		}
		else if(c_choice==3) {
			alert("Win:\nRock crushes Lizard")
		}
		else if(c_choice==4) {
			alert("Lose:\nSpock vaporizes Rock")
		}
		break;

		case 1:
		if (c_choice==1){
			alert("Tie:\nTwo pieces of paper stack up against each other");
		}
		else if(c_choice==0) {
			alert("Win:\nPaper covers Rock")
		}
		else if(c_choice==2) {
			alert("Lose:\nScissors cuts Paper")
		}
		else if(c_choice==3) {
			alert("Lose:\nLizard eats Paper")
		}
		else if(c_choice==4) {
			alert("Win:\nPaper disproves Spock")
		}
		break;
		
		case 2:
		if (c_choice==2){
			alert("Tie:\nThis is unacceptable! Unless you're a lesbian");
		}
		else if(c_choice==0) {
			alert("Lose:\nRock crushes Scissors")
		}
		else if(c_choice==1) {
			alert("Win:\nScissors cuts Paper")
		}
		else if(c_choice==3) {
			alert("Win:\nScissors decapitates Lizard")
		}
		else if(c_choice==4) {
			alert("Lose:\nSpock smashes Scissors")
		}
		break;
		
		case 3:
		if (c_choice==3){
			alert("Tie:\nTwo Lizards begin mating");
		}
		else if(c_choice==0) {
			alert("Lose:\nRock crushes Lizard")
		}
		else if(c_choice==1) {
			alert("Win:\nLizard eats Paper")
		}
		else if(c_choice==2) {
			alert("Lose:\nScissors decapitates Lizard")
		}
		else if(c_choice==4) {
			alert("Win:\nLizard poisons Spock")
		}
		break;
		case 4:
		if (c_choice==4){
			alert("Tie:\nOne of us is going to have to give up Spock");
		}
		else if(c_choice==0) {
			alert("Win:\nSpock vaporizes Rock")
		}
		else if(c_choice==1) {
			alert("Lose:\nPaper disproves Spock")
		}
		else if(c_choice==2) {
			alert("Win:\nSpock crushes Scissors")
		}
		else if(c_choice==3) {
			alert("Lose:\nLizard poisons Spock")
		}
		break;
	}
}//end play function
/* CSS Document */

header {
    text-align: center;
    color: #5cc6bc;
}

footer {
    height: 20px;
    margin-top: 1px;
    font-size: 60%;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    color: #5cc6bc;
    border-top: 1px solid #5cc6bc;
}

img {
    border: 2px solid #5cc6bc;
    border-radius: 25px;
}

h1 {
    font-family: helvetica;
}

h2 {
    text-align: center;
    color: #5cc6bc;
    font-family: Arial, helvetica;
}

h3 {
}

h4 {
}

h5 {
}

h6 {
    font-family: cambria;
    font-weight: bold;
}

#container {
    margin: auto;
    width: 960px;
    height: 725px;
    background-color: #16143c;
    background-image: url(../images/LSExpansion.jpg);
    background-repeat: no-repeat;
    background-position: 5px 110px;
    background-size: 960px;
    border-radius: 15px;
    padding: 5px;
}

#optionsncounter {
    width: 960px;
    height: 100px;
    margin: 467px auto auto 0px;
}

.player {
    background-color: #16143c;
    float: left;
    text-align: center;
    line-height: 0px;
    height: 90px;
    width: 290px;
    padding: 5px;
    border-top-right-radius: 15px;
}

.counter {
    margin-left: auto;
    margin-right: auto;
    background-color: #16143c;
    text-align: center;
    line-height: 0px;
    height: 90px;
    width: 220px;
    padding: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.computer {
    margin-top: 0px;
    background-color: #16143c;
    float: right;
    text-align: center;
    line-height: 0px;
    height: 90px;
    width: 290px;
    padding: 5px;
    border-top-left-radius: 15px;
}

#wins {
    text-align: center;
    color: #5cc6bc;
    height: 60px;
    width: 50px;
}

#ties {
    text-align: center;
    color: #5cc6bc;
    height: 60px;
    width: 50px;
    margin: 5px;
}

#losses {
    text-align: center;
    color: #5cc6bc;
    height: 60px;
    width: 50px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Ledoux, Steven R. GDS111.01 RPS-->
<meta charset="UTF-8">
<title>Rock,Paper,Scissors,Lizard,Spock | Demo</title>
<script type="text/javascript" src="js/rps.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<div id="container">
	<header>
	<h1>Rock - Paper - Scissors - Lizard - Spock</h1>
	<h6>By: Dr. Sheldon Cooper</h6>
	</header>
	<span id="win">Win!</span>
	<span id="tie">Tie!</span>
	<span id="tie">Lost!</span>
		<div id="optionsncounter"><!--ONC container-->
			<div class="player">
				<!-- p = player-->
    			<h2 class="title">Player</h2>
				<img src="images/rock.jpg" id="rock_p" onclick="play(0);"/>
				<img src="images/paper.jpg" id="paper_p" onclick="play(1);"/>
				<img src="images/scissors.jpg" id="scissors_p" onclick="play(2);"/>
				<img src="images/lizard.jpg" id="lizard_p" onclick="play(3);"/>
				<img src="images/spock.jpg" id="spock_p" onclick="play(4);"/>
           	</div><!-- /.player -->
			<div class="computer">
				<!-- c = computer-->
    			<h2 class="title">Computer</h2>
				<img src="images/rock.jpg" id="rock_c"/>
				<img src="images/paper.jpg" id="paper_c"/>
				<img src="images/scissors.jpg" id="scissors_c"/>
				<img src="images/lizard.jpg" id="lizard_c"/>
				<img src="images/spock.jpg" id="spock_c"/>
            </div><!-- /.computer -->
			<div class="counter">
				<!-- c = computer-->
    			<h2 class="title">Results</h2>
				<img src="images/CounterBG.jpg"/>
				<img src="images/CounterBG.jpg"/>
				<img src="images/CounterBG.jpg"/>
            </div><!-- wtl = -->
		</div><!--ONC container-->
    <footer>&copy; Copyright 2015, Steven Ledoux</footer>
</div><!-- /#container -->
</body>
</html>

Я расширил его с помощью Ящерицы и Спока. Я намерен сначала заставить сработать счетчик «выигрышей-ничей-проигрышей», но я не знаю, как заставить его работать. Я видел на этом сайте другие способы счетчика запросов в секунду, но я не уверен, как заставить его работать в моем коде JavaScript. Вот также ссылка на jsfiddle, jsfiddle.net/kvwygeen

0
Steven Ledoux 13 Май 2015 в 00:34
1
В будущих вопросах используйте jsfiddle.net. Я создал это для вас: jsfiddle.net/kvwygeen.
 – 
michaeln
13 Май 2015 в 00:40
Спасибо за помощь. Кажется, это предпочтение пользователя, потому что я получаю людей, говорящих, что используйте фрагмент или отправьте jsfiddle / jsbin. Я буду работать над кодированием этого и посмотреть, как это работает.
 – 
Steven Ledoux
13 Май 2015 в 00:47
1
Я сейчас отвечаю на ваш вопрос, не волнуйтесь. Лучше всего предоставить обе версии, поскольку это, как вы упомянули, довольно личное предпочтение.
 – 
michaeln
13 Май 2015 в 00:48
1
Разместите здесь соответствующий фрагмент и ссылку на скрипку. Чем легче вы сделаете свой вопрос для понимания и ответа, тем лучше.
 – 
Carcigenicate
13 Май 2015 в 00:49

1 ответ

Лучший ответ

Вам понадобится глобальная счетная переменная, что-то вроде этого вне вашего метода:

var counter = {computer: 0, user: 0};

Затем в свой оператор switch просто добавьте что-то вроде этого:

// ...
case 0:
    switch (c_choice) {
        // i slightly modified your code to be a little more readable, just look at the fiddle
        case 4:
            alert("Lose:\nSpock vaporizes Rock");
            counter.computer += 1; // increment the counter
            break;
    }

Затем, в конце, просто обновите отображение счетчика (которое вы должны добавить в нужную позицию; присвойте ему атрибут id="your-id"). Затем просто установите его текст с помощью

document.getElementById("your-id").setInnerHTML = counter.computer; // or any other value

Вот скрипка, которую я обновил.

Вы также можете проверить перечисления в JavaScript, чтобы использовать такие термины, как case SPOCK:, чтобы еще больше улучшить ваш код.

1
michaeln 13 Май 2015 в 00:53
Прошу прощения, если это звучит как глупый вопрос, но что бы вы порекомендовали для «галстука» для javascript, я могу предположить, что компьютер добавит к счетчику потерь, а пользователь добавит к счетчику выигрышей.
 – 
Steven Ledoux
13 Май 2015 в 01:10
Не добавляйте ничего при ничьей, если счетчики показывают выигрыши.
 – 
Carcigenicate
13 Май 2015 в 01:17
1
Опять же, спасибо за помощь, я займусь этим.
 – 
Steven Ledoux
13 Май 2015 в 01:25