一个简单的掷骰子小游戏

最新推荐文章于 2020-03-06 16:24:37 发布
原创最新推荐文章于 2020-03-06 16:24:37 发布 · 2k 阅读
3 ·
CC 4.0 BY-SA版权
js 专栏收录该内容
45 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body >
    <canvas width="400" height="300" id="canvas">
        your brower doesn't support the HTML5 element canvas
    </canvas>
    <form name="f">
        Stage: <input name="stage" value="First Throw"/>
        Point:<input name="pv" value=""/>
        outcome:<input name="outcome" value=""/>
    </form>
    <button onclick="init()">摇骰子</button>
    <script>
    var cwidth=400;//canvas 宽
    var cheight=300;//canvas 高
    var dicex=50;//筛子 X
    var dicey=50;//筛子 Y
    var dicewidth=100;//筛子 宽
    var diceheight=100;//筛子 高
    var dotrad=6;//筛子 半径
    var ctx;
    var dx;
    var dy;
    var firstturn=true;//是否第一次掷骰子
    var pointsum;
    function init(){
        var sum;
        var ch=1+Math.floor(Math.random()*6);
        sum=ch;
        dx=dicex//第一个筛子的x
        dy=dicey
        drawface(ch);
        ch=1+Math.floor(Math.random()*6);
        dx=dicex+150//第一个筛子的x
        drawface(ch);
        sum+=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:
                pointsum=sum;
                document.f.pv.value=pointsum;
                firstturn=false;
                document.f.stage.value="Need follow-up throw";
                document.f.outcome.value="";
            }
        }else{
            switch(sum){
                case pointsum:
                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(point){
        console.log(point);
        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(point){
            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+0.5*dicewidth;//设置圆点的中心在筛子面中心
        doty=dy+0.5*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
    }
    function Draw2(){
        var dotx;//保存水平位置的变量，用于绘制单个圆点
        var doty;//保存垂直位置的变量，用于绘制单个圆点
        ctx.beginPath();
        dotx=dx+0.25*dicewidth;
        doty=dy+0.25*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        dotx=dx+0.75*dicewidth;
        doty=dy+0.75*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
    }
    function Draw4(){
        var dotx;//保存水平位置的变量，用于绘制单个圆点
        var doty;//保存垂直位置的变量，用于绘制单个圆点
        ctx.beginPath();
        dotx=dx+0.25*dicewidth;
        doty=dy+0.25*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        dotx=dx+0.75*dicewidth;
        doty=dy+0.25*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
        ctx.beginPath();
        dotx=dx+0.25*dicewidth;
        doty=dy+0.75*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        dotx=dx+0.75*dicewidth;
        doty=dy+0.75*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
    }
    function Draw2mid(){
        var dotx;//保存水平位置的变量，用于绘制单个圆点
        var doty;//保存垂直位置的变量，用于绘制单个圆点
        ctx.beginPath();
        dotx=dx+0.25*dicewidth;
        doty=dy+0.5*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        dotx=dx+0.75*dicewidth;
        doty=dy+0.5*diceheight;
        ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
    }
    </script>
</body>
</html>
效果：
在这里插入图片描述