わかりました、私はこれが奇妙であることを知っています、そしてそれは巻き上げと関係があるのではないかと思いましたが、私はそれをよく理解していないので、まったくわかりません. 私は基本的にじゃんけんゲームをしています。何も選択しないと、コンピューターがランダムに選択します。あなたのチョイスの写真を選択した後、提示され、選択リストの値も変更されます。
私の問題は、画像が常に変更されるとは限らず、コンピューターが数値をランダム化し、Chrome でのみ変更される場合のみです。ここに jsFiddle へのリンクがあります。また、ここでコードを提供します。
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rock-paper-scissers</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="rps.js"></script>
<style type="text/css">
html{
min-height: 100%;
}
body{
height: 100%;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c));
background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c);
background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c);
background-repeat: no-repeat;
text-align: center;
}
div#Container {
width: 80%;
margin: 0 auto;
}
div#InnerLeft {
width: 50%;
position: relative;
float: left;
}
div#InnerRight {
width: 50%;
position: relative;
float: right;
}
div#Footer {
clear: both;
}
div#notes {
width: 60%;
margin: 0 auto;
padding-top: 15px;
text-align: left;
}
select {
background: transparent;
margin-top: 15px;
width: 220px;
font-size: 16px;
-webkit-appearance: none;
border: 0px;
height: 34px;
}
</style>
</head>
<body>
<div id="Container">
<img src="images/header.png">
<div id="InnerLeft">
<img src="images/uno.png"><br>
<select id="p1" onchange="change('p1','rpsleft')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="images/rpsL.png" id="rpsleft"></p>
</div>
<div id="InnerRight">
<img src="images/dos.png"><br>
<select id="p2" onchange="change('p2','rpsright')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="images/rps.png" id="rpsright"></p>
</div>
<div id="Footer">
<img src="images/andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)"
onMouseOver="document.getElementById('andale').src='images/andale2.png'"
onMouseOut="document.getElementById('andale').src='images/andale.png'">
</div>
</div>
</body>
Javascript
// JavaScript Document
function reset() {
document.getElementById('p1').value = 0;
document.getElementById('p2').value = 0;
document.getElementById('rpsleft').src="images/rpsL.png"
document.getElementById('rpsright').src="images/rps.png"
return;
}
function change(player,image) {
var icon = document.getElementById(player).value;
image = document.getElementById(image)
switch (parseInt(icon)) {
case 1:
if (player == 'p1')
image.src="images/rockL.png";
else
image.src="images/rock.png";
break;
case 2:
if (player == 'p1')
image.src="images/paperL.png";
else
image.src="images/paper.png";
break;
case 3:
if (player == 'p1')
image.src="images/scissorsL.png";
else
image.src="images/scissors.png";
break;
}
return;
}
function getValue(player) {
var rand = player;
if (rand == 0) {
rand = Math.floor(Math.random()*3) + 1;
}
return rand;
}
function rps(player1,player2) {
var p1 = getValue(player1);
var p2 = getValue(player2);
document.getElementById('p1').value = p1;
document.getElementById('p2').value = p2;
change('p1','rpsleft');
change('p2','rpsright');
if (p1 == p2) {
alert("It's a tie!");
reset();
return;
}
var sum = parseInt(p1) + parseInt(p2);
var winner;
switch(sum) {
case 3:
(p1 == 2) ? winner = '1' : winner = '2';
break;
case 4:
(p1 == 1) ? winner = '1' : winner = '2';
break;
case 5:
(p1 == 3) ? winner = '1' : winner = '2';
break;
default:
alert("There was an error");
}
alert("Player " + winner + " is the winner");
reset();
return;
}
ありがとう!