html5掷骰子的小demo
代码如下:
<!DOCTYPE>
<html>
<title>柯乐义</title>
<head>
<script>
var leftX = 150;
var topY = 100;
var diceX = 80;
var diceY = 80;
var dotR = 4;
var count = 0;
var lastNum = 0;
var flag = false; function clickMe() {
count = 0;
if(flag) {
return false;
}
flag = true;
var ctx = document.getElementById("canvas").getContext('2d');
ctx.beginPath();
//ctx.arc(100,100,50,0,Math.PI,false);
ctx.strokeRect(leftX,topY,diceX,diceY); setTimeout(function(){
random(ctx);
},200); } function drawDice(ctx,randomNum) {
ctx.clearRect(leftX,topY,diceX,diceY);
switch(randomNum) {
case 1:
draw1();
break;
case 2:
draw2();
break;
case 3:
draw3();
break;
case 4:
draw4();
break;
case 5:
draw5();
break;
case 6:
draw6();
break;
}
count++;
if(count>=20) {
if(randomNum==6) {
alert("哇!你走狗屎运啦,今天可以去买彩票啦");
} else if(randomNum <=3) {
alert("今天运气不太好哦!再试一把");
} else {
alert("请再接再厉,在来一把");
}
flag = false;
return false;
} else {
setTimeout(function(){
random(ctx);
},200-count);
}
} function random(ctx) {
var randomNum = Math.floor(Math.random()*6)+1;
if(randomNum == lastNum) {
random(ctx)
} else {
lastNum = randomNum;
drawDice(ctx,randomNum);
} } function commonDraw(ctx,dotX,dotY) {
ctx.beginPath();
ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false);
ctx.stroke();
ctx.fill();
} function draw1() {
var ctx = document.getElementById("canvas").getContext('2d');
ctx.fillStyle="#0000ff";
var dotX = leftX+diceX/2;
var dotY = topY+diceY/2;
commonDraw(ctx,dotX,dotY);
} function draw2() {
var ctx = document.getElementById("canvas").getContext('2d');
ctx.fillStyle="#99FF66";
var dotX = leftX+4*dotR;
var dotY = topY+4*dotR;
commonDraw(ctx,dotX,dotY);
var dotX = leftX+diceX-4*dotR;
var dotY = topY+diceY-4*dotR;
commonDraw(ctx,dotX,dotY);
} function draw3() {
draw1();
draw2();
} function draw4() {
draw2();
var ctx = document.getElementById("canvas").getContext('2d');
ctx.fillStyle="#99CC00";
var dotX = leftX+diceX-4*dotR;
var dotY = topY+4*dotR;
commonDraw(ctx,dotX,dotY);
var dotX = leftX+4*dotR;
var dotY = topY+diceY-4*dotR;
commonDraw(ctx,dotX,dotY);
} function draw5(){
draw1();
draw4();
}
//http://www.cnblogs.com/sosoft/
function draw6(){
var ctx = document.getElementById("canvas").getContext('2d');
ctx.fillStyle="#996633";
var dotX = leftX+4*dotR;
var dotY = topY+diceY/2
commonDraw(ctx,dotX,dotY);
var dotX = leftX+diceY-4*dotR;
commonDraw(ctx,dotX,dotY);
draw4();
} function init() {
var ctx = document.getElementById("canvas").getContext('2d');
ctx.beginPath();
ctx.strokeRect(leftX,topY,diceX,diceY);
ctx.stroke();
draw6(); }
</script>
</head> <body onload="init();">
<canvas id="canvas" width="400" height="300" style="background-color:#CCFFCC">
your brower is not support html5
</canvas> <input type="button" value="掷骰子" onclick="clickMe();"/>
</body>
</html>
html5掷骰子的小demo的更多相关文章
- TurnipBit开发板掷骰子小游戏DIY教程实例
转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 下面带大家用TurnipBit开发板实现一个简单的小游戏- ...
- 掷骰子游戏窗体实现--Java初级小项目
掷骰子 **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰 ...
- Python Tkinter小实例——模拟掷骰子
什么是Tkinter? Tkinter 是 Python 的标准 GUI 库.Python 使用 Tkinter 可以快速的创建 GUI 应用程序. 由于 Tkinter 是内置到 python 的安 ...
- 掷骰子-IOS新手项目练习(抱歉,由于个人原因,图片没显示,要源码的项目私聊)
---恢复内容开始--- 今天我们来讲的就是项目<掷骰子> 首先我们先下载资源包,也就是我们需要的图片[点击图片下载] 在我们下载完图片之后,我们就可以开始创建项目 一.我们项目的做法可以 ...
- jQuery掷骰子
网上找的jQuery掷骰子效果,测试兼容IE7及以上浏览器,IE6没有测试 js代码如下: $(function(){ var dice = $("#dice"); dice.cl ...
- 3星|《给你讲个笑话:我是创业公司CEO》:创业成功就是上帝掷骰子
给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...
- 【Tyvj2046】掷骰子
好水一道题 掷骰子Description Rainbow和Freda通过一次偶然的机会来到了魔界.魔界的大门上赫然写着:小盆友们,欢迎来到魔界~!乃们需要解决这样一个问题才能进入哦lala~有N枚骰子 ...
- python学习之掷骰子游戏
""" 通过学习的python知识,写一个简单的python小游戏 游戏名字:掷骰子比大小 游戏规则: 1.玩家可以选择玩掷几个骰子游戏(默认3个) 2.玩家可以设置双方 ...
- 一个上传图片,预览图片的小demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码
本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 开源倾情奉献系列链接 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码 开源倾 ...
- SQL面试题
Student(S#,Sname,Sage,Ssex) 学生表 S#:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别Course(C#,Cname,T#) 课程表 ...
- 解决方法of未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
在开发的一个报表转换功能涉及到Excel97-2003(.xls)文件的导入.使用oledb来读取excel数据.代码为: public static DataSet LoadDataFromExce ...
- Win7系统.net framework 4.0没有注册导致部署在IIS的站点跑不起来怎么办
win7装了VS再装IIS,结果IIS里面有.NET4.0,但是程序始终是跑不起来,怎么办呢? 分析觉得可能是因为4.0没有注册到IIS,在win7下如果先安装vs2010 (附带会安装Microso ...
- mysql创建数据库
mysql创建数据库 创建utf8编码的数据库 CREATE DATABASE IF NOT EXISTS my_db default character set utf8 COLLATE utf8_ ...
- 使用模板技术处理ASP.NET中GridView额外序号列的问题
问题描述: 现在要在一张GridView表中添加一列来显示行号,要求是显示下一页的时候能够递增而不是从新编号.数据库中的没有相关序号列 如何在软件端实现呢? 通过测试,添加以下代码即可解决需求. &l ...
- LLBL Gen Pro 4.2 Lite 免费的对象关系映射开发框架与工具
LLBL Gen Pro是一款优秀的对象关系映射开发框架,自2003年发布以来,一直有广泛的客户群.LLBL Gen Pro有几个标志性的版本,2.5/2.6是一个很稳定的版本,公司的一些旧的项目仍然 ...
- Android入门(二)Activity-Toast、Intent
原文链接:http://www.orlion.ga/427/ 一.隐藏activity的标题 在activity的java代码的onCreate()方法中入requestWindowFeature(W ...
- (转)rlwrap真是一个好东西
在Linux下面使用sqlplus很不爽,上下键,退格键都不能用,严重降低生产效率. 某一天终于发现了这个rlwrap这个好东西,特写此文记录. 下载地址如下: http://utopia.knowa ...
- 如何安装Oracle Instant Client
Oracle Instant Client是Oracle发布的轻量级数据库客户端,下面我们来看看官方的定义: Instant Client allows you to run your applica ...