This game is designed to two points:
First, the victory or defeat operation
Because stone scissors are cyclic
Stone kill scissors
Scissors and cloth kill
Stone kill
Stone kill scissors
. . .
Find out the rules based on the above characteristics and write out the algorithm.
Let the computer randomly
This is relatively easy. I have written an article before. If you don’t understand, you can go and take a look at the children’s shoes.
Random screen swipe
In fact, this effect is not the key to the game, but I added it to it in order to look more interactive and fun. A modulus algorithm is used here, and the effect can be achieved by looping according to the remainder.
Interface screenshot
Finally, the code is added
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>JS's Scissor Cloth Game - Qiongtai Blog</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('stone','rag','scissor');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= 'Please select';}function bt(){var pc = Math.floor(Math.random() * 3 + 1);document.getElementById('pc').innerHTML = s(pc);var str='';if(pc==you){str += 'Trap';}else{var b = pc-you;if(b>0){if(b==1){str += 'Computer Win';}else{str += 'You Win';}}else{b = b*-1;if(b==1){str += 'You win';}else{str += 'Computer win';}}} 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 'stone';}else if(n==2){return 'rag';}else{return 'scissor';}}</script></head><body><div><p>What did you come out? <span id="you">Please select </span></p><p><button id="st" onclick="p(1);">Stone</button></p><p><button id="mb" onclick="p(2);">Train</button></p><p><button id="jz" onclick="p(3);">Scissor</button></p></div><div><p>Computer out? </p><span style="" id="pc"></span></div><div id="cu"></div><div id="la"><button id="agin" onclick="agin()">Do it again</button></div></body></html>