Partage du code source du jeu pierre-feuille-ciseaux implémenté dans les compétences JavaScript

Partage du code source du jeu pierre-feuille-ciseaux implémenté dans les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 16:38:58

original

2304 Les gens l'ont consulté

Ce jeu est principalement conçu avec deux points en tête :

Le premier est le calcul de la victoire et de la défaite

Parce que pierre-feuille-ciseaux, c'est cyclique
La pierre tue les ciseaux
Les ciseaux tuent le tissu
Le tissu tue la pierre
La pierre tue les ciseaux
. . .
Trouvez les règles basées sur les caractéristiques ci-dessus et écrivez l'algorithme.

Laissez l'ordinateur être aléatoire

C'est relativement simple. J'ai déjà écrit un article le présentant. Si vous ne comprenez pas, vous pouvez le lire.

Rafraîchissement aléatoire

En fait, cet effet n'est pas critique pour le jeu, mais afin de le rendre plus interactif et amusant, je l'ai ajouté. Un algorithme modulo est utilisé ici, et l'effet peut être obtenu par un affichage cyclique basé sur le reste.

Capture d'écran de l'interface

Ajoutez enfin le code

<!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>

Copier après la connexion