html5 骰子小游戏开发
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>骰子游戏</title>
    <script type="text/javascript" src="js/math.js"></script>//见上传的文件
    <script type="text/javascript">
    var firstCavas;
    var stopState = false;
    function init() {
        firstCavas = document.getElementById("canvasOne").getContext("2d");//平面画布
        //画框
        firstCavas.strokeRect(0,0,100,100);
        //画一个圆
        drawOne();

    }

//1点

    function drawOne() {
        firstCavas.beginPath();
        firstCavas.arc(50,50,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();

    }

//2点

    function drawTwo() {
        firstCavas.beginPath();
        firstCavas.arc(20,20,3,0,Math.PI*2,false);
        firstCavas.arc(80,80,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();

    }

//3点

    function drawThree() {
        firstCavas.beginPath();
        firstCavas.arc(20,20,3,0,Math.PI*2,false);
        firstCavas.arc(50,50,3,0,Math.PI*2,false);
        firstCavas.arc(80,80,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();

    }

//4点

    function drawFour() {
        firstCavas.beginPath();
        firstCavas.arc(25,25,3,0,Math.PI*2,false);
        firstCavas.arc(25,75,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();
        firstCavas.beginPath();
        firstCavas.arc(75,25,3,0,Math.PI*2,false);
        firstCavas.arc(75,75,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();

    }

//5点

    function drawFive() {
        firstCavas.beginPath();
        firstCavas.arc(25,25,3,0,Math.PI*2,false);
        firstCavas.arc(25,75,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();
        firstCavas.beginPath();
        firstCavas.arc(50,50,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();
        firstCavas.beginPath();
        firstCavas.arc(75,25,3,0,Math.PI*2,false);
        firstCavas.arc(75,75,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();

    }

////6点

    function drawSix() {
        firstCavas.beginPath();
        firstCavas.arc(25,25,3,0,Math.PI*2,false);
        firstCavas.arc(50,25,3,0,Math.PI*2,false);
        firstCavas.arc(75,25,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();
        firstCavas.beginPath();
        firstCavas.arc(25,75,3,0,Math.PI*2,false);
        firstCavas.arc(50,75,3,0,Math.PI*2,false);
        firstCavas.arc(75,75,3,0,Math.PI*2,false);
        firstCavas.closePath();
        firstCavas.fill();

    }

//清除画布并重新生成画布

    function clearCavas() {
        firstCavas.clearRect(0,0,100,100);
        firstCavas.strokeRect(0,0,100,100);
    }
    function implement() {
        var dotNum = 1+Math.floor(Math.random()*6);
        switch(dotNum){
            case 1:
                clearCavas();
                drawOne();
                break;
            case 2:
                clearCavas();
                drawTwo();
                break;
            case 3:
                clearCavas();
                drawThree();
                break;
            case 4:
                clearCavas();
                drawFour();
                break;
            case 5:
                clearCavas();
                drawFive();
                break;
            case 6:
                clearCavas();
                drawSix();
                break;
        }
        if(!stopState){
            setTimeout("implement()",10);
        }
    }
    function startimplement(){
        stopState = false;
        implement();
        document.getElementById("divButton").innerHTML = '<input type="button" value="结束" onclick="closeimplement()"/>';
    }
    function closeimplement() {
        stopState = true;
        implement();
        document.getElementById("divButton").innerHTML = '<input type="button" value="开始" onclick="startimplement()"/>';
    }
    </script>
</head>
<body onload="init()">

    <canvas id="canvasOne" width="400" height="300">

你的浏览器不支持html5 //只有当浏览器不支持html5时才会显示

    </canvas>
    <div id="divButton">
        <input type="button" value="开始" onclick="startimplement()"/>
    </div>
</body>
</html>
阅读更多
文章标签: html5 游戏开发
个人分类: web前端
想对作者说点什么? 我来说一句

骰子游戏源码 html5 手机端 游戏

2017年10月29日 518KB 下载

html5骰子小游戏

2016年06月10日 2KB 下载

Android 下的摇骰子游戏

2009年12月30日 22KB 下载

HTML5生成骰子的页面

2014年07月11日 5KB 下载

html5入门游戏掷骰子

2013年08月05日 38KB 下载

没有更多推荐了,返回首页

不良信息举报

html5 骰子小游戏开发

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭