html5掷骰子的小demo
原文 html5掷骰子的小demo
代码如下：
1 <!DOCTYPE>2 <html>3 <title>柯乐义</title>4 <head>5 <script>6 var leftX = 150;7 var topY = 100;8 var diceX = 80;9 var diceY = 80;10 var dotR = 4;11 var count = 0;12 var lastNum = 0;13 var flag = false;14 15 function clickMe() {16 count = 0;17 if(flag) {18 return false;19 }20 flag = true;21 var ctx = document.getElementById("canvas").getContext('2d');22 ctx.beginPath();23 //ctx.arc(100,100,50,0,Math.PI,false);24 ctx.strokeRect(leftX,topY,diceX,diceY);25 26 setTimeout(function(){27 random(ctx);28 },200);29 30 }31 32 function drawDice(ctx,randomNum) {33 ctx.clearRect(leftX,topY,diceX,diceY);34 switch(randomNum) {35 case 1:36 draw1();37 break;38 case 2:39 draw2();40 break;41 case 3:42 draw3();43 break;44 case 4:45 draw4();46 break;47 case 5:48 draw5();49 break;50 case 6:51 draw6();52 break;53 }54 count++;55 if(count>=20) {56 if(randomNum==6) {57 alert("哇！你走狗屎运啦，今天可以去买彩票啦");58 } else if(randomNum <=3) {59 alert("今天运气不太好哦！再试一把");60 } else {61 alert("请再接再厉，在来一把");62 }63 flag = false;64 return false;65 } else {66 setTimeout(function(){67 random(ctx);68 },200-count);69 }70 }71 72 function random(ctx) {73 var randomNum = Math.floor(Math.random()*6)+1;74 if(randomNum == lastNum) {75 random(ctx)76 } else {77 lastNum = randomNum;78 drawDice(ctx,randomNum);79 }80 81 }82 83 function commonDraw(ctx,dotX,dotY) {84 ctx.beginPath();85 ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false);86 ctx.stroke();87 ctx.fill(); 88 }89 90 function draw1() {91 var ctx = document.getElementById("canvas").getContext('2d');92 ctx.fillStyle="#0000ff";93 var dotX = leftX+diceX/2;94 var dotY = topY+diceY/2;95 commonDraw(ctx,dotX,dotY);96 }97 98 function draw2() {99 var ctx = document.getElementById("canvas").getContext('2d');
100 ctx.fillStyle="#99FF66";
101 var dotX = leftX+4*dotR;
102 var dotY = topY+4*dotR;
103 commonDraw(ctx,dotX,dotY);
104 var dotX = leftX+diceX-4*dotR;
105 var dotY = topY+diceY-4*dotR;
106 commonDraw(ctx,dotX,dotY);
107 }
108
109 function draw3() {
110 draw1();
111 draw2();
112 }
113
114 function draw4() {
115 draw2();
116 var ctx = document.getElementById("canvas").getContext('2d');
117 ctx.fillStyle="#99CC00";
118 var dotX = leftX+diceX-4*dotR;
119 var dotY = topY+4*dotR;
120 commonDraw(ctx,dotX,dotY);
121 var dotX = leftX+4*dotR;
122 var dotY = topY+diceY-4*dotR;
123 commonDraw(ctx,dotX,dotY);
124 }
125
126 function draw5(){
127 draw1();
128 draw4();
129 }
130 //http://www.cnblogs.com/sosoft/
131 function draw6(){
132 var ctx = document.getElementById("canvas").getContext('2d');
133 ctx.fillStyle="#996633";
134 var dotX = leftX+4*dotR;
135 var dotY = topY+diceY/2
136 commonDraw(ctx,dotX,dotY);
137 var dotX = leftX+diceY-4*dotR;
138 commonDraw(ctx,dotX,dotY);
139 draw4();
140 }
141
142 function init() {
143 var ctx = document.getElementById("canvas").getContext('2d');
144 ctx.beginPath();
145 ctx.strokeRect(leftX,topY,diceX,diceY);
146 ctx.stroke();
147 draw6();
148
149 }
150 </script>
151 </head>
152
153 <body onload="init();">
154 <canvas id="canvas" width="400" height="300" style="background-color:#CCFFCC">
155 your brower is not support html5
156 </canvas>
157
158 <input type="button" value="掷骰子" onclick="clickMe();"/>
159 </body>
160 </html>
html5掷骰子的小demo相关推荐
- 用python编写一个掷骰子的小程序
摘要: 编写了一个掷骰子的程序,主要通过pygame模块实现了以下几点功能:1.每次点击开始键时,骰子都会转动起来.2.每次开始后点击停止键时,骰子停止并且随机停在1-6的某一个数字上.3.按下结束键 ...
- Java实现喝酒掷骰子Swing小程序
大一计算机专业,闲来无事写了一个喝酒小程序 具体的思路:分为两个Java文件,第一个为创建JFrame窗口,为骰子提供显示界面,并实现功能.第二个为主函数调用程序很简单. 核心部分:重点在1~6随机数 ...
- 概率编程：小明小红掷骰子
1.题目: 小明小红掷骰子,小明有n个骰子,第i个骰子有vi个面,每个面的点数为1.2.3...vi. 小红有m个骰子,第j个骰子有vj个面,每个面的点数为1.2.3...vj. 小明小红将自己的所有 ...
- Python动画制作：用tkinter模拟掷骰子
骰子是很多游戏必不可少的道具,虽然用代码模拟生成骰子的点数比较简单,但在图形化的游戏里,如果能够模拟出掷骰子的效果,必然会为游戏增色不少.正好最近问哥在琢磨的几个小游戏都需要用到掷骰子,于是单独写篇文 ...
- php掷骰子小游戏代码,js实现掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处 ...
- Python基础案例练习：掷骰子小游戏
前言 骰子是我们经常能看到的小玩意儿,今天我们来做一个模拟掷骰子过程的文字版小游戏,送给新接触Python的初学者们~ 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者 ...
- JAVA 掷骰子小游戏
记事本编辑小游戏( 需要有环境变量 ),代码会在底部会发出来: ( 1 ) 创建一个txt文本,把后缀改成 .java ; ( 2 ) 先创建一个类一个 main 方法,切记类名要跟文件名一致: (3 ...
- 掷骰子java程序_掷骰子游戏窗体实现--Java初级小项目
1 packagecom.sxt.dice;2 3 importjava.awt.Color;4 5 public class DiceFrame extends JFrame implementsA ...
- php掷骰子游戏,js实现简单掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 实现方法: 方法一:通过background-position.background-image.backg-repeat三个 ...
- 投掷骰子的python代码_Python基础篇——模拟掷骰子小游戏
写在前面 ↓ 骰子是我们经常能看到的小玩意儿,今天我们来做一个模拟掷骰子过程的文字版小游戏,送给幻想编程岛新接触Python的初学者们~ 注:本教程基于64位windows系统(鼠标右键点击桌面&qu ...
最新文章
- 第54期《SCI论文插图排版与绘制》课程欢迎你！
- 【ASP.NET】ASP.NET中权限验证使用OnAuthorization实现
- Fisher 线性分类器--转
- LINUX安装JDK1.8（wget rpm）
- Android开发之recyclerview布局加载不全的问题
- 基于.NET CORE微服务框架 -谈谈Cache中间件和缓存降级
- 【AI 顶会】NIPS2019接收论文完整列表
- python读取xml文件内容_python读取xml文件
- MongoDB笔记（一）：MongoDB介绍及Windows下安装
- 逆序数介绍以及算法实现浅析
- jmeter使用_jmeter概念及使用
- CF1109F Sasha and Algorithm of Silence's Sounds LCT、线段树
- 全流程OA系统集成对接案例实例
- s5pv210时钟系统详解
- 关于软考证书专项扣除填报抵扣个税
- 使用css和js实现刮刮乐（简单易懂还有趣）
- 一直以来伴随我的一些学习习惯（四）——程序员的知识结构
- iOS 热更新技术探索
- 微信公众平台上传和预览图片
- nvm安装（windows）