JQuery&原生js ——实现剪刀石头布小游戏

前言

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

上一篇博客中,小编给大家展示了jQuery的一大优势,自定义插件。相信这个功能让各位都跃跃欲试,想要制作一个自己的插件了吧!在这里小编祝贺大家在成为大牛的路上向前跨了一步!!今天,小编就实现一个小游戏带大家领略jQuery的最大大优势,相比于原生的简洁,也就是“write Less,Do More”。

一、原生JS实现剪刀石头布游戏功能

话不多说,直接来代码!

HTML:

 <body>

         <div id="body">
<div id="tips">
请选择
</div> <div id="imgs">
<img src="插件/img/jiandao.png" id="jiandao" onclick="jianDao()"class="img1"/>
<img src="插件/img/shitou.png" id="shitou" onclick="shiTou()"class="img1"/>
<img src="插件/img/bu.png" id="bu" onclick="bU()" class="img1"/>
</div> <div id="jieguo">
<div class="jieguo">
<div>您选择了</div>
<img src="插件/img/daiding.png" id="myImg" />
</div> <div class="pk">PK</div> <div class="jieguo">
<div>系统选择了</div>
<img src="插件/img/daiding.png" id="computer" />
</div>
</div> <div id="score">
等待结果中....
</div> <div id="scoreFen">
<span>00</span>:<span>00</span>
</div>
</div>
</body>

css:

 <style type="text/css">
*{
margin: 0px;
padding: 0px;
} #body{
width: 100%;
height: 700px;
max-width: 500px;
margin: 0 auto;
background-color: #FAE738;
overflow: hidden;
} #tips{
margin-top: 40px;
text-align: center;
color: white;
font-size: 36px;
font-weight: bold;
} #imgs{
width: 90%;
margin: 20px auto;
display: flex;
justify-content: space-around;
} #jieguo{
width: 90%;
margin: 30px auto;
display: flex;
justify-content: space-around;
} #jieguo .jieguo div{
height: 30px;
width: 89px;
line-height: 30px;
text-align: center;
color: white;
} #jieguo .jieguo img{
height: 89px;
} #jieguo .pk{
height: 120px;
line-height: 120px;
font-size: 48px;
font-weight: bold;
} #score,#scoreFen{
text-align: center;
font-size: 24px;
color: red;
padding-top: 10px;
} </style>

js:

 <script src="JS/jquery-3.1.1.js" type="text/javascript"></script>
   <script type="text/javascript">

         var jiandao = document.getElementById("jiandao");
var shitou = document.getElementById("shitou");
var bu = document.getElementById("bu");
var myImg = document.getElementById("myImg");
var computer = document.getElementById("computer");
var score = document.getElementById("score");
var scoreFen = document.getElementById("scoreFen"); var myScore=0,comScore=0; var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"];
console.log(imgs[0]);
jiandao.onclick = function(){
var imgSrc = jiandao.getAttribute("src"); myImg.setAttribute("src",imgSrc);
checkImg(imgSrc);
} shitou.onclick = function(){
var imgSrc = shitou.getAttribute("src");
myImg.setAttribute("src",imgSrc);
checkImg(imgSrc);
} bu.onclick = function(){
var imgSrc = bu.getAttribute("src");
myImg.setAttribute("src",imgSrc);
checkImg(imgSrc);
} function checkImg(imgSrc){
var myIndex = imgs.indexOf(imgSrc);
var intervalId = setInterval(function(){
var num = parseInt(Math.random()*3);
computer.setAttribute("src",imgs[num]); },20); setTimeout(function(){
clearInterval(intervalId);
var comSrc = computer.getAttribute("src");
var comIndex = imgs.indexOf(comSrc);
if(myIndex==comIndex){
score.innerHTML = "平局!再战一轮吧!";
}else if(myIndex==0&&comIndex==2
|| myIndex==1&&comIndex==0
|| myIndex==2&&comIndex==1){
score.innerHTML = "赢啦!继续虐他吧!";
myScore++;
}else{
score.innerHTML = "输啦!继续努力吧!";
comScore++;
}
myScore = (myScore+"").length<2?"0"+myScore:myScore+"";
comScore = (comScore+"").length<2?"0"+comScore:comScore+""; scoreFen.firstElementChild.innerHTML = myScore;
scoreFen.lastElementChild.innerHTML = comScore; },400);
} </script>

结果:

JQuery&原生js ——实现剪刀石头布小游戏

二、jQuery实现剪刀石头布

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

jQuery:

 <script type="text/javascript">
$("#imgs>img").click(function(){
checkImg($(this).attr("src"));
}); var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"];
function checkImg(imgSrc){
$("#myImg").attr("src",imgSrc);
var id = setInterval(function(){
var num = parseInt(Math.random()*3);
$("#computer").attr("src",imgs[num]);
},20); setTimeout(function(){
clearInterval(id);
var my = imgs.indexOf(imgSrc);
var com = imgs.indexOf($("#computer").attr("src"));
if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){
$("#score").html("恭喜!您赢啦!");
var mf = parseInt($("#scoreFen span:eq(0)").text())+1;
mf = mf<10 ? "0"+mf : mf;
$("#scoreFen span:eq(0)").text(mf);
}else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){
$("#score").html("平局!再战一轮吧!");
}else{
$("#score").html("哈哈哈哈你输啦!!!");
var cf = parseInt($("#scoreFen span:eq(1)").text())+1;
cf = cf<10 ? "0"+cf : cf;
$("#scoreFen span:eq(1)").text(cf);
}
},500);
}
</script>

结果:

JQuery&原生js ——实现剪刀石头布小游戏

三、JS&jQuery

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

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

3.1在语法上

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

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

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

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

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

JS:

 bu.onclick = function(){
var imgSrc = bu.getAttribute("src");
myImg.setAttribute("src",imgSrc);
checkImg(imgSrc);
}

jQuery:

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

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,为何不用!

上一篇:Mac上git的安装配置与使用简述


下一篇:基于mysql的一些sql语法