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

Jquery图形报表插件 jqplot简介及参数详解

Oct 10 Javascript

在父页面调用子页面的JS方法

Sep 29 Javascript

js格式化时间小结

Nov 03 Javascript

JS版元素周期表实现方法

Aug 05 Javascript

javaScript如何跳出多重循环break、continue

Sep 01 Javascript

js实现自动轮换选项卡

Jan 13 Javascript

JavaScript实现替换字符串中最后一个字符的方法

Mar 07 Javascript

es6 字符串String的扩展(实例讲解)

Aug 03 Javascript

JS设计模式之命令模式概念与用法分析

Feb 06 Javascript

vue.js学习笔记之v-bind和v-on解析

May 03 Javascript

解决vue.js this.$router.push无效的问题

Sep 03 Javascript

vue2之简易的pc端短信验证码的问题及处理方法

Jun 03 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