登录
当前位置： 首页 > 编程笔记 >

js实现掷骰子小游戏

漆雕恺
2023-03-14
本文向大家介绍js实现掷骰子小游戏，包括了js实现掷骰子小游戏的使用技巧和注意事项，需要的朋友参考一下

本文实例为大家分享了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即可运行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • 掷骰子游戏骰子掷在infinte循环中

    我试图为一个游戏的掷骰子程序，其中用户输入一个下注金额和2个六面骰子滚动，如果7或11是滚动，他们赢了。如果掷2,3或12就输了，如果掷其他任何一个数字，它就显示该数字为一个点。它会继续掷骰子，直到掷7或该点为止，如果掷7就输了，否则就赢了。出于某种原因，在掷骰子时，他会掷骰子，然后再掷一次，看看他们是否赢了或输了。我不知道如何解决这个问题，任何帮助都不会附带

  • 掷骰子游戏问题

    代码的目的是让两个玩家掷一对骰子。第一个掷出20分的玩家赢得比赛。我很难弄清楚如何正确地跟踪滚动的总和；它只给我当前回合的总和，然后当每个玩家滚动10次时游戏就结束了。 我如何正确地计算每个玩家游戏的总和，然后当其中一个玩家的总和等于20时停止循环？

  • 爪哇掷骰子游戏

    程序在最后未能计算出正确的和。我做错了什么？如有任何帮助，不胜感激。谢了。

  • C++骰子游戏模拟掷两个骰子

    我是一个C++初学者，我需要创建一个骰子游戏模拟掷两个骰子。我对头文件的使用感到很困惑。但首先，为什么我需要返回骰子的票面号码？其次，int roll函数做什么？来重置价值观和面孔？如果是，默认值是多少？而最后一个函数骰子（int n）,我是否使用这个函数来控制骰子值的最大总和？函数必须有一个具有以下函数的类头文件：

  • Java编写掷骰子游戏

    本文向大家介绍Java编写掷骰子游戏，包括了Java编写掷骰子游戏的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接奔主题。 **多线程&&观察者模式 题目要求：《掷骰子》窗体小游戏，在该游戏中，玩家初始拥有1000的金钱，每次输入押大还是押小，以及下注金额，随机3个骰子的点数，如果3个骰子的总点数小于等于9，则开小，否则开大，然后判断玩家是否押对，如果未押对则扣除下注金额，如果押对则奖

  • Android实现掷骰子效果

    本文向大家介绍Android实现掷骰子效果，包括了Android实现掷骰子效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android实现掷骰子效果的具体代码，供大家参考，具体内容如下 利用handler接受子线程的消息完成骰子点数的不断更替 演示 START:开始游戏 STOP:停止游戏 RECOVER:重置色子到初始状态 代码 以上就是本文的全部内容，希望对大家的学习有所帮

  • 掷骰子值

    我正在用java创建一个掷骰子的应用程序。我有一个掷骰子的“骰子”类，和一个使用“骰子”的多个实例变量的“骰子”类。但是，它只为我的值返回0。骰子类本身可以工作，并且会掷出一个随机数，但是我不知道如何在我的“骰子”类中得到多个掷骰子。感谢任何帮助。 骰子类 模具等级

  • C中的掷骰子游戏--计胜负

    谁能告诉我代码出了什么问题吗？

相关阅读

Python实现国外赌场热门游戏Craps（双骰子）C++实现推箱子小游戏java实现五子棋小游戏JavaScript实现五子棋小游戏js实现超级玛丽小游戏

相关文章

网易小语种游戏海外运营实习岗面经游族游戏策划实习生面筋米哈游游戏测试暑期实习Python 制作小鸟管道游戏游戏策划一些小心得

相关问答

C中的掷骰子游戏--计胜负Java骰子游戏-选择谁开始一个基于掷骰子和轮流的游戏龙与地下城掷骰子再掷2人掷骰子输入骰子游戏：保留个人骰子

相关工具

摇骰子推箱子游戏五子棋游戏挂机放置类小游戏简单的推箱子游戏

相关文档

实用 gcc 小技巧Redis 设计与实现GitHub 漫游指南如何实现自己的 jQuery常用算法实现方法
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.