0
我的班級導師指導我們如何使用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) {
\t document.getElementById(id).src=image;
\t
}//end swap
//function that plays the game
function play(id) {
\t swap(pId[0],pics[0]);
\t swap(pId[1],pics[1]);
\t swap(pId[2],pics[2]);
\t swap(pId[3],pics[3]);
\t swap(pId[4],pics[4]);
\t
\t swap(cId[0],pics[0]);
\t swap(cId[1],pics[1]);
\t swap(cId[2],pics[2]);
\t swap(cId[3],pics[3]);
\t swap(cId[4],pics[4]);
\t
\t //variable that will store what we pick
\t var p_choice=id;
\t
\t //variable that will store what the computer picks
\t var c_choice=id; \t
\t
\t //math.floor rounds down the choices that the computer is going to make
\t var c_choice=Math.floor(Math.random()*4.9);
\t swap(pId[p_choice],pics2[p_choice]);
\t swap(cId[c_choice],pics2[c_choice]);
\t
\t //determines who wins or loses
\t switch(p_choice) {
\t \t case 0:
\t \t if (c_choice==0){
\t \t \t alert("Tie:\nOh Rock you too then!");
\t \t }
\t \t else if(c_choice==1) {
\t \t \t alert("Lose:\nPaper covers Rock")
\t \t }
\t \t else if(c_choice==2) {
\t \t \t alert("Win:\nRock crushes Scissors")
\t \t }
\t \t else if(c_choice==3) {
\t \t \t alert("Win:\nRock crushes Lizard")
\t \t }
\t \t else if(c_choice==4) {
\t \t \t alert("Lose:\nSpock vaporizes Rock")
\t \t }
\t \t break;
\t \t case 1:
\t \t if (c_choice==1){
\t \t \t alert("Tie:\nTwo pieces of paper stack up against each other");
\t \t }
\t \t else if(c_choice==0) {
\t \t \t alert("Win:\nPaper covers Rock")
\t \t }
\t \t else if(c_choice==2) {
\t \t \t alert("Lose:\nScissors cuts Paper")
\t \t }
\t \t else if(c_choice==3) {
\t \t \t alert("Lose:\nLizard eats Paper")
\t \t }
\t \t else if(c_choice==4) {
\t \t \t alert("Win:\nPaper disproves Spock")
\t \t }
\t \t break;
\t \t
\t \t case 2:
\t \t if (c_choice==2){
\t \t \t alert("Tie:\nThis is unacceptable! Unless you're a lesbian");
\t \t }
\t \t else if(c_choice==0) {
\t \t \t alert("Lose:\nRock crushes Scissors")
\t \t }
\t \t else if(c_choice==1) {
\t \t \t alert("Win:\nScissors cuts Paper")
\t \t }
\t \t else if(c_choice==3) {
\t \t \t alert("Win:\nScissors decapitates Lizard")
\t \t }
\t \t else if(c_choice==4) {
\t \t \t alert("Lose:\nSpock smashes Scissors")
\t \t }
\t \t break;
\t \t
\t \t case 3:
\t \t if (c_choice==3){
\t \t \t alert("Tie:\nTwo Lizards begin mating");
\t \t }
\t \t else if(c_choice==0) {
\t \t \t alert("Lose:\nRock crushes Lizard")
\t \t }
\t \t else if(c_choice==1) {
\t \t \t alert("Win:\nLizard eats Paper")
\t \t }
\t \t else if(c_choice==2) {
\t \t \t alert("Lose:\nScissors decapitates Lizard")
\t \t }
\t \t else if(c_choice==4) {
\t \t \t alert("Win:\nLizard poisons Spock")
\t \t }
\t \t break;
\t \t case 4:
\t \t if (c_choice==4){
\t \t \t alert("Tie:\nOne of us is going to have to give up Spock");
\t \t }
\t \t else if(c_choice==0) {
\t \t \t alert("Win:\nSpock vaporizes Rock")
\t \t }
\t \t else if(c_choice==1) {
\t \t \t alert("Lose:\nPaper disproves Spock")
\t \t }
\t \t else if(c_choice==2) {
\t \t \t alert("Win:\nSpock crushes Scissors")
\t \t }
\t \t else if(c_choice==3) {
\t \t \t alert("Lose:\nLizard poisons Spock")
\t \t }
\t \t break;
\t }
}//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">
\t <header>
\t <h1>Rock - Paper - Scissors - Lizard - Spock</h1>
\t <h6>By: Dr. Sheldon Cooper</h6>
\t </header>
\t <span id="win">Win!</span>
\t <span id="tie">Tie!</span>
\t <span id="tie">Lost!</span>
\t \t <div id="optionsncounter"><!--ONC container-->
\t \t \t <div class="player">
\t \t \t \t <!-- p = player-->
\t \t \t <h2 class="title">Player</h2>
\t \t \t \t <img src="images/rock.jpg" id="rock_p" onclick="play(0);"/>
\t \t \t \t <img src="images/paper.jpg" id="paper_p" onclick="play(1);"/>
\t \t \t \t <img src="images/scissors.jpg" id="scissors_p" onclick="play(2);"/>
\t \t \t \t <img src="images/lizard.jpg" id="lizard_p" onclick="play(3);"/>
\t \t \t \t <img src="images/spock.jpg" id="spock_p" onclick="play(4);"/>
\t </div><!-- /.player -->
\t \t \t <div class="computer">
\t \t \t \t <!-- c = computer-->
\t \t \t <h2 class="title">Computer</h2>
\t \t \t \t <img src="images/rock.jpg" id="rock_c"/>
\t \t \t \t <img src="images/paper.jpg" id="paper_c"/>
\t \t \t \t <img src="images/scissors.jpg" id="scissors_c"/>
\t \t \t \t <img src="images/lizard.jpg" id="lizard_c"/>
\t \t \t \t <img src="images/spock.jpg" id="spock_c"/>
</div><!-- /.computer -->
\t \t \t <div class="counter">
\t \t \t \t <!-- c = computer-->
\t \t \t <h2 class="title">Results</h2>
\t \t \t \t <img src="images/CounterBG.jpg"/>
\t \t \t \t <img src="images/CounterBG.jpg"/>
\t \t \t \t <img src="images/CounterBG.jpg"/>
</div><!-- wtl = -->
\t \t </div><!--ONC container-->
<footer>© Copyright 2015, Steven Ledoux</footer>
</div><!-- /#container -->
</body>
</html>我有蜥蜴和斯波克擴展它。我的目的是讓「勝利 - 關鍵 - 失敗」計數器首先工作，但我不知道如何讓一個人工作。我在本網站上看到了其他方式的RPS計數器，但我不確定如何讓它在我的JavaScript代碼中工作。這裏也是一個鏈接的jsfiddle，jsfiddle.net/kvwygeen
請在將來的問題中使用[jsfiddle.net]（http://jsfiddle.net）。我爲你創建了這個：http://jsfiddle.net/kvwygeen/。 – michaeln
感謝您的幫助。這似乎是用戶偏好，因爲我讓人們說使用片段或發送jsfiddle/jsbin。我將致力於編碼並瞭解它的工作原理。 –
我現在正在回答你的問題，別擔心。你最好的選擇就是提供兩個版本，就像你剛纔提到的那樣，這是一個非常個人的偏好。 – michaeln