使用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; margin:120px auto 30px auto; position:relative}
.dice{width:90px; height:90px; background:url(dice.png) no-repeat;}
.dice_1{background-position:-5px -4px}
.dice_2{background-position:-5px -107px}
.dice_3{background-position:-5px -212px}
.dice_4{background-position:-5px -317px}
.dice_5{background-position:-5px -427px}
.dice_6{background-position:-5px -535px}
.dice_t{background-position:-5px -651px}
.dice_s{background-position:-5px -763px}
.dice_e{background-position:-5px -876px}
p#result{text-align:center; font-size:16px}
p#result span{font-weight:bold; color:#f30; margin:6px}
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute;
top:0; left:0; z-index:999}
</style>
<script>
$(function(){
var dice = $("#dice");
dice.click(function(){
dice.attr("class","dice");//清除上次动画后的点数
dice.css("cursor","default");
$(".wrap").append("<div id='dice_mask'></div>");//加遮罩
var num = Math.floor(Math.random()*6+1);//产生随机数1-6
dice.animate({left: '+2px'}, 100,function(){
dice.addClass("dice_t");
}).delay(200).animate({top:'-2px'},100,function(){
dice.removeClass("dice_t").addClass("dice_s");
}).delay(200).animate({opacity: 'show'},600,function(){
dice.removeClass("dice_s").addClass("dice_e");
}).delay(100).animate({left:'-2px',top:'2px'},100,function(){
dice.removeClass("dice_e").addClass("dice_"+num);
$("#result").html("您掷得点数是<span>"+num+"</span>");
dice.css('cursor','pointer');
$("#dice_mask").remove();//移除遮罩
});
});
});
</script>
其中要注意的jquery引入的路径，我是放在和该页面的相同路径下的。
页面body的代码如下:
<body> <div id="dice" class="dice dice_1"></div> <p id="result">请直接点击上面的色子！</p> </body>
需要额外的引入所有状态骰子的图片，注意图片名称
主要实现的基本原理就是在初始图片上添加点击事件，当点击发生的时候随机取数，然后根据数值去找dice.png这张图片对应骰子的位置
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery实现掷骰子小游戏
本篇给大家分享一个很好玩的掷骰子游戏,当点击"掷筛子"按钮时张三和李四两人同时掷出筛子,在各自的文本框中会显示出各自掷出筛子的大小,并且会在第三个文本框中比较出两人点数的大小,并显示出获胜方,若两人点数一样,会显示平局.当点击"不玩了"按钮时,会清空所有文本框中的数据,回归初始. 效果图: 源码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">
-
js实现掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处理,代码量会比用JAVA来做少了非常非常多.考虑到这种实验实在不想浪费时间去用JAVA写,于是有了一下JS实现的版本.但是大家都知道JS的面向对象其实是伪面向对象.我感觉并不好用,因为用句柄的方式无法传值,你封装成对象了还得拆出来成为过程(单一方法)来用. 版本1: (没有用面向对象) <!DOCT
-
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
-
使用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
-
Java编写掷骰子游戏
废话不多说了,直接奔主题. **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰子的总点数小于等于9,则开小,否则开大,然后判断玩家是否押对,如果未押对则扣除下注金额,如果押对则奖励和玩家下注金额相同的金钱. 分析:这个题目要求灵活运用多线程的相关知识,达到点击开始按钮时,有3个线程启动,分别控制3颗骰子的转动,在3颗骰子全部转完以后,回到主线程计算游戏结果. //个
-
Java实现的简单掷骰子游戏示例
本文实例讲述了Java实现的简单掷骰子游戏.分享给大家供大家参考,具体如下: 要求: 掷两个骰子,每个骰子有六面, 分别为1.2.3.4.5.6.检查这两个骰子的和. 如果为2.3或12你就输了:如果和是7或者11你就赢了. 但如果和是其他数字(例如4.5.6.8.9或者10), 就确定了一个点.继续掷骰子直至抛出一个7或者 掷出和刚才相同的点数.如果掷出的是7,你就输了. 如果掷出的点数和你前一次掷出的点数相同, 你就赢了. java实现代码: enum Status { Win, Lose,
-
Python使用random模块实现掷骰子游戏的示例代码
引入内容 根据人民邮电出版社出版的<Python程序设计现代设计方法>P102习题中的第7题--掷骰子游戏,进行代码编写. 题目要求 一盘游戏中,两人轮流掷骰子5次,并将每次掷出的点数累加,5局之后,累计点数较大者获胜,点数相同则为平局.根据此规则实现掷骰子游戏,并算出50盘之后的胜利者( 50盘中嬴得盘数最多的,即最终胜利者). 审题: 共有50盘游戏.一盘游戏有5局,每一局双方各掷骰子一次,5局结束以后统计分数,分数高的一方获胜.至此,一盘游戏结束.50盘游戏结束后,赢得盘数最多的一方为最
-
C语言模拟掷骰子游戏
目录 实现掷骰子小游戏 实现原理 源码介绍 效果展示 今日练习 题目描述 问题分析 代码实现 运行结果 实现掷骰子小游戏 在开始今天的练习前,我先写一个有趣的C语言小游戏--掷骰子(zhì tóu zi) 实现原理 大家对骰子应该不陌生,让我们先看看百度词条的介绍: 掷骰子 拼音:zhì tóu zi 骰子: 既色子,用象牙.骨头或塑料等较坚硬物体做的小四方块:每面刻有点数,一到六,常用一对做各种游戏或赌博. 掷骰子:先摇动骰子,然后抛掷使两个骰子都随意停止在一平面上. --百度百科 掷骰子时,
-
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
本文实例讲述了php实现的中秋博饼游戏之掷骰子并输出结果功能.分享给大家供大家参考,具体如下: 前面讲述了php实现的中秋博饼游戏之绘制骰子图案功能,纯php实现,就要用php来生成图案,第一步就先绘制骰子图案.下面就是编码实现业务逻辑,具体代码如下: <?php class roll { private $_defRank = 'lk'; public function lottery() { $dice = $this->rollDice(); $format = $this->fo
-
Android实现掷骰子效果
本文实例为大家分享了Android实现掷骰子效果的具体代码,供大家参考,具体内容如下 利用handler接受子线程的消息完成骰子点数的不断更替 演示 START:开始游戏 STOP:停止游戏 RECOVER:重置色子到初始状态 代码 package com.example.homeworkten; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.