JQuery&原生js ——实现剪刀石头布小游戏
Posted 白菜白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery&原生js ——实现剪刀石头布小游戏相关的知识，希望对你有一定的参考价值。
| 前言 |
jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。
上一篇博客中，小编给大家展示了jQuery的一大优势，自定义插件。相信这个功能让各位都跃跃欲试，想要制作一个自己的插件了吧！在这里小编祝贺大家在成为大牛的路上向前跨了一步！！今天，小编就实现一个小游戏带大家领略jQuery的最大大优势，相比于原生的简洁，也就是“write Less，Do More”。
| 一、原生JS实现剪刀石头布游戏功能 |
话不多说，直接来代码！
HTML：
1 <body> 2 3 <div id="body"> 4 <div id="tips"> 5 请选择 6 </div> 7 8 <div id="imgs"> 9 <img src="插件/img/jiandao.png" id="jiandao" onclick="jianDao()"class="img1"/> 10 <img src="插件/img/shitou.png" id="shitou" onclick="shiTou()"class="img1"/> 11 <img src="插件/img/bu.png" id="bu" onclick="bU()" class="img1"/> 12 </div> 13 14 <div id="jieguo"> 15 <div class="jieguo"> 16 <div>您选择了</div> 17 <img src="插件/img/daiding.png" id="myImg" /> 18 </div> 19 20 <div class="pk">PK</div> 21 22 <div class="jieguo"> 23 <div>系统选择了</div> 24 <img src="插件/img/daiding.png" id="computer" /> 25 </div> 26 </div> 27 28 <div id="score"> 29 等待结果中.... 30 </div> 31 32 <div id="scoreFen"> 33 <span>00</span>：<span>00</span> 34 </div> 35 </div> 36 </body>
css:
1 <style type="text/css"> 2 *{ 3 margin: 0px; 4 padding: 0px; 5 } 6 7 #body{ 8 width: 100%; 9 height: 700px; 10 max-width: 500px; 11 margin: 0 auto; 12 background-color: #FAE738; 13 overflow: hidden; 14 } 15 16 #tips{ 17 margin-top: 40px; 18 text-align: center; 19 color: white; 20 font-size: 36px; 21 font-weight: bold; 22 } 23 24 #imgs{ 25 width: 90%; 26 margin: 20px auto; 27 display: flex; 28 justify-content: space-around; 29 } 30 31 #jieguo{ 32 width: 90%; 33 margin: 30px auto; 34 display: flex; 35 justify-content: space-around; 36 } 37 38 #jieguo .jieguo div{ 39 height: 30px; 40 width: 89px; 41 line-height: 30px; 42 text-align: center; 43 color: white; 44 } 45 46 #jieguo .jieguo img{ 47 height: 89px; 48 } 49 50 #jieguo .pk{ 51 height: 120px; 52 line-height: 120px; 53 font-size: 48px; 54 font-weight: bold; 55 } 56 57 #score,#scoreFen{ 58 text-align: center; 59 font-size: 24px; 60 color: red; 61 padding-top: 10px; 62 } 63 64 </style>
js:
1 <script src="JS/jquery-3.1.1.js" type="text/javascript"></script>
1 <script type="text/javascript"> 2 3 var jiandao = document.getElementById("jiandao"); 4 var shitou = document.getElementById("shitou"); 5 var bu = document.getElementById("bu"); 6 var myImg = document.getElementById("myImg"); 7 var computer = document.getElementById("computer"); 8 var score = document.getElementById("score"); 9 var scoreFen = document.getElementById("scoreFen"); 10 11 var myScore=0,comScore=0; 12 13 var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"]; 14 console.log(imgs[0]); 15 jiandao.onclick = function(){ 16 var imgSrc = jiandao.getAttribute("src"); 17 18 myImg.setAttribute("src",imgSrc); 19 checkImg(imgSrc); 20 } 21 22 shitou.onclick = function(){ 23 var imgSrc = shitou.getAttribute("src"); 24 myImg.setAttribute("src",imgSrc); 25 checkImg(imgSrc); 26 } 27 28 bu.onclick = function(){ 29 var imgSrc = bu.getAttribute("src"); 30 myImg.setAttribute("src",imgSrc); 31 checkImg(imgSrc); 32 } 33 34 35 function checkImg(imgSrc){ 36 var myIndex = imgs.indexOf(imgSrc); 37 var intervalId = setInterval(function(){ 38 var num = parseInt(Math.random()*3); 39 computer.setAttribute("src",imgs[num]); 40 41 },20); 42 43 setTimeout(function(){ 44 clearInterval(intervalId); 45 var comSrc = computer.getAttribute("src"); 46 var comIndex = imgs.indexOf(comSrc); 47 if(myIndex==comIndex){ 48 score.innerHTML = "平局！再战一轮吧！"; 49 }else if(myIndex==0&&comIndex==2 50 || myIndex==1&&comIndex==0 51 || myIndex==2&&comIndex==1){ 52 score.innerHTML = "赢啦！继续虐他吧！"; 53 myScore++; 54 }else{ 55 score.innerHTML = "输啦！继续努力吧！"; 56 comScore++; 57 } 58 myScore = (myScore+"").length<2?"0"+myScore:myScore+""; 59 comScore = (comScore+"").length<2?"0"+comScore:comScore+""; 60 61 scoreFen.firstElementChild.innerHTML = myScore; 62 scoreFen.lastElementChild.innerHTML = comScore; 63 64 },400); 65 } 66 67 68 69 </script>
结果：
| 石头剪子布秘诀_剪刀石头布必胜技巧 |