Html5最简单的游戏Demo——Canvas绘图的骰子

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>骰子游戏</title>

    <script type="text/javascript">

        var crapsSize = 100;//骰子的width，height

        var crapsMargin = 50;//骰子的边距

        var pointRadius = 10;//点的半径

        var money = 500;//钱

        function InitCraps() {

            drawCraps(6, 6, 6);

            var sumLabel = document.getElementById("coinSum");

            sumLabel.textContent = money;

        }

        function Bet() {

            var num1 = Math.floor(Math.random() * 6 + 1);

            var num2 = Math.floor(Math.random() * 6 + 1);

            var num3 = Math.floor(Math.random() * 6 + 1);

            drawCraps(num1, num2, num3);

            var resultLabel = document.getElementById("betResult");

            var sumLabel = document.getElementById("coinSum");

            var bigRadio = document.getElementById("bigRadio");

            var crapsSum = num1 + num2 + num3;

            if (crapsSum == 3 || crapsSum == 18) {//庄家通杀

                money = money - 50;

                sumLabel.textContent = money;

                resultLabel.textContent = "庄家通杀！";

            }

            else if (crapsSum <= 10) {//4~10，小

                if (bigRadio.checked) {

                    money = money - 50;

                    sumLabel.textContent = money;

                    resultLabel.textContent = "有赌未为输，继续！";

                }

                else {

                    money = money + 50;

                    sumLabel.textContent = money;

                    resultLabel.textContent = "不赌不知时运高，继续！";

                }

            }

            else {//11~17，大

                if (bigRadio.checked) {

                    money = money + 50;

                    sumLabel.textContent = money;

                    resultLabel.textContent = "不赌不知时运高，继续！";

                }

                else {

                    money = money - 50;

                    sumLabel.textContent = money;

                    resultLabel.textContent = "有赌未为输，继续！";

                }

            }

        }

        function drawCraps( craps1,craps2,craps3) {

            var ctx = document.getElementById("myCanvas").getContext("2d");

            var crapsArray = new Array(craps1, craps2, craps3);

            for (var i = 0; i < 3; i++) {

                var xOffset = crapsMargin * (i + 1) + crapsSize * i;

                ctx.clearRect(xOffset, crapsMargin, crapsSize, crapsSize);

                switch (crapsArray[i]) {

                    case 1: draw1(ctx, xOffset);

                        break;

                    case 2: draw2(ctx, xOffset);

                        break;

                    case 3: draw3(ctx, xOffset);

                        break;

                    case 4: draw4(ctx, xOffset);

                        break;

                    case 5: draw5(ctx, xOffset);

                        break;

                    default: draw6(ctx, xOffset);

                        break;

                }

            }

        }

        function drawRect(ctx,xOffset) {

            ctx.strokeRect(xOffset, crapsMargin, crapsSize, crapsSize);

        }

        function draw1(ctx, xOffset) {

            ctx.beginPath();

            ctx.arc(xOffset + crapsSize / 2, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);

            ctx.fill();

            drawRect(ctx, xOffset);

        }

        function draw3(ctx, xOffset) {

            draw1(ctx, xOffset);

            draw2(ctx, xOffset);

        }

        function draw5(ctx, xOffset) {

            draw4(ctx, xOffset);

            draw1(ctx, xOffset);

        }

        function draw4(ctx, xOffset) {

            ctx.beginPath();

            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);

            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);

            ctx.closePath();

            ctx.fill();

            ctx.beginPath();

            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);

            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);

            ctx.closePath();

            ctx.fill();

            drawRect(ctx, xOffset);

        }

        function draw2(ctx, xOffset) {

            ctx.beginPath();

            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);

            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);

            ctx.fill();

            drawRect(ctx, xOffset);

        }

        function draw6(ctx, xOffset) {

            ctx.beginPath();

            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);

            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);

            ctx.closePath();

            ctx.fill();

            draw4(ctx, xOffset);

        }

    </script>

</head>

<body onload="InitCraps()">

    <canvas id="myCanvas" width="500" height="200">your broswer does not support canvas.</canvas>

    <br />

    <input type="radio" name="sex" value="大" id="bigRadio" checked="checked"/>大

    <input type="radio" name="sex" value="小" />小

    <br />

    <input type="button" value="play" onclick="Bet()" />

    <br />

    <label>*三个骰子，总点数为4至10称作小，11至17为大，围骰除外</label>

    <br />

    <label>本次结果：</label>

    <label id="betResult">Null</label>

    <br />

    <label>当前钱币总数为：</label>

    <label id="coinSum">0</label>

</body>

</html>

Html5最简单的游戏Demo——Canvas绘图的骰子的更多相关文章

Html5最简单的游戏Demo——Canvas绘图的弹弹球
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
Html5 学习系列（五）Canvas绘图API快速入门（1）
引言:Canvas绘图API快速入门在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
HTML5 学习笔记（四）——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
Html5 学习系列（五）Canvas绘图API快速入门（2）
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
HTML5 十大新特性(四)——Canvas绘图
H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...
【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

Java类集-list
Collection 子接口: ArrayList是List 接口和Collection接口的一个子类,用于实例化两种接口 package leiji; import java.util.ArrayL ...
operator[] 重载
#include <iostream>#include <vector>#include <string> class Assoc { struct Pair ...
PCB Windows远程桌面一键登录
开发时会经常需远程操作服务器,每次运行再也熟悉不过的命令 mstsc 或 mstsc -v 120.79.36.65 远程到目标服务器, 每次需输入密码,弹出烦人的如何免密码一键登录呢,其实微软已 ...
14招搞定JavaScript调试
14招搞定JavaScript调试译者按: 很多时候,大家可能只是依靠console.log来调试JavaScript代码,这样做的局限性不言而喻,这篇博客将教你几招实用的调试技巧. 原文: The ...
python利用有道翻译实现“语言翻译器”的功能
import urllib.request import urllib.parse import json while True: content = input('请输入需要翻译的内容(退出输入Q) ...
A - HQ9+
Problem description HQ9+ is a joke programming language which has only four one-character instructio ...
P1796 汤姆斯的天堂梦_NOI导刊2010提高（05）
题目描述汤姆斯生活在一个等级为0的星球上.那里的环境极其恶劣,每天12小时的工作和成堆的垃圾让人忍无可忍.他向往着等级为N的星球上天堂般的生活. 有一些航班将人从低等级的星球送上高一级的星球,有时需 ...
Python yield解析
Pyhton generators and the yield keyword At a glance,the yield statement is used to define generators ...
Spring logger 配置
1. logback-spring.xml <?xml version="1.0" encoding="UTF-8"?> <configura ...
联想VIBE Shot（Z90-7/全网通）解锁BootLoader
工具下载链接: http://pan.baidu.com/s/1dF7zGTb 备用下载链接: http://pan.baidu.com/s/1i4UHP4L 本篇教程教你如何傻瓜式解锁BootLoa ...

Html5最简单的游戏Demo——Canvas绘图的骰子

Html5最简单的游戏Demo——Canvas绘图的骰子的更多相关文章

随机推荐

热门专题