Javascript 编程一个石头剪纸html游戏_Javascript_Html

Javascript 编程一个石头剪纸html游戏

javascript html

Javascript 编程一个石头剪纸html游戏,javascript,html,Javascript,Html,我正在为我的计算机科学课做一个石头剪刀游戏。这场比赛是人类对计算机的较量。我已经得到了代码，网页看起来是正确的，但是当用户点击其中一个图标选择石头布或剪刀时，什么都没有发生。有人能帮我把图片按钮连接到运行游戏的功能上吗？另外，如果我能得到帮助，如何添加代码，保持游戏的分数，并计算每个人和计算机获得多少胜利？谢谢代码如下石头布剪刀射击！身体{ 字体系列：Roboto，Arial； } .选择img{ 宽度：150px；利润率：20px； } 让我们玩石头剪刀！选择一个动作 var com

我正在为我的计算机科学课做一个石头剪刀游戏。这场比赛是人类对计算机的较量。我已经得到了代码，网页看起来是正确的，但是当用户点击其中一个图标选择石头布或剪刀时，什么都没有发生。有人能帮我把图片按钮连接到运行游戏的功能上吗？另外，如果我能得到帮助，如何添加代码，保持游戏的分数，并计算每个人和计算机获得多少胜利？谢谢代码如下


石头布剪刀射击！
身体{
字体系列：Roboto，Arial；
}
.选择img{
宽度：150px；
利润率：20px；
}
让我们玩石头剪刀！选择一个动作
var computerChoice=math.random（）；
var userChoice=null；
如果（计算机选择<.33）{
computerChoice==“岩石”；
}否则如果（计算机选择<.66）{
computerChoice==“纸张”；
}否则{
computerChoice==“剪刀”；
};
函数convertUserChoice（）{
$（'#rock'）。单击（函数（）{
userChoice==“rock”；
});
$（“#纸张”）。单击（函数（）{
userChoice==“纸张”；
});
$（“#剪刀”）。单击（函数（）{
userChoice==“剪刀”；
});
};
if（userChoice==computerChoice）{
警觉（“领带！”）；
}else if（userChoice==“rock”）{
如果（计算机选择==“剪刀”）{
警惕（“你赢了！”）；
}否则{
警惕（“你输了”）；
};
}else if（用户选择==“纸张”）{
如果（计算机选择==“摇滚乐”）{
警惕（“你赢了！”）；
}否则{
警惕（“你输了”）；
};
}else if（用户选择==“剪刀”）{
如果（计算机选择=“纸张”）{
警惕（“你赢了！”）；
}否则{
警惕（“你输了”）；
};
};

看起来您正在使用jQuery，但没有包括它

将此添加到您的

：

没有jQuery的另一个解决方案是使用

onClick

函数

<img alt="Dwayne THE ROCK Johnson"src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock" onClick="onRockClick()">

您的代码应该是这样的：


石头布剪刀射击！
身体{
字体系列：Roboto，Arial；
}
.选择img{
宽度：150px；
利润率：20px；
}
让我们玩石头剪刀！选择一个动作
var computerChoice=Math.random（）；
var userChoice=null；
如果（计算机选择<.33）{
computerChoice=“rock”；
}否则如果（计算机选择<.66）{
computerChoice=“纸张”；
}否则{
computerChoice=“剪刀”；
};
函数convertUserChoice（userChoice）{
if（userChoice==computerChoice）{
警觉（“领带！”）；
}else if（userChoice==“rock”）{
如果（计算机选择==“剪刀”）{
警惕（“你赢了！”）；
}否则{
警惕（“你输了”）；
}
}else if（用户选择==“纸张”）{
如果（计算机选择==“摇滚乐”）{
警惕（“你赢了！”）；
}否则{
警惕（“你输了”）；
}
}else if（用户选择==“剪刀”）{
如果（计算机选择=“纸张”）{
警惕（“你赢了！”）；
}否则{
警惕（“你输了”）；
}
}
}
$（'#rock'）。单击（函数（）{
转换用户选择（“岩石”）；
});
$（“#纸张”）。单击（函数（）{
转换用户选择（“纸张”）；
});
$（“#剪刀”）。单击（函数（）{
选择权（“剪刀”）；
});

到目前为止，您所拥有的有点不对劲。我已经做了一些改进，让它工作起来，每一轮都做一个新的电脑选择，并保持分数

$（函数（）{
var computerScore=0，
playerScore=0；
函数setText（txt）{
$（“#playerScore”）.text（playerScore）；
$（“#计算机分数”）.text（计算机分数）；
$（“#结果”）.text（txt）；
}
函数makeComputerChoice（）{
var computerChoice=“”；
var r=Math.random（）；
如果（r<.33）{
computerChoice=“rock”；
}否则，如果（r<.66）{
computerChoice=“纸张”；
}否则{
computerChoice=“剪刀”；
};
返回计算机选择；
}
函数makeUserChoice（userChoice）{
var computerChoice=makeComputerChoice（）；
var结果=”；
if（userChoice==computerChoice）{
结果=“平局！”；
}else if（userChoice==“rock”）{
如果（计算机选择==“剪刀”）{
结果=“你赢了！”；playerScore=playerScore+1；
}否则{
结果=“你输了。”computerScore=computerScore+1；
};
}else if（用户选择==“纸张”）{
如果（计算机选择==“摇滚乐”）{
结果=“你赢了！”；playerScore=playerScore+1；
}否则{
结果=“你输了。”computerScore=computerScore+1；
};
}else if（用户选择==“剪刀”）{
如果（计算机选择=“纸张”）{
结果=“你赢了！”；playerScore=playerScore+1；
}否则{
结果=“你输了”computerScore=computerScore+1；
};
};
setText（用户选择+“vs”+计算机选择+“=”+结果）；
};
//添加事件侦听器：
$（'#rock'）。单击（函数（）{
makeUserChoice（“岩石”）；
});
$（“#纸张”）。单击（函数（）{
makeUserChoice（“纸张”）；
});
$（“#剪刀”）。单击（函数（）{
makeUserChoice（“剪刀”）；
});
});
正文{
字体系列：Roboto，Arial；
}
.选择img{
宽度：150px；
利润率：20px；
}
#结果{颜色：红色}

让我们玩石头剪刀！选择一个动作
[玩家一]0-0[计算机]

石头布剪刀射击！
身体{
字体系列：Roboto，Arial；
}
.选择img{
宽度：150px；
利润率：20px；
}
#结果{颜色：红色}
让我们玩石头剪刀！选择一个m
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Rock Paper Scissors Shoot!</title>
<style>
body {
    font-family: Roboto, Arial; 
}

.choose img {
width: 150px;
margin: 20px;   
}
#result {color:red}
</style>
</head>

<body>

<div class="choose" align="center">
<h1 id="question">Let's play rock paper scissors! Choose a move</h1>
<h2 id="result"></h2>
<h2>[Player One] <span id="playerScore">0</span> - <span id="computerScore">0</span> [Computer]</h2>
<img alt="Dwayne THE ROCK Johnson" src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock">
<img alt="Lined paper" src="http://images.clipartpanda.com/writing-on-paper-clipart-black-and-white-1206556249326967385nexxuz_Loose_Leaf_Paper.svg" id="paper">
<img alt="Scissors" src="http://www.wpclipart.com/education/supplies/scissors/roundtip_scissors_blue.png" id="scissors">
</div>

<script>
$(function(){

var computerScore=0,
  playerScore=0;

function setText(txt){
$("#playerScore").text(playerScore);
$("#computerScore").text(computerScore);
$("#result").text(txt);
}

function makeComputerChoice(){
  var computerChoice = "";
  var r = Math.random();
  if (r < .33) {
    computerChoice = "rock";
  } else if (r < .66) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";   
  };
  return computerChoice;
 }


function makeUserChoice(userChoice){
  var computerChoice = makeComputerChoice();
  var outcome = "";
if (userChoice == computerChoice) {
    outcome="Tie!";
} else if (userChoice == "rock") {
    if (computerChoice == "scissors") {
        outcome="You win!"; playerScore=playerScore+1;
    } else {
        outcome="You lose."; computerScore=computerScore+1;
    };
} else if (userChoice == "paper") {
    if (computerChoice == "rock") {
        outcome="You win!"; playerScore=playerScore+1;
    } else {
        outcome="You lose."; computerScore=computerScore+1;
    };
} else if (userChoice == "scissors") {
    if (computerChoice == "paper") {
        outcome="You win!"; playerScore=playerScore+1;
    } else {
        outcome="You lose"; computerScore=computerScore+1;
    };
};
  setText(userChoice+" vs "+computerChoice+" = "+outcome);
};

 //add event listeners:
 $('#rock').click(function() {
        makeUserChoice("rock");
    });
    $('#paper').click(function() {
        makeUserChoice("paper");
    });
    $('#scissors').click(function() {
        makeUserChoice("scissors");
    });
});
</script>
</body>
</html>