通过游戏认识 --- JQuery与原生JS的差异

最新推荐文章于 2025-08-07 21:48:39 发布

weixin_30469895

最新推荐文章于 2025-08-07 21:48:39 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 游戏设计模式 ViewUI

原文链接：http://www.cnblogs.com/2502778498spw/p/7860854.html

本文通过一个剪刀石头布的小游戏，展示了如何使用原生JavaScript实现简单的网页互动功能。从HTML布局到CSS样式，再到JavaScript逻辑处理，一步步介绍了整个游戏的开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

今天，影子就通过一个小游戏，剪刀石头布，来给大家介绍下，两者之间的区别。

1、原生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 =