首页 > 代码库 > HTML5、javascript写的craps游戏

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 = "http://www.mamicode.com/You win!";
                break;
            case 2:
            case 3:
            case 12:
                document.f.outcome.value = "http://www.mamicode.com/You lose!";
                break;
            default:
                point = sum;
                document.f.pv.value = http://www.mamicode.com/point;
                firstturn = false;
                document.f.stage.value = "http://www.mamicode.com/Need follow-up throw.";
                document.f.outcome.value="http://www.mamicode.com/";
            }
        }
        else{
            switch(sum){
                case point:
                         document.f.outcome.value = "http://www.mamicode.com/You win!";
                         document.f.stage.value = "http://www.mamicode.com/Back to first throw.";
                         document.f.pv.value="http://www.mamicode.com/";
                         firstturn = true;
                         break;
                case 7:
                      document.f.outcome.value="http://www.mamicode.com/You lose!";
                      document.f.stage.value="http://www.mamicode.com/Back to first throw.";
                      document.f.pv.value="http://www.mamicode.com/";
                      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="http://www.mamicode.com/First Throw"/>
Point:<input name="pv" value="http://www.mamicode.com/"/>
Outcome:<input name="outcome" value="http://www.mamicode.com/"/>
 
</form>
</body>
</html>

HTML5、javascript写的craps游戏