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

innerText和textContent对比及使用介绍

Feb 27 Javascript

Web打印解决方案之证件套打的实现思路

Aug 29 Javascript

如何在Angular2中使用jQuery及其插件的方法

Feb 09 Javascript

又一款MVVM组件构建自己的Vue组件（2）

Mar 13 Javascript

微信小程序图片宽度自适应的实现

Apr 06 Javascript

jQuery序列化后的表单值转换成Json

Jun 16 jQuery

利用Vue实现移动端图片轮播组件的方法实例

Aug 23 Javascript

webpack 插件html-webpack-plugin的具体使用

Apr 09 Javascript

解析Json字符串的三种方法日常常用

May 02 Javascript

详解Vue源码学习之callHook钩子函数

Jul 25 Javascript

vue使用codemirror的两种用法

Aug 27 Javascript

微信小程序接入腾讯地图的两种写法

Jan 12 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