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

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

html代码

 
 
 
 
 
 

 

 

 
 你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！
 

 
 
 

 游戏规则：

 1、一个玩家、两个色子，每个色子有1-6个点，点数随机出现，点数是2-12中的任意数字

 2、如果玩家第一次抛出 7 或者 11，则本回合胜利 进行下一回合

 3、如果玩家抛出2、3、12 则回合失败 进行下一回合

 4、抛出其他数字4、5、6、7、8、9、10 记录点数和，并继续掷色子

 5、当玩家掷出7 则本回合失败 进行下一回合

 6、当玩家抛出的点数和与上一次的相同，本局胜利 进行下一回合

 7、当玩家抛出的点数和与上一次的不同，本局失败，进行下一回合

 后期扩展：

 这个游戏有押注和积分的功能，尚无思路，所以没有实现

 
 
 
 

 

 
 
 
 
 

 
 /**
 游戏规则：
 一个玩家、两个色子，每个色子有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 0 ? ('上一次点数[