本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下
因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处理,代码量会比用JAVA来做少了非常非常多。考虑到这种实验实在不想浪费时间去用JAVA写,于是有了一下JS实现的版本。但是大家都知道JS的面向对象其实是伪面向对象。我感觉并不好用,因为用句柄的方式无法传值,你封装成对象了还得拆出来成为过程(单一方法)来用。
版本1: (没有用面向对象)
<!DOCTYPE> <html> <head> <title>掷骰子游戏 author:SenDog</title> <meta charset="UTF-8"> <script> 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(); } </script> </head> <body οnlοad="init();"> <canvas id="canvas" width="600" height="300" > your brower is not support html5 </canvas> <input type="button" value="开始" οnclick="clickMe();"/> </body> </html>
版本2,面向对象。但是JS真的很不适合面向对象,这只是伪装面向对象。
输入用户名后, 会吧用户的姓名和摇出的点数和存入cookie中。 cookie只会保存对应用户最高的点数合。如果摇出更高的点数合,旧的就会被替换掉。通过查询按钮可以查询任意姓名的最高点数合记录。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>author:senDog 掷骰子游戏</title> </head> <body> 请输入用户姓名:<input id="userName1" type="text" > <button id="btn" > play </button> 查询用户最高成绩<button id="btn2" >查询 </button> <script language="JavaScript" type="text/javascript"> /*封装骰子类*/ 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<arrCookie.length;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<num3) ck.addCookie(userName1,num3); } 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); </script> </body> </html>
把代码复制到到TXT文档,后缀改为html即可运行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。