首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js结合html5制作简易的双色子游戏

Posted in Javascript onMarch 30, 2015

想转html5游戏开，这是学习练手的东西，最开始是用面向过程的方式实现，后面用面向对象的方式实现(被坑了)……

演示地址:http://runjs.cn/detail/ss8pkzrc

html代码

<html>
  <head>
    <meta charset="utf-8"/>
    <title>掷色子的游戏</title>
  </head>
  <body>
    <table>
      <tr>
        <td align="center">
          <canvas id="game" width="400" height="300" style="border:1px solid #c3c3c3">
            你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！
          </canvas><br/>
          <input id="button" type="button" onclick="javascript:stage.play();" value="开始掷骰子"/>
        </td>
        <td>
          游戏规则：<br/>
          1、一个玩家、两个色子，每个色子有1-6个点，点数随机出现，点数是2-12中的任意数字<br/>
          2、如果玩家第一次抛出 7 或者 11，则本回合胜利 进行下一回合<br/>
          3、如果玩家抛出2、3、12 则回合失败 进行下一回合<br/>
          4、抛出其他数字4、5、6、7、8、9、10 记录点数和，并继续掷色子<br/>
          5、当玩家掷出7 则本回合失败 进行下一回合<br/>
          6、当玩家抛出的点数和与上一次的相同，本局胜利 进行下一回合<br/>
          7、当玩家抛出的点数和与上一次的不同，本局失败，进行下一回合<br/>
          后期扩展：<br/>
          这个游戏有押注和积分的功能，尚无思路，所以没有实现<br/>
           
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div id="log"></div>
        </td>
      </tr>
    </table>
    <br/>
    <script>
      /**
        游戏规则：
          一个玩家、两个色子，每个色子有1-6个点，点数随机出现，点数是2-12中的任意数字
          如果玩家第一次抛出 7 或者 11，则本回合胜利 进行下一回合
          如果玩家抛出2、3、12 则回合失败 进行下一回合
          抛出其他数字4、5、6、7、8、9、10 记录点数和，并继续掷色子
          当玩家掷出7 则本回合失败 进行下一回合
          当玩家抛出的点数和与上一次的相同，本局胜利 进行下一回合
          当玩家抛出的点数和与上一次的不同，本局失败，进行下一回合
           
        game:{游戏对象
           
        }
        Stage={场景对象
          add(thing) //添加一个物件
          addEvent(type,handler)
          redraw() //重绘所有thing对象
        }
        Thing = {//物件对象
          draw(canvas)//传入一个canvas画板对象用于绘制thing
          isScope(x,y) //传入鼠标相对于canvas的位置，返回boolean，
                 //用于判断鼠标是否在thing的范围 true在，false不在
          addEvent(type,handler) //公开方法 //给物件设置时间
        }
         
        定义我们自己的场景对象
        掷色子的场景内需要：
          1、两个色子 色子一号 色子二号
          2、一个公告板 显示本局信息
          3、三个按钮 重现开始 
      **/
       
      function Stage(canvas){
        this.canvas = document.getElementById(canvas);
        this.ctx = this.canvas.getContext('2d');
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = 'rgb(255,0,0)';
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.things = [];
        this.addEvent = [];
        this.rule = {};
      }
      Stage.prototype.setings = function(){};
      Stage.prototype.draw = function(){
        for(var thing in this.things){
          if(this.things[thing] instanceof Array){
            for(var i=0;i<this.things[thing].length;i++){
              this.things[thing][i].init();
            }
          }
        }
      }
      Stage.prototype.add = function(thing){
        if(!thing){return;}
        if(this.things['disc'] == undefined){
          this.things['disc'] = [];
        }
        if(this.things['callBoard'] == undefined){
          this.things['callBoard'] = [];
        }
        if(thing instanceof Disc){
          this.things['disc'].push(thing);
        }
        if(thing instanceof CallBoard){
          this.things['callBoard'].push(thing);
        }
      }
      Stage.prototype.play = function(){
        this.clean();
        for(var i=0;i<this.things['disc'].length;i++){
          this.things['disc'][i].random_porints();
        }
        this.rule.init(this);
        this.rule.run();
        this.log();
        if(!this.rule.hasNext){
          var self = this;
          document.getElementById('button').onclick = function(){
            self.redraw();
          }
          document.getElementById('button').value = '重置游戏';
        }else{
          document.getElementById('button').value = '再抛一次';
        }
      }
      Stage.prototype.redraw = function(){
        this.clean();
        this.things = {};
        this.setings();
        var self = this;
        document.getElementById('button').onclick = function(){
          self.play();
        }
        document.getElementById('button').value = '开始掷骰子';
      }
      Stage.prototype.log = function(){
        var html = document.getElementById('log').innerHTML;
        var tmp = this.rule.notice1.str +' '+ this.rule.notice2.str +' '+ this.rule.notice3.str +'  ';
        tmp += (this.rule.integral.length > 0 ? ('上一次点数[<font color="red">'+this.rule.integral.join(',')+'</font>]'):'')+this.rule.hasNext+'<br/>';
        document.getElementById('log').innerHTML = html + tmp;
      }
      Stage.prototype.clean = function(){
        for(var i=0;i<this.things['disc'].length;i++){
          this.things['disc'][i].clean();
        }
        for(var i=0;i<this.things['callBoard'].length;i++){
          this.things['callBoard'][i].clean();
        }
      }
      function Disc(x,y,stage){
        this.x = x;
        this.y = y;
        this.stage = stage;
        this.init();
      }
      Disc.prototype.init = function(){
        this.width = 170;
        this.height = this.width;
        this.porints = 1;
        this.draw();
        this.draw_porints();
      }
      Disc.prototype.draw = function(){
        this.stage.ctx.beginPath();
        this.stage.ctx.strokeRect(this.x,this.y,this.width,this.height);
        this.stage.ctx.closePath();
        this.stage.ctx.stroke();
      }
       
      Disc.prototype.random_porints = function(){
        this.clean();
        var tmp = 0;
        do{
          tmp = Math.floor(Math.random() * 7);
        }while(tmp <= 0 || tmp > 6)
        this.porints = tmp;
        this.draw_porints();
      }
      Disc.prototype.draw_porints = function(){
        var radius = this.width/7;
        if(this.porints == 1){//当只有1个点的时候，点位于正方形的正中间(width/2,height/2) 半径为width/4
          draw_porint(this.x + (this.width/2),this.y + (this.height/2),this.width/4,this.stage);
        }else if(this.porints == 2){//当有两个点时，第一个点位于(width/2,(height/7)*2,第二个点位于(width/2,(height/7)*5)
          draw_porint(this.x + (this.width/2),this.y + ((this.height/7)*2),radius,this.stage);
          draw_porint(this.x + (this.width/2),this.y + ((this.height/7)*5),radius,this.stage);;
        }else if(this.porints == 3){
          draw_porint(this.x + ((this.width/10)*2),this.y + ((this.height/10)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/10)*5),this.y + ((this.height/10)*5),radius,this.stage);
          draw_porint(this.x + ((this.width/10)*8),this.y + ((this.height/10)*8),radius,this.stage);
        }else if(this.porints == 4){
          draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/7)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/7)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/7)*5),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/7)*5),radius,this.stage);
        }else if(this.porints == 5){
          draw_porint(this.x + ((this.width/10)*2),this.y + ((this.height/10)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/10)*2),this.y + ((this.height/10)*8),radius,this.stage);
          draw_porint(this.x + ((this.width/10)*5),this.y + ((this.height/10)*5),radius,this.stage);
          draw_porint(this.x + ((this.width/10)*8),this.y + ((this.height/10)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/10)*8),this.y + ((this.height/10)*8),radius,this.stage);
        }else if(this.porints == 6){
          draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/10)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/10)*2),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/10)*5),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/10)*5),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*2),this.y + ((this.height/10)*8),radius,this.stage);
          draw_porint(this.x + ((this.width/7)*5),this.y + ((this.height/10)*8),radius,this.stage);
        }
      }
      Disc.prototype.redraw = function(){
        this.clean();
        this.porints = 1;
        this.draw_porints();
      }
      Disc.prototype.clean = function(){
        this.stage.ctx.clearRect(this.x,this.y,this.width,this.height);
      }
      function draw_porint(x,y,radius,stage){
        stage.ctx.beginPath();
        stage.ctx.arc(x,y,radius,0,2*Math.PI,false);
        stage.ctx.closePath();
        stage.ctx.fill();
      }
       
      function CallBoard(x,y,stage){
        this.x = x;
        this.y = y;
        this.width = 360;
        this.height = 50;
        this.stage = stage;
        this.notices = [];
        this.init();
      }
      CallBoard.prototype.init = function(){
        this.stage.ctx.beginPath();
        this.stage.ctx.strokeRect(this.x,this.y,this.width,this.height);
        this.stage.ctx.closePath();
        this.stage.ctx.stroke();
        this.draw();
      }
      CallBoard.prototype.draw = function(){
        for(var i =0;i<this.notices.length;i++){
          this.notices[i].init();
        }
      }
      CallBoard.prototype.redraw = function(){
        this.clean();
        this.init();
        this.draw();
      }
      CallBoard.prototype.clean = function(){
        this.stage.ctx.clearRect(this.x,this.y,this.width,this.height);
      }
      CallBoard.prototype.add = function(notice){
        if(!notice){return;}
        this.notices.push(notice);
      }
       
      function Notice(x,y,str,callBoard){
        this.x = x;
        this.y = y;
        this.str = str;
        this.width = 150;
        this.height = 10;
        this.stage = callBoard.stage;
        if(str == undefined){
          this.init();
        }else{
          this.init(str);
        }
      }
      Notice.prototype.init = function(){
        this.stage.ctx.fillText('暂无',this.x,this.y);
      }
      Notice.prototype.init = function(str){
        if(str != ''){
          this.str = str;
        }
        this.stage.ctx.fillText(this.str,this.x,this.y);
      }
      Notice.prototype.draw = function(str){
        this.init(str);
      }
      Notice.prototype.redraw = function(str){
        this.stage.ctx.clearRect(this.x,this.y-9,this.width,this.height);
        this.draw(str);
      }
       
      function Rule(){
        this.disc1 = {};
        this.disc2 = {};
        this.notice1 = {};
        this.notice2 = {};
        this.notice3 = {};
        this.count = 0;
        this.integral = [];
        this.hasNext = false;
         
      }
      Rule.prototype.init = function(stage){
        this.disc1 = stage.things['disc'][0];
        this.disc2 = stage.things['disc'][1];
        this.notice1 = stage.things['callBoard'][0].notices[0];
        this.notice2 = stage.things['callBoard'][0].notices[1];
        this.notice3 = stage.things['callBoard'][0].notices[2];
        this.count = this.disc1.porints + this.disc2.porints;
        this.notice1.redraw('色子1号当前点数为: '+this.disc1.porints+' 点');
        this.notice2.redraw('色子2号当前点数为: '+this.disc2.porints+' 点');
        this.notice3.redraw('当前点数和为:'+this.count+'点。');
      }
      Rule.prototype.run = function(){
        var str = this.notice3.str;
        this.notice3.width = 348;
        if(this.integral.length == 0){
          if(this.count == 7 || this.count == 11){
            str += '你的运气真好一把就赢了，继续加油哦！';
            this.notice3.redraw(str);
            this.hasNext = false;
            return this;
          }
          if(this.count == 2 || this.count == 3 || this.count == 12){
            str += '你也太衰了吧！第一把就输了，再来一把试试！';
            this.notice3.redraw(str)
            this.hasNext = false;
            return this;
          }
          if(this.count >=4 && this.count <= 10){
            this.integral.push(this.count);
            str += '请再抛一次骰子！';
            this.notice3.redraw(str);
            this.hasNext = true;
            return this;
          }
        }else{
          if(this.count == 7 || this.count != this.integral[this.integral.length - 1]){
            str += '不好意思，你输了……！';
            this.notice3.redraw(str);
            this.hasNext = false;
            return this;
          }
          if(this.count == this.integral[this.integral.length - 1]){
            str += '你太厉害了，竟然抛出和上一次一样的点数！恭喜你赢了！';
            this.notice3.redraw(str);
            this.hasNext = false;
            return this;
          }
        }
      }
       
      var stage = new Stage('game');
      stage.setings = function(){
        var x1 = 20,y1 = 20;
        var x2 = 210,y2 = 20;
        var callBoard = new CallBoard(20,200,stage);
        callBoard.add(new Notice(30,220,'色子1号，尚无点数。',callBoard));
        callBoard.add(new Notice(220,220,'色子2号，尚无点数。',callBoard));
        callBoard.add(new Notice(30,240,'当前尚无点数和。',callBoard));
       
        stage.add(new Disc(x1,y1,stage));
        stage.add(new Disc(x2,y2,stage));
        stage.add(callBoard);
        stage.rule = new Rule();
      }
      stage.setings();
       
    </script>
  </body>
</html>

演示图片

原生js结合html5制作简易的双色子游戏

以上所述就是本文的全部内容了，希望能够对大家学习js+html5有所帮助。

原生js结合html5制作简易的双色子游戏

- Author -

hebedich

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

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
心扬JS分页函数代码
Sep 10 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
浅谈javascript的调试
Jan 28 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
vue实现通讯录功能
Jul 14 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
原生js结合html5制作小飞龙的简易跳球
Mar 30 #Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 #Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 #Javascript
jquery实现右键菜单插件
Mar 29 #Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 #Javascript
jquery表单验证插件（jquery.validate.js）的3种使用方式
Mar 28 #Javascript
JQuery调用绑定click事件的3种写法
Mar 28 #Javascript
辞职信(98) 证婚词(21) 介绍信(57) 广播稿(323) 表扬信(62) 道歉信(39) 邀请函(127) 欢迎词(65) 检讨书(456) 事迹材料(636)
You might like
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
python基础练习之几个简单的游戏
2017/11/10 Python
Python cookbook（数据结构与算法）让字典保持有序的方法
2018/02/18 Python
遗传算法python版
2018/03/19 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
如何在django中添加日志功能
2020/02/06 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
铭万公司.net面试题笔试题
2014/07/20 面试题
Linux操作面试题
2012/05/16 面试题
Java如何支持I18N？
2016/10/31 面试题
知名企业招聘广告词大全
2014/03/18 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014年司机工作总结
2014/11/21 职场文书
小学新课改心得体会
2016/01/22 职场文书
创业项目大全（适合在家创业的项目）
2019/08/15 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Python代码，能玩30多款童年游戏！这些有几个是你玩过的
2021/04/27 Python