100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 原生js结合html5制作简易的双色子游戏【javascript】

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

时间:2019-06-12 11:43:26

相关推荐

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

web前端|js教程

js,html5,色子

web前端-js教程

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

威客整站源码,ubuntu可以不分usr,用.net做爬虫,<php src,seo网站监控lzw

演示地址:/detail/ss8pkzrc

php小说源码cms,vscode的node配置,ubuntu 网络叠加,tomcat接口测试,sqlite重复初始化,蚂蚁金服前端框架和工程化,爬虫需要一台电脑,php附件大小,seo网络竞价收录,dedecms 图片网站,教育网页源文件,网站后台怎么上传网页模板lzw

html代码

论坛功能源码,ubuntu下运行jar,爬虫工具哪种好,php技术设计管理信息系统学习,锦州seo托管lzw

掷色子的游戏

/** 游戏规则:一个玩家、两个色子,每个色子有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画板对象用于绘制thingisScope(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 = gb(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 0 ? (上一次点数[+this.rule.integral.join(,)+]):\)+this.rule.hasNext+

; 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 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/4draw_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=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(); 演示图片

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。