编程 Javascript

js实现掷骰子小游戏

Posted in Javascript onOctober 24, 2019

本文实例为大家分享了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" style="background-color:#CCFFCC">
   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即可运行。

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

js实现掷骰子小游戏

- Author -

senblingbling

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 表单提交后按钮变灰的实例代码

Aug 16 Javascript

javascript与有限状态机详解

May 08 Javascript

JQuery判断radio（单选框）是否选中和获取选中值方法总结

Apr 15 Javascript

javascript实现图片延迟加载方法汇总(三种方法)

Aug 27 Javascript

JavaScript实现自动生成网页元素功能（按钮、文本等）

Nov 21 Javascript

JavaScript设计模式经典之命令模式

Feb 24 Javascript

JavaScript cookie 跨域访问之广告推广

Apr 20 Javascript

Bootstrap3.0学习教程之JS折叠插件

May 27 Javascript

Vue.js组件使用props传递数据的方法

Oct 19 Javascript

JavaScript实现联动菜单特效

Jan 07 Javascript

javascript利用键盘控制小方块的移动

Apr 20 Javascript

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

Apr 27 Javascript

Element-Ui组件 NavMenu 导航菜单的具体使用

Oct 24 #Javascript

js实现GIF动图分解成多帧图片上传

Oct 24 #Javascript

js实现简单掷骰子效果

Oct 24 #Javascript

使用jQuery实现掷骰子游戏

Oct 24 #jQuery

jquery实现掷骰子小游戏

Oct 24 #jQuery

JS控制GIF图片的停止与显示

Oct 24 #Javascript

js计时事件实现圆形时钟

Mar 25 #Javascript