js实现简单掷骰子小游戏

本文实例为大家分享了js掷骰子小游戏的具体代码，供大家参考，具体内容如下

实现方法：

方法一：通过background-position、background-image、backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换。

PS：调整background-position比较麻烦，由于背景是一张包含各个点数以及旋转时骰子的整图

方法二：设置定时调整css样式background-image。

PS：实现简单，但是视觉效果不佳

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>掷骰子</title>
 <style type="text/css">
  .dice {
   width: 100px;
   height: 100px;
   background-image: url(dice_1.jpg);
   cursor: pointer;
   position: relative;
  }
 </style>
</head>
<body>
<div class="dice"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
  let dice = $(".dice");
  dice.on('click',function(){
   dice.css('cursor', 'default');
   let num =Math.ceil(Math.random()*6);
   console.log(num);
   dice.css('background-image', 'url(dice_f.jpg)');
   setTimeout(function(){
    dice.css('background-image', 'url(dice_s.jpg)');
   },200);
   setTimeout(function(){
    dice.css('background-image', 'url(dice_t.jpg)');
   },200);
   setTimeout(function(){
    dice.css('background-image', 'url(dice_'+num+'.jpg)')
   }, 200);
  });

 });
</script>
</body>
</html>

骰子图：

效果图：

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

赞 (0)

相关推荐

  • js实现简单掷骰子效果

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

  • js实现转动骰子模型

    本文创建了一个自动随机生成骰子数的模型,因为需要引入图片这里将图片省去了,自己导入图片即可验证代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--创建对象--> <div id="c1"> <img src=&qu

  • JS实现简单随机3D骰子

    JS实现简单随机3D骰子

    本文实例为大家分享了JS实现简单随机3D骰子的具体代码,供大家参考,具体内容如下 描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

  • js实现掷骰子小游戏

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

  • js实现简单掷骰子小游戏

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

  • 利用pixi.js制作简单的跑酷小游戏

    利用pixi.js制作简单的跑酷小游戏

    目录 前言 项目地址 demo地址 初始化项目 主要逻辑 useParkour useScene useHurdle Player 前言 此项目使用pixi.js和vue实现,部分素材来自爱给网,本项目仅作用于 pixi.js 学习用途,侵权立删. 项目地址 shellingfordly/pixi-games demo地址 pixi-games 初始化项目 使用vite初始化项目 pnpm create vite my-vue-app 安装pixi.js和pixi-tweener pixi-tw

  • jquery实现掷骰子小游戏

    jquery实现掷骰子小游戏

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

  • 原生js实现简单贪吃蛇小游戏

    原生js实现简单贪吃蛇小游戏

    本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 先上图 话不多说,代码奉上,喜欢的请留下你的小星星♥(ˆ◡ˆԅ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

  • JS实现简单贪吃蛇小游戏

    本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.使用语言 HTML+CSS+JavaScript 2.使用工具 visual studio code 3.GitHub项目地址:贪吃蛇 4.项目运行截图: 5.项目功能分析:主要使用数组来存储蛇的位置,地图和蛇都是一个二维数组,对于有蛇的地方,地图的CSS就会发生改变,同时添加了添加了一个音乐播放按钮,通过CSS动画实现旋转. 6.项目代码:(项目代码有详细的注释) snake.html <!-- * @Auth

  • Java实现的简单掷骰子游戏示例

    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,

  • 教你用Js写一个简单的五子棋小游戏

    教你用Js写一个简单的五子棋小游戏

    目录 棋盘绘制 棋子的绘制 在点击 canvas 的时候获取相对于棋盘数据的坐标点 是否结束 悔棋功能 总结 这里的五子棋只做一些基础的功能,对于相对专业的规则不做处理. 那么该五子棋实现的规则和功能如下: 整体功能采用canvas实现 行列都规定 20 个数量,那么棋子的行列数量是 20 + 1 棋盘数据采用稀疏数组格式 棋子:0 为黑色,1 为白色 可以悔棋 胜负结束判断 棋盘绘制 <template> <div class="gobang"> <ca

  • C#实现简单飞行棋小游戏

    C#实现简单飞行棋小游戏

    本文实例为大家分享了C#实现简单飞行棋小游戏的具体代码,供大家参考,具体内容如下 目标:实现飞行棋游戏基础功能 玩家在地图触发道具: 1.获得道具,可以进行一次选择 1–交换位置 2–让对方退随机格子 2.踩到炸弹,让对方暂停一回合 3.乘上了飞机,前进10格 4.进入隧道,将随机从其他隧道口出来 using System; namespace FXQGame { class Program { //储存地图数组 static int[] mMaps = new int[120]; //储存两个

随机推荐