使用HTML5的canvas元素和js实现一个超简单的随机骰子

本文链接：https://blog.csdn.net/MCprogramme/article/details/120874447

这里共定义了四个函数，draw1，draw2，draw4，draw2mid,其中的3个点的面用draw1和draw2组合，五个点的面有draw1和draw4，六个点的面用draw4和draw2。

这个例子也是在书上看到的，只是看了一眼就着手做了，做完后觉得挺简单的很容易明白，或许对于canvas的理解和使用有一定的帮助

<body>
<canvas id="canvas" width="400" height="300">
        your browser doesn`t support the HTML5 element canvas.
    </canvas>
    <button>开始游戏</button>
</body>
<script>
    let buttonNode = document.querySelector("button");
    let timer = null;
    let cwidth = 400;
    let cheight = 300;
    //存放画布的宽高
    let dicex = 50;
    let dicey = 50;
    //骰子的位置
    let diceWidth = 100;
    let diceHeight = 100;
    //骰子的大小
    let dotrad = 6;
    //骰子中圆点的半径
    let ctx;
    //存储画笔
    let dx;
    let dy;
    //有两个骰子dx，dy定义每个骰子的位置
    buttonNode.addEventListener("click",runing);
    function runing(){
        if(timer){
            clearInterval(timer);
            timer=null;
            buttonNode.innerHTML = "点击开始";
        }else{
            timer = setInterval(throwdice,200);
            buttonNode.innerHTML = "点击暂停";
        };
    };
    function throwdice(){
        let ch = 1+Math.floor(Math.random()*6);
        dx = dicex;
        dy = dicey;
        drawface(ch);
        dx = dicex + 150;
        ch = 1 + Math.floor(Math.random()*6);
        drawface(ch);
    };
    function drawface(n){
        ctx = document.getElementById("canvas").getContext("2d");
        ctx.lineWidth = 5;
        ctx.clearRect(dx,dy,diceWidth,diceHeight);
        ctx.strokeRect(dx,dy,diceWidth,diceHeight);
        let dotx;
        let 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:
                draw1();
                draw4();
                break;
            case 6:
                draw4();
                draw2mid();
                break;
        };
    }
    function draw1(){
        let dotx;
        let doty;
        ctx.beginPath();
        dotx = dx + 0.5*diceWidth;
        doty = dy + 0.5*diceHeight;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //中间
        ctx.closePath();
        ctx.fill();
    };
    function draw2(){
        let dotx;
        let doty;
        ctx.beginPath();
        dotx = dx + 3*dotrad;
        doty = dy + 3*dotrad;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //左上
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        dotx = dx + diceWidth - 3*dotrad;
        doty = dy + diceHeight - 3*dotrad;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //右下
        ctx.closePath();
        ctx.fill();
    };
    function draw4(){
        let dotx;
        let doty;
        ctx.beginPath();
        dotx = dx + 3*dotrad;
        doty = dy + 3*dotrad;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //左上
        dotx = dx + diceWidth - 3*dotrad;
        doty = dy + diceHeight - 3*dotrad;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //右下
        ctx.closePath();
        ctx.fill();
        ctx.beginPath();
        dotx = dx + 3*dotrad;
        doty = dy + diceHeight -3*dotrad;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //坐下
        dotx = dx + diceWidth - 3*dotrad;
        doty = dy + 3*dotrad;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //右上
        ctx.closePath();
        ctx.fill();
    };
    function draw2mid(){
        let dotx;
        let doty;
        ctx.beginPath();
        dotx = dx + 3*dotrad;
        doty = dy + 0.5*diceHeight;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //左中
        dotx = dx + diceWidth - 3*dotrad;
        doty = dy +0.5*diceHeight;
        ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
        //右中
        ctx.closePath();
        ctx.fill();
    };
    

</script>