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. Java学习之并发多线程理解

    1.线程简介: 世间万物会同时完成很多工作,如人体同时进行呼吸.血液循环.思考问题等活动,用户既可以使用计算机听歌也可以使用它打印文件,而这些活动完全可以同时进行,这种思想在Java中称为并发,而将并 ...

  2. 【Codeforces 25C】Roads in Berland

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 用floyd思想. 求出来这条新加的边影响到的点对即可. 然后尝试更新点对之间的最短路就好. 更新之后把差值从答案里面减掉. [代码] #in ...

  3. selenium之文件上传

    文件上传是所有UI自动化测试都要面对的一个头疼问题,今天博主在这里给大家分享下自己处理文件上传的经验,希望能够帮助到广大被文件上传坑住的seleniumer. 首先,我们要区分出上传按钮的种类,大体上 ...

  4. FZU2206函数求解

    Problem 2206 函数求解 Accept: 154    Submit: 456 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Probl ...

  5. bzoj1708 [Usaco2007 Oct]Money奶牛的硬币 背包dp

    [Usaco2007 Oct]Money奶牛的硬币 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 852  Solved: 575[Submit][Sta ...

  6. 给你两个字符串str1，str2，找出str2在str1中的位置

    如题 题目参考链接: http://blog.csdn.net/hxz_qlh/article/details/14110221 代码来自非原创 #include <iostream> # ...

  7. Git学习之常见错误 git push 失败

    Git学习之常见错误 git push 失败 问题描述: git push Counting objects: , done. Delta compression using up to thread ...

  8. 2018-2019 XIX Open Cup, Grand Prix of Korea (Division 2) GYM 102058 F SG函数

    http://codeforces.com/gym/102058/problem/F 题意:平面上n个点  两个人轮流在任意两个点之间连一条线但是不能和已有的线相交,先围成一个凸多边形的获胜,先手赢还 ...

  9. csu - 1659 Graph Center(最短路)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1659 题意是找一个图的中心,图的中心定义是某一个点到其他点的最大距离最小,如果有多个排序输出. 注 ...

  10. 从零开始写STL—模板元编程之any

    any class any; (since C++17) The class any describes a type-safe container for single values of any ...