关闭

html5 骰子小游戏开发

标签: html5游戏开发
203人阅读 评论(0) 收藏 举报
分类:
<!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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23160次
    • 积分:453
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:8篇
    • 译文:0篇
    • 评论:4条
    最新评论