php掷骰子游戏,js实现简单掷骰子小游戏

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

实现方法：

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

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

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

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

掷骰子

.dice {

width: 100px;

height: 100px;

background-image: url(dice_1.jpg);

cursor: pointer;

position: relative;

}

$(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);

});

});

骰子图：

效果图：

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