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. 谁才是最强战舰！-From 南京理工大学第八届程序设计大赛(校外镜像),博弈~~

    谁才是最强战舰! Time Limit: 1000MS Memory Limit: 65536KB Description 依阿华来到镇守府的第一件事情,就是找大和solo!然而这并不是什么好消息,说 ...

  2. C# 通过HTTP代理访问Socket来获取邮件

    C# 通过HTTP代理访问Socket来获取邮件 关键穿透代理的代码(通过HTTP代理获取TcpClent) public class ClientHelper { public static Tcp ...

  3. 45个android实例源码分享

    分享45个android实例源码,很好很强大 http://www.apkbus.com/android-20978-1-1.html andriod闹钟源代码 http://www.apkbus.c ...

  4. linux awk常用命令【转载】

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  5. ATcoder 2000 Leftmost Ball

    Problem Statement Snuke loves colorful balls. He has a total of N×K balls, K in each of his favorite ...

  6. QT程序--CS1.6文件整理及安装器

    这是一个在高二的时候写的一个QT程序,当时对于QT也不算是特别熟悉吧,算是我第一个QT程序,当时由于CS1.6的文件安装的繁琐,又有一些服务器的管理的麻烦操作,对CS的服务器管理一直都很麻烦,当时高二 ...

  7. Spring Boot中使用logback日志框架

    说明:Spring Boot在最新的版本中默认使用了logback框架.一般来说使用时只需在classpath下创建logback.xml即可,而官方推荐使用logback-spring.xml替代, ...

  8. eclipse导入maven工程步骤

    转自:http://jingyan.baidu.com/article/cbf0e500a6e3252eaa2893c1.html 感谢作者 步骤一 : 选择 “Import”操作 有两个途径可以选择 ...

  9. top命令行含义解析

    快捷键“1”可以快速切换显示所有cpu的信息 快捷键‘x’可以高亮显示当前排序列 shift+方向键:可以快速切换排序的列 top -c 显示完整命令 load含义解释:http://www.ruan ...

  10. ubuntu磁盘分区和挂载