HTML5、javascript写的craps游戏
1. [代码][HTML]代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Craps game</title>
<script>
var cwidth =400;
var cheight = 300;
var dicex = 50;
var dicey = 50;
var dicewidth = 100;
var diceheight = 100;
var dotard = 6;
var ctx;
var dx;
var dy;
var firstturn = true;
var point;
function throwdice(){
var sum;
var ch = 1+ Math.floor(Math.random()*6);
sum = ch;
dx = dicex;
dy = dicey;
drawface(ch);
dx = dicex +150;
ch = 1+Math.floor(Math.random()*6);
sum +=ch;
drawface(ch);
if(firstturn){
switch(sum){
case 7:
case 11:
document.f.outcome.value = "You win!";
break;
case 2:
case 3:
case 12:
document.f.outcome.value = "You lose!";
break;
default:
point = sum;
document.f.pv.value = point;
firstturn = false;
document.f.stage.value = "Need follow-up throw.";
document.f.outcome.value=" ";
}
}
else{
switch(sum){
case point:
document.f.outcome.value = "You win!";
document.f.stage.value = "Back to first throw.";
document.f.pv.value=" ";
firstturn = true;
break;
case 7:
document.f.outcome.value="You lose!";
document.f.stage.value="Back to first throw.";
document.f.pv.value=" ";
firstturn = true;
}
}
}
function drawface(n){
ctx = document.getElementById('canvas').getContext('2d');
ctx.lineWidth = 5;
ctx.clearRect(dx,dy,dicewidth,diceheight);
ctx.strokeRect(dx,dy,dicewidth,diceheight);
var dotx;
var doty;
ctx.fillStyle = "#009966";
switch(n){
case 1:
draw1();
break;
case 2:
draw2();
break;
case 3:
draw2();
draw1();
break;
case 4:
draw4();
break;
case 5:
draw4();
draw1();
break;
case 6:
draw4();
draw2mid();
break;
}
}
function draw1(){
var dotx;
var doty;
ctx.beginPath();
dotx = dx + .5*dicewidth;
doty = dy + .5*diceheight;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function draw2(){
var dotx;
var doty;
ctx.beginPath();
dotx = dx + 3*dotard;
doty = dy + 3*dotard;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
dotx = dx + dicewidth-3*dotard
doty = dy + diceheight-3*dotard;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function draw4(){
var dotx;
var doty;
ctx.beginPath();
dotx = dx + 3*dotard;
doty = dy + 3*dotard;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
dotx = dx + dicewidth-3*dotard
doty = dy + diceheight-3*dotard;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
dotx = dx + 3*dotard;
doty = dy + diceheight-3*dotard;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
dotx = dx + dicewidth-3*dotard
doty = dy + 3*dotard;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function draw2mid(){
var dotx;
var doty;
ctx.beginPath();
dotx = dx + 3*dotard;
doty = dy + .5*deiceheight;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
dotx = dx + dicewidth-3*dotard;
doty = dy + .5*deiceheight;
ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">
浏览器不支持HTML5的canvas元素</canvas>
<br />http://www.huiyi8.com/donghua/
<button onClick="throwdice();">Throw dice</button>
<form name="f">flash
Stage:<input name="stage" value="First Throw"/>
Point:<input name="pv" value=" "/>
Outcome:<input name="outcome" value=" "/>
</form>
</body>
</html>
最新文章
- 1.bootstrap练习笔记-导航条
- MySQL:动态开启慢查询日志(Slow Query Log)
- yaf自动加载文件
- 【转】一篇很全面的freemarker教程---有空慢慢实践
- Perl的基本语法<;总结>; (转载)
- 如何学好PHP
- MS也遵守规范了
- Scut DirCenter 网站编辑、搭建与调试
- 5 安装Alloc服务
- asp.net微软图表控件使用示例
- java网络编程(3)——UDP
- pycharm中join的应用
- 在MacOS上使用gdb(cgdb)调试Golang程序
- Learning-Python【6】:Python数据类型(2)—— 列表、元组
- Java利用MethodHandle实现反射时调用super的method
- ELK logstash 处理MySQL慢查询日志
- React 源码剖析系列 - 不可思议的 react diff
- js 和springboot内存图
- Eclipse编译快捷键
- 32位 64位 获得进程peb的方法
热门文章
- python操作剪贴板错误提示:pywintypes.error: (1418, &#39;GetClipboardData&#39;,线程没有打开的剪贴板)
- Action中result的各种转发类型
- python012 Python3 编程第一步
- Flask设计带认证token的RESTful API接口[翻译]
- HDU-2509-Be the Winner,博弈题~~水过~~
- Euclidean Nim(bzoj 4147)
- 【BZOJ2982】combination(Lucas定理)
- Codeforces Round #296 (Div. 2) C. Glass Carving [ set+multiset ]
- Two Sum(hashtable)
- loj6169 相似序列(可持久化线段树)