前言

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. function checkImg(imgSrc){
  35. var myIndex = imgs.indexOf(imgSrc);
  36. var intervalId = setInterval(function(){
  37. var num = parseInt(Math.random()*3);
  38. computer.setAttribute("src",imgs[num]);
  39.  
  40. },20);
  41.  
  42. setTimeout(function(){
  43. clearInterval(intervalId);
  44. var comSrc = computer.getAttribute("src");
  45. var comIndex = imgs.indexOf(comSrc);
  46. if(myIndex==comIndex){
  47. score.innerHTML = "平局!再战一轮吧!";
  48. }else if(myIndex==0&&comIndex==2
  49. || myIndex==1&&comIndex==0
  50. || myIndex==2&&comIndex==1){
  51. score.innerHTML = "赢啦!继续虐他吧!";
  52. myScore++;
  53. }else{
  54. score.innerHTML = "输啦!继续努力吧!";
  55. comScore++;
  56. }
  57. myScore = (myScore+"").length<2?"0"+myScore:myScore+"";
  58. comScore = (comScore+"").length<2?"0"+comScore:comScore+"";
  59.  
  60. scoreFen.firstElementChild.innerHTML = myScore;
  61. scoreFen.lastElementChild.innerHTML = comScore;
  62.  
  63. },400);
  64. }
  65.  
  66. </script>

结果:

二、jQuery实现剪刀石头布

HTML代码与css代码请看上栗,毕竟只是实现功能的方式不用,布局是一样一样滴!

jQuery:

  1. <script type="text/javascript">
  2. $("#imgs>img").click(function(){
  3. checkImg($(this).attr("src"));
  4. });
  5.  
  6. var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"];
  7. function checkImg(imgSrc){
  8. $("#myImg").attr("src",imgSrc);
  9. var id = setInterval(function(){
  10. var num = parseInt(Math.random()*3);
  11. $("#computer").attr("src",imgs[num]);
  12. },20);
  13.  
  14. setTimeout(function(){
  15. clearInterval(id);
  16. var my = imgs.indexOf(imgSrc);
  17. var com = imgs.indexOf($("#computer").attr("src"));
  18. if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){
  19. $("#score").html("恭喜!您赢啦!");
  20. var mf = parseInt($("#scoreFen span:eq(0)").text())+1;
  21. mf = mf<10 ? "0"+mf : mf;
  22. $("#scoreFen span:eq(0)").text(mf);
  23. }else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){
  24. $("#score").html("平局!再战一轮吧!");
  25. }else{
  26. $("#score").html("哈哈哈哈你输啦!!!");
  27. var cf = parseInt($("#scoreFen span:eq(1)").text())+1;
  28. cf = cf<10 ? "0"+cf : cf;
  29. $("#scoreFen span:eq(1)").text(cf);
  30. }
  31. },500);
  32. }
  33. </script>

结果:

三、JS&jQuery

大家从上边的例子也发现了,功能的实现上,原生用了60多行代码,而jQuery则用了30多行代码。少了将近的一般,这只是一个小游戏就有这么大的差距。

现在,小编带大家分析一下其中的原因:

3.1在语法上

1、jQuery在语法上,必须使用jQuery必须先导入JQuery.x.x.x.js文件;这个是必须的,小编就不多说了;

2、JQuery中的选择器:
$("选择器").函数();

原生中:获取节点要用.document.getElementById();

从这里就发现了吧,jQuery的简洁,这也是jQuery相对于原生最体现简洁的地方;

大家从上栗来看个例子:实现图片点击事件,并在下方改变更换图片,也就是替换图片url地址:

JS:

  1. bu.onclick = function(){
  2. var imgSrc = bu.getAttribute("src");
  3. myImg.setAttribute("src",imgSrc);
  4. checkImg(imgSrc);
  5. }

jQuery:

  1. function checkImg(imgSrc){
  2. $("#myImg").attr("src",imgSrc);
  3. }

3.2原生JS对象与JQuery对象

①使用$("")选中的对象是jQuery对象,只能调用jQuery的函数,而不能使用元素js的事件与函数;
    $("#p").click();  √
    $("#p").onclick = function(){}; ×
    
    解释:$("#p")是jQuery对象,.onclick是原生JS事件
    
    同理,使用document.getElement系列获取的原生JS对象,也不能使用jQuery相关函数。
    
    ②原生JS对象转为jQuery对象
    可以使用$()包裹原生JS对象即可转为jQuery对象。
    
    var p = document.getElementsByTagName("p");
    $(p).click();  √  原生JS的对象p已转为jQuery对象;
    
    ③jQuery对象转为原生JS对象。使用.get(index)或[index]:
    $("#p").get(0).onclick = function(){}  √
    $("#p")[0].onclick = function(){}  √

四、作者编

从上边,大家可以看出来了,jQuery真心很简洁而且好用!!但是,不可否认,原生JS真心灰常的强大,毕竟原生就是原生,有着无法取代的地位!只是代码的复杂性确实让我们又爱又恨!

而且,jQuery也是他的一个框架,虽然现在jQuery的地位已经和原生差不多相等了。但是小编提醒大家,一定要学号原生哟!

而且,小编听某位自称浩哥的帅锅说过,程序猿是一种非常懒得生物,所以大神们研究了这么多的框架,重要的是,有了这简单的jQuery,为何不用!

JQuery&原生js ——实现剪刀石头布小游戏的更多相关文章

  1. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  2. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  3. 原生js完成拼图小游戏

    废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  4. 原生js完成打地鼠小游戏

    :这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...

  5. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

  6. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  7. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  8. 使用JS实现2048小游戏

    JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

  9. js实现一个小游戏(飞翔的jj)

    js实现一个小游戏(飞翔的jj) 源代码+素材图片在我的仓库 <!DOCTYPE html> <html lang="en"> <head> & ...

随机推荐

  1. 中了J.Fla的毒!

    中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒!中了J.Fla的毒! ...

  2. [2014-08-18]Mac OSX 命令行快捷键

    系统:OSX 10.9.4 将光标移动到行首:ctrl + a 将光标移动到行尾:ctrl + e 清除屏幕: ctrl + l 搜索以前使用命令:ctrl + r 清除当前行: ctrl + u 清 ...

  3. HDMI转EDP芯片NCS8803简介

    NCS8803 HDMI-to-eDP w/ Scaler Features --Embedded-DisplayPort (eDP) Output 1/2/4-lane eDP @ 1.62/2.7 ...

  4. iOS 环信集成问题(连文档都不说明的坑。。)

    首先,关于环信SDK的下载和一些依赖库的添加,在此我就不做详细介绍,(http://www.easemob.com/download/im)附上环信官网文档,可以看一下,上面都可以下载,也有相关配置介 ...

  5. Oracle数据库只读事务和无事务的区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt382 Oracle默认情况下(没有事务) 保证了SQL语句级别的读一致性,即 ...

  6. 大型网站的 HTTPS 实践(一)—— HTTPS 协议和原理

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt387 1 前言 百度已经于近日上线了全站 HTTPS 的安全搜索,默认会将 ...

  7. GUI记事本+切换面板1.1版

    package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...

  8. 团队作业10——Beta版本事后诸葛亮

    事后诸葛亮分析 1.总结的提纲内容: a. 项目管理之事后诸葛亮会议. 一.设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是教师需要 ...

  9. 201521123042 《java程序设计》 第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. ①泛型定义:泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展, ...

  10. 201521123025《JAVA程序设计》第6周学习总结

    1. 本章学习总结 2. 书面作业 Q1.clone方法 1.1Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 要克隆对象要覆盖clon ...