Dieses Spiel wurde hauptsächlich unter Berücksichtigung zweier Punkte entwickelt:
Das erste ist die Berechnung von Sieg und Niederlage
Denn Stein-Schere-Papier ist zyklisch
Stein tötet Scheren
Scheren töten Stoff
Stoff tötet Stein
Stein tötet Schere
. . .
Finden Sie die Regeln basierend auf den oben genannten Merkmalen und schreiben Sie den Algorithmus.
Lass den Computer zufällig sein
Das ist relativ einfach. Ich habe bereits einen Einführungsartikel geschrieben. Wenn Sie es nicht verstehen, können Sie es lesen.
Zufällige Aktualisierung
Eigentlich ist dieser Effekt für das Spiel nicht entscheidend, aber damit es interaktiver und unterhaltsamer aussieht, habe ich ihn hinzugefügt. Hierbei kommt ein Modulo-Algorithmus zum Einsatz, der Effekt kann durch eine zyklische Anzeige basierend auf dem Rest erzielt werden.
Screenshot der Benutzeroberfläche
Zum Schluss den Code hinzufügen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS写的石头剪子布游戏 - 琼台博客</title>
<style type="text/css">
div{margin:20px auto;padding:10px;border:2px solid #999;width:200px;background:#ffe;}
div#cu{font-weight:bold;font-size:30px;height:40px;color:red;}
div#la{border:none;background:none;display:none;}
span{color:red;font-weight:bold;}
</style>
<script type="text/javascript">
var se = null,time=20,you=0,arr=new Array('石头','抹布','剪子');
function p(n){
you = n;
document.getElementById('you').innerHTML=s(n);
document.getElementById('st').disabled=true;
document.getElementById('mb').disabled=true;
document.getElementById('jz').disabled=true;
document.getElementById('cu').innerHTML = '...';
se = setInterval('t()',50);
}
function agin(){
document.getElementById('st').disabled=false;
document.getElementById('mb').disabled=false;
document.getElementById('jz').disabled=false;
document.getElementById('la').style.display = 'none';
document.getElementById('you').innerHTML = '';
document.getElementById('pc').innerHTML = '';
document.getElementById('cu').innerHTML = '';
document.getElementById('you').innerHTML= '请选择';
}
function bt(){
var pc = Math.floor(Math.random() * 3 + 1);
document.getElementById('pc').innerHTML = s(pc);
var str='';
if(pc==you){
str += '平局';
}else{
var b = pc-you;
if(b>0){
if(b==1){
str += '电脑赢';
}else{
str += '你赢啦';
}
}else{
b = b*-1;
if(b==1){
str += '你赢啦';
}else{
str += '电脑赢';
}
}
}
document.getElementById('la').style.display = 'block';
document.getElementById('cu').innerHTML = str;
}
function t(){
if(time>0){
document.getElementById('pc').innerHTML = arr[time%3];
time--;
}else{
clearInterval(se);
se = null;
time = 20;
bt();
}
}
function s(n){
if(n==1){
return '石头';
}else if(n==2){
return '抹布';
}else{
return '剪子';
}
}
</script>
</head>
<body>
<div>
<p>你出什么？<span id="you">请选择</span></p>
<p><button id="st" onclick="p(1);">石头</button></p>
<p><button id="mb" onclick="p(2);">抹布</button></p>
<p><button id="jz" onclick="p(3);">剪子</button></p>
</div>
<div>
<p>电脑出？</p>
<span id="pc"></span>
</div>
<div id="cu"></div>
<div id="la"><button id="agin" onclick="agin()">再来一次</button></div>
</body>
</html>
