html5 骰子小游戏开发

原创 2016年09月05日 19:02:09
<!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游戏开发-弹幕+仿雷电小游戏demo

本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。本篇文章详细讲解如何用html5来开发一款射击游戏,雷电可以说是射击游戏中的经典,下面就来模仿一下。先看一下游戏截图演示地址h...

html5游戏开发之-----祖玛小游戏<原创>

/*祖玛小游戏相信很多人玩过, 今天我尝试在html5的画布上尝试用js写了一个小游戏, 开过过程的感悟是: 遇到一堆代码的时候,应该首先得出一个整体的框架 然后根据这个粗略的框架进行...

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫“ html5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本。自从看了那几篇文章,我便对游戏开发有了基本的认识。今天我也以零基础...

html5入门游戏掷骰子

  • 2013-08-05 17:13
  • 38KB
  • 下载

Egret开发HTML5小游戏代码分享

本游戏为《Egret HTML5游戏开发指南》中的案例。作者将代码在这里做一下分享。案例中有两个主要的代码文件,一个Main.ts,一个Circle.ts。在CIrcle.ts中使用了egret.Tw...

html5 骰子游戏

下面是我根据craps骰子游戏的规则,利用html5的canves+js写好的骰子游戏,代码略微长,不过重复比较多,也有适当的注释   "http://www.w3.org/TR/xhtml1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)