php掷骰子小游戏代码,js实现掷骰子小游戏

本文实例为大家分享了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即可运行。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值