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>

HTML5、javascript写的craps游戏的更多相关文章

  1. 60行代码：Javascript 写的俄罗斯方块游戏

    哈哈这个实在是有点意思 备受打击当初用java各种类写的都要几百行啦 先看效果图: 游戏结束图: javascript实现源码: [javascript] view plaincopyprint? & ...

  2. JavaScript写一个拼图游戏

    拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开: 因为使用canvas,所以某些浏览器是不支持的: you know: 为什么要用canvas(⊙o⊙)?  因为图片是一整张jpg或 ...

  3. 280行代码：Javascript 写的2048游戏

    2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.最好还是就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算 ...

  4. javascript写贪吃蛇游戏（20行代码！）

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  5. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  6. 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库

    推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...

  7. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  8. HTML5 JavaScript实现图片文字识别与提取

    8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...

  9. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

随机推荐

  1. 阿里巴巴集团加入W3C，成为W3C会员

    根据W3C官方推特最新消息:阿里巴巴集团正式加入W3C,成为W3C会员. W3C官方推特:https://twitter.com/w3c/status/566244180372889601 同时可以在 ...

  2. linux中.bashrc 等文件中的rc是什么意思

    英文原义:RC (run command)中文释义:含有程序(应用程序甚至操作系统)启动指令的脚本文件 注 解:这一文件在操作系统启动时会自动执行,它含有要运行的指令(命令或其它脚本)列表. 相当于w ...

  3. POJ 1509 循环同构的最小表示法

    题目大意: 给定一个字符串,可以把一段尾部接到头部,这样找到一个最小的字符串 方案一: 利用循环同构中找最小表示的方法来解决 论文参考http://wenku.baidu.com/view/438ca ...

  4. [luoguP2962] [USACO09NOV]灯Lights（高斯消元 + dfs）

    传送门 先进行高斯消元 因为要求最少的开关次数,那么: 对于关键元,我们可以通过带入消元求出, 对于自由元,我们暴力枚举,进行dfs,因为只有开关两种状态,0或1 #include <cmath ...

  5. 【数学】codeforces A. Success Rate

    http://codeforces.com/contest/773/problem/A [思路] 用 (x+a)/(y+b) = p/q 来表示其核心思想,其中a 为做对的题目,b为做的题目,则有x+ ...

  6. java邮件工具类【最终版】

    http://www.xdemo.org/java-mail/ 对比链接中,添加了抄送和暗抄送功能(已解决,如图代码:抄送不能多个用户,会报错,未解之谜) sendHtmlmail方法可以发送附件以及 ...

  7. Python基础教程笔记——第5章：条件，循环和其他语句

    5.1 print和import的更多信息 1. print()3.0之后print不再是语句,而是函数, >>> print('udg',12,13)   udg 12 13 &g ...

  8. POJ 2749 2SAT判定+二分

    题意:图上n个点,使每个点都与俩个中转点的其中一个相连(二选一,典型2-sat),并使任意两点最大 距离最小(最大最小,2分答案),有些点相互hata,不能选同一个中转点,有些点相互LOVE,必需选相 ...

  9. hdu3622 2-sat问题，二分+判断有无解即可。

    /*2-sat问题初破!题意:每一对炸弹只能选一个(明显2-sat),每个炸弹半径自定,爆炸范围不可 相交,求那个最小半径的最大值(每种策略的最小半径不同).思:最优解:必然是选择的点最近 的俩个距离 ...

  10. Object-C Xcode 编译提示 note: please rebuild precompiled header ZWYLPrefixHeader

    错误提示如下图 解决思路: 由于手欠不小心,在.pch文件上的第一行加了几个文字,删除以后,还有一个空行,估计是这个空行引起的.删除这个空行,就好了.