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. Leetcode 222.完全二叉树的节点个数

    完全二叉树的节点个数 给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最 ...

  2. 洛谷P1521 求逆序对 题解

    题意: 求1到n的全排列中有m对逆序对的方案数. 思路: 1.f[i][j]表示1到i的全排列中有j对逆序对的方案数. 2.显然,1到i的全排列最多有(i-1)*i/2对逆序对,而对于f[i][j]来 ...

  3. HDU 3911 区间合并求最大长度的问题

    http://vjudge.net/problem/viewProblem.action?id=21557 题目大意: 每进行一次颜色改变都可以把一段区间内的黑石头变成白石头,白石头变成黑石头,最后问 ...

  4. 【多校训练2】HDU 6047 Maximum Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=6047 [题意] 给定两个长度为n的序列a和b,现在要通过一定的规则找到可行的a_n+1.....a_2n,求su ...

  5. github新建本地仓库，再同步远程仓库基本用法

    github新建本地仓库,再同步远程仓库基本用法 1 mkdir gitRepo 2 cd gitRepo 3 git init  #初始化本地仓库 4 git add xxx  #添加要push到远 ...

  6. 2016 Multi-University Training Contest 2 solutions BY zimpha

    Acperience 展开式子, \(\left\| W-\alpha B \right\|^2=\displaystyle\alpha^2\sum_{i=1}^{n}b_i^2-2\alpha\su ...

  7. BZOJ2501: [usaco2010 Oct]Soda Machine

    n<=50000个区间,求哪个点被覆盖区间数量最多,输出这个数量. 差分模板..然而数组忘开两倍.. #include<stdio.h> #include<string.h&g ...

  8. MySQL性能优化的21个最佳实践 和 mysql使用索引【转载】

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  9. rabbitmq management Login Failed

    默认用户guest 只允许localhost登录. so... 我们自己建立用户 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个用户 rab ...

  10. ATcoder 1983 BBQ Hard

    E - BBQ Hard Time limit : 2sec / Memory limit : 256MB Score : 1400 points Problem Statement Snuke is ...