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

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

版本1： (没有用面向对象)

掷骰子游戏 author:SenDog

var leftX = 150;

var topY = 100;

var diceX = 80;

var diceY = 80;

var dotR = 4;

var count = 0;

var lastNum = 0;

var flag = false;

function clickMe() {

count = 0;

if(flag) {

return false;

}

flag = true;

var ctx = document.getElementById("canvas").getContext('2d');

ctx.beginPath();

// ctx.strokeRect(leftX,topY,diceX,diceY);//绘制矩形 加粗

//ctx.strokeRect(leftX+150,topY,diceX,diceY);

setTimeout(function(){

random(ctx);},200);

}

function drawDice(ctx,randomNum,randomNum2) {//绘制 骰子 123456的点数

ctx.clearRect(leftX,topY,diceX,diceY);

switch(randomNum) {

case 1:

draw1();

break;

case 2:

draw2();

break;

case 3:

draw3();

break;

case 4:

draw4();

break;

case 5:

draw5();

break;

case 6:

draw6();

break;

}

ctx.clearRect(leftX+150,topY,diceX,diceY);

switch(randomNum2) {

case 1:

draw11();

break;

case 2:

draw22();

break;

case 3:

draw33();

break;

case 4:

draw44();

break;

case 5:

draw55();

break;

case 6:

draw66();

break;

}

count++;

if(count>=20) {

if(randomNum+randomNum2==7) {

alert("骰子1："+randomNum+"，骰子2:"+randomNum2+"总和为7您赢了");

}

else {

alert("骰子1："+randomNum+"；骰子2:"+randomNum2);

}

flag = false;

return false;

} else {

setTimeout(function(){

random(ctx);

},200-count);

}

}

function random(ctx) {//生成骰子点数，如果和上一步的点数相同重新生成点数，并绘制

var randomNum = Math.floor(Math.random()*6)+1;

var randomNum2 = Math.floor(Math.random()*6)+1;

if(randomNum == lastNum) {

random(ctx);

} else {

lastNum = randomNum;

drawDice(ctx,randomNum,randomNum2);

}

}

function commonDraw(ctx,dotX,dotY) {

ctx.beginPath();

ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false);

ctx.stroke();

ctx.fill();

}

function draw1() {

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#0000ff";

var dotX = leftX+diceX/2;

var dotY = topY+diceY/2;

commonDraw(ctx,dotX,dotY);

}

function draw2() {

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#99FF66";

var dotX = leftX+4*dotR;

var dotY = topY+4*dotR;

commonDraw(ctx,dotX,dotY);

var dotX = leftX+diceX-4*dotR;

var dotY = topY+diceY-4*dotR;

commonDraw(ctx,dotX,dotY);

}

function draw3() {

draw1();

draw2();

}

function draw4() {

draw2();

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#99CC00";

var dotX = leftX+diceX-4*dotR;

var dotY = topY+4*dotR;

commonDraw(ctx,dotX,dotY);

var dotX = leftX+4*dotR;

var dotY = topY+diceY-4*dotR;

commonDraw(ctx,dotX,dotY);

}

function draw5(){

draw1();

draw4();

}

function draw6(){

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#996633";

var dotX = leftX+4*dotR;

var dotY = topY+diceY/2

commonDraw(ctx,dotX,dotY);

var dotX = leftX+diceY-4*dotR;

commonDraw(ctx,dotX,dotY);

draw4();

}

/* -------------骰子2----------------*/

function draw11() {

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#0000ff";

var dotX = leftX+diceX/2+150;

var dotY = topY+diceY/2;

commonDraw(ctx,dotX,dotY);

}

function draw22() {

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#99FF66";

var dotX = leftX+4*dotR+150;

var dotY = topY+4*dotR;

commonDraw(ctx,dotX,dotY);

var dotX = leftX+diceX-4*dotR+150;

var dotY = topY+diceY-4*dotR;

commonDraw(ctx,dotX,dotY);

}

function draw33() {

draw11();

draw22();

}

function draw44() {

draw22();

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#99CC00";

var dotX = leftX+diceX-4*dotR+150;

var dotY = topY+4*dotR;

commonDraw(ctx,dotX,dotY);

var dotX = leftX+4*dotR+150;

var dotY = topY+diceY-4*dotR;

commonDraw(ctx,dotX,dotY);

}

function draw55(){

draw11();

draw44();

}

function draw66(){

var ctx = document.getElementById("canvas").getContext('2d');

ctx.fillStyle="#996633";

var dotX = leftX+150+4*dotR;

var dotY = topY+diceY/2

commonDraw(ctx,dotX,dotY);

var dotX = leftX+150+diceY-4*dotR;

commonDraw(ctx,dotX,dotY);

draw44();

}

function init() {

var ctx = document.getElementById("canvas").getContext('2d');

ctx.beginPath();

ctx.strokeRect(leftX,topY,diceX,diceY);//绘制灰色框框 第一个骰子

ctx.strokeRect(leftX+150,topY,diceX,diceY);//第二个骰子的灰色框框

ctx.stroke();

draw6();

draw66();

}

your brower is not support html5

版本2，面向对象。但是JS真的很不适合面向对象，这只是伪装面向对象。

输入用户名后， 会吧用户的姓名和摇出的点数和存入cookie中。 cookie只会保存对应用户最高的点数合。如果摇出更高的点数合，旧的就会被替换掉。通过查询按钮可以查询任意姓名的最高点数合记录。

author:senDog 掷骰子游戏

请输入用户姓名：

play

查询用户最高成绩查询

/*封装骰子类*/

function shaizi(){

var num = parseInt(1+Math.random()*5);

return{

"getNum":function(){

return num;

},

"alertNum":function(){

alert("骰子点数："+num);

}

};

}

var s1 = new shaizi();

var s2 = new shaizi();

var x = document.getElementById("btn");

x.addEventListener("click",s1.alertNum);

x.addEventListener("click",s2.alertNum);

/*封装cookie类*/

function cookie(){

return{

/*把总点数存入客户端浏览器cookie，并设置每次关闭浏览器cookie消失*/

"addCookie":function(userName,num3){

var str = userName + "=" + escape(num3);

document.cookie = str;

//alert("str:"+str);

},

"getCookie":function(userName){//获取指定名称的cookie的值

var strCookie=document.cookie;

var arrCookie=strCookie.split("; ");

for(var i=0;i

var arr=arrCookie[i].split("=");

if(arr[0]==userName)return arr[1];

}

return "";

}

}

}

var ck = new cookie();

/*记录用户最高总点数，存入cookie，然后可以通过查询用户名查出用户最高点数的记录*/

function readName(){

userName1 = document.getElementById("userName1").value;

}

function ckSet(){

var num1=s1.getNum();

var num2 = s2.getNum();

num3 = num1+num2;

var n = ck.getCookie(userName1);

if(n!=null && n

}

function ckGetName(){

// var userName1 = document.getElementById("userName1").value;

alert("username:"+userName1);

}

function ckGetNum(){

//var userName1 = document.getElementById("userName1").value;

var num=ck.getCookie(userName1);

alert("用户最高总点数:"+num);

}

x.addEventListener("click",readName);

x.addEventListener("click",ckSet);

x.addEventListener("click",ckGetName);

x.addEventListener("click",ckGetNum);

var y = document.getElementById("btn2");

y.addEventListener("click",readName);

y.addEventListener("click",ckGetName);

y.addEventListener("click",ckGetNum);

把代码复制到到TXT文档，后缀改为html即可运行。

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