原生js结合html5制作简易的双色子游戏
想转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实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
原生js实现打字动画游戏
这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti
-
JavaScript 打地鼠游戏代码说明
演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc
-
原生JS实现《别踩白块》游戏（兼容IE）
兼容了IE,每得20分就加速一次!!! 效果如下: 图(1) 游戏初始 图(2) 游戏开始 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .box { margin: 50px auto 0 auto; width: 400px; height:
-
JS写的贪吃蛇游戏(个人练习)
JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t
-
原生js实现的贪吃蛇网页版游戏完整实例
本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc
-
原生js编写2048小游戏
效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; b
-
JS 拼图游戏 面向对象，注释完整。
在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码 代码如下: <html> <head> <title>JS拼图游戏</title> <style> body{ font-size:9pt; } table{ border-collapse: collapse; } input{ width:20px; } </style> </he
-
原生js结合html5制作简易的双色子游戏
想转html5游戏开,这是学习练手的东西,最开始是用面向过程的方式实现,后面用面向对象的方式实现(被坑了)-- 演示地址:http://runjs.cn/detail/ss8pkzrc html代码 <html> <head> <meta charset="utf-8"/> <title>掷色子的游戏</title> </head> <body> <table> <tr> <
-
原生js结合html5制作小飞龙的简易跳球
演示地址:http://runjs.cn/detail/yjpvqhal html代码 <html> <head> <meta charset="utf-8"/> <title>小飞龙的跳球</title> </head> <body onload="init()"> <canvas id="game" width="400" heigh
-
40行原生js代码实现前端简易路由
目录 前言 路由到底是一个什么东西? 实现一个 hashRouter historyRouter memoryRouter 最后做个总结 前言 在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由 路由到底是一个什么东西? 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动.路由发生在OSI网络参考模型中的第三层即网
-
原生js配合cookie制作保存路径的拖拽
主要是运用了原生js封装了一个cookie,然后使用了三个事件做拖拽,分别是onmousedown,onmousemove,onmouseup,这三个事件其中两个需要添加事件对象,也就是event,事件对象是一个不兼容的东西,所以需要处理兼容性的问题,也就是oEvent = ev || event; 通过事件对象,获取鼠标点击屏幕时的那个点,然后减去被拖拽物体距离左边的一个距离,最终就可以获取到当前点击位置距离物体的距离. 最后在onmouseup的时候做了一个return false,主要是为
-
Python+Pygame制作简易版2048小游戏
目录 导语 正文 主要代码 效果图 导语 哈喽!大家好,我是栗子,感谢大家的支持! 新的一天,新气象,程序猿们的日常开始敲敲敲,改改改——今天给大家来一款简单的小游戏! 2048小游戏——准确的来说确实是一个简单版本的! 呐呐呐 ,主要是担心很多小伙伴儿直接上界面版本的看不懂,所以做了这款简单的2048,先看这篇简单版本的吧! 正文 为了搞懂这个游戏的规则,小编去直接下载了一款2048的小游戏,上手玩了一波! 然后.........完全停不下来!23333~ 玩法: 用手指或键盘上下左右滑动,将
-
使用Matlab制作简易版八分音符酱游戏
目录 效果 游戏方式 说明 工具箱主要部分代码 完整代码 效果 游戏方式 给电脑插上耳机后叫喊叭 ! 说明 1)使用此代码应首先安装: Audio Toolbox工具箱,博主使用的版本为: Audio Toolbox 版本 3.0 (R2021a) 2)为保证游戏加载完所有素材后再开始,故设置了加载完成界面后停滞3秒再开始运行游戏 若一进入界面就挂了,应是资源加载太久,请关掉窗口后尝试重新运行 工具箱主要部分代码 1)基础设置 这里懒得改了直接照抄的语音命令识别的截断数据,大家可以依据自己需要进
-
Python制作简易版2048小游戏
目录 目标效果 设计开始 步骤一 步骤二 步骤三 步骤四 步骤五 今天我们来动手实现一款2048小游戏.这款游戏的精髓就玩家能够在于通过滑动屏幕合并相同数字,直到不能再合并为止.玩法可以说是非常的简单,但挑战性也是十足的.话不多说,让我们从0开始实现! 目标效果 大致要实现的效果如下: 设计开始 首先简单分析一下游戏的逻辑: 输入移动方向,游戏内所有方块都朝指定方向移动 同方向移动的方块,数字相同则合并,然后生成一个合并的方块 合并后生成新的方块,无法生成新方块时游戏结束 用一系列的颜色来区分不
-
利用原生js实现html5小游戏之打砖块（附源码）
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
-
利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'