编程 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 相关文章推荐

关于IFRAME 自适应高度的研究

Jul 20 Javascript

jQuery使用手册之事件处理

Mar 24 Javascript

Document 对象的常用方法

Jul 31 Javascript

JavaScript中的对象的extensible属性介绍

Dec 30 Javascript

基于jQuery实现搜索关键字自动匹配功能

Mar 26 Javascript

举例说明如何为JavaScript的方法参数设置默认值

Nov 17 Javascript

JS获取子窗口中返回的数据实现方法

May 28 Javascript

解决layui上传文件提示上传异常,实际文件已经上传成功的问题

Aug 19 Javascript

在vue里使用codemirror遇到的问题

Nov 01 Javascript

vue实现页面内容禁止选中功能,仅输入框和文本域可选

Nov 09 Javascript

解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

Jul 21 Javascript

针对Vue路由history模式下Nginx后台配置操作

Oct 22 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