jquery实现掷骰子小游戏

2024-12-05 03:43:51

本篇给大家分享一个很好玩的掷骰子游戏，当点击“掷筛子”按钮时张三和李四两人同时掷出筛子，在各自的文本框中会显示出各自掷出筛子的大小，并且会在第三个文本框中比较出两人点数的大小，并显示出获胜方，若两人点数一样，会显示平局。当点击“不玩了”按钮时，会清空所有文本框中的数据，回归初始。

效果图：

源码：

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>掷骰子游戏</title>
 <script type="text/javascript" src="jquery.1.12.4.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $("button:eq(0)").click(function(){
  var num1 = parseInt((Math.random() * 6))+1;
  var num2 = parseInt((Math.random() * 6))+1;

  $("input:eq(0)").val(num1);
  $("input:eq(1)").val(num2);

   if(num1>num2){
   $("input:eq(2)").val("张三");
   }else if(num1<num2){
   $("input:eq(2)").val("李四");
   }else{
   $("input:eq(2)").val("平局");
   }

  });
  $("button:eq(1)").click(function(){
  $("input:eq(0)").val("");
  $("input:eq(1)").val("");
  $("input:eq(2)").val("");
  });
 });

 </script>
</head>
<body>
 <div style="width: 500px;height:500px;margin: auto">
 <div>张三的骰子<input type="text"></div><br>
 <div>李四的骰子<input type="text"></div><br>
 <div style="margin-left: 32px;">获胜者<input type="text" style="width: 100px"></div><br>
 <button>掷筛子</button>
 <button style="margin-left: 150px">不玩了</button>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现简单掷骰子效果

本案例要实现的掷骰子效果: 点击按钮,使骰子转动起来,转动随机时间之后,自动停止在某一个点数上. 思路: 点击按钮之后,将原本静态的骰子图片替换为一个动态转动的gif图片: 创建定时器,实现随机时间之后,动态的图片随机替换为1~6点图片的任意一张图片. 注意: 1.要考虑用户点击一次按钮后再连续多次点击按钮的情况. 2.为了防止不必要的问题,需要设置使定时器执行完毕一次之后,再点击按钮才有效. 3.这里设置了一个开关: 用户点击按钮时,先判断开关是否关闭,如未关闭,可执行函数内容: 若开关已关闭
js实现简单掷骰子小游戏

本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下实现方法: 方法一:通过background-position.background-image.backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换. PS:调整background-position比较麻烦,由于背景是一张包含各个点数以及旋转时骰子的整图方法二:设置定时调整css样式background-image. PS:实现简单,但是视觉效果不佳 <!DOCTYPE
js实现掷骰子小游戏

本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处理,代码量会比用JAVA来做少了非常非常多.考虑到这种实验实在不想浪费时间去用JAVA写,于是有了一下JS实现的版本.但是大家都知道JS的面向对象其实是伪面向对象.我感觉并不好用,因为用句柄的方式无法传值,你封装成对象了还得拆出来成为过程(单一方法)来用. 版本1: (没有用面向对象) <!DOCT
使用jQuery实现掷骰子游戏

本文实例为大家分享了jQuery实现掷骰子游戏的具体代码,供大家参考,具体内容如下直接新建一个html页面,需要在head中引入jquery,js,一些css代码以及js代码,如下: <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <style type=text/css > .wrap{width:90px; height:90px; mar
jquery实现掷骰子小游戏

本篇给大家分享一个很好玩的掷骰子游戏,当点击"掷筛子"按钮时张三和李四两人同时掷出筛子,在各自的文本框中会显示出各自掷出筛子的大小,并且会在第三个文本框中比较出两人点数的大小,并显示出获胜方,若两人点数一样,会显示平局.当点击"不玩了"按钮时,会清空所有文本框中的数据,回归初始. 效果图: 源码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">
JQuery手速测试小游戏实现思路详解

(-1)写在前面我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt
jQuery实现数字华容道小游戏(实例代码)

<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{
jQuery实现弹弹球小游戏

本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码,供大家参考,具体内容如下效果展示: CSS样式: #box { width: 600px; height: 650px; border: 5px solid rgb(245, 164, 96); position: relative; left: 500px; top: 50px; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff),to(rgba(0,
python实现一个摇骰子小游戏

目录一.程序实现二.程序优化总结一.程序实现分析问题:骰子比大小是我们经常玩的一个小游戏也十分的简单,就是不同玩家骰子点数比较大小. 编写程序: #骰子比大小 import random as r #引入random库 peopel = input("请输入游戏人数:") #游戏人数 if 2 <= eval(peopel) <=6: #判断游戏人数是否符合设定 list_pl = {} #创建空字典,用于存储玩家及其获得的点数 list_numerb = []
基于jquery实现九宫格拼图小游戏

九宫格拼图小游戏是小时候比较常见的小游戏之一.闲着无聊就用js简单写了一个. 游戏的玩法很简单.九宫格中有八个小图片.随机打乱之后,将八张小图片拼接成一个完整的图. html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <style> body{ border: 0; } .out{ width: 606px; height: 606px; margin: 0 aut
jQuery实现飞机大战小游戏

本文实例为大家分享了jQuery实现飞机大战的具体代码,供大家参考,具体内容如下游戏规则: WSAD键控制大飞机移动方向,按下J键可发射子弹消灭敌机,每歼灭一架敌机可得10分: 与敌机相撞或者有遗漏敌机没有歼灭,则游戏结束游戏显示如下图: css部分: <style> .container { width: 800px; height: 500px; margin: 10vh auto; background: #000; position: relative; overflow: hid

jquery实现掷骰子小游戏

相关推荐

随机推荐