有一个石头剪刀柜台

Question

我的班级老师指导我们如何使用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>

我用Lizard和Spock扩展了它。我的目的是让“Wins-Ties-Loses”计数器首先工作，但我不知道如何让一个人工作。我在这个网站上看到了RPS计数器的其他方法，但我不确定如何让它在我的JavaScript代码中运行。这里还有一个jsfiddle链接，jsfiddle.net / kvwygeen

Answer 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

Here是我更新的小提琴。

您可能还想在JavaScript中查看enums，因此您可以使用case SPOCK:这样的字词来进一步改进代码。