html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
<title > 掷骰子游戏 </title>
- <style>
- #canvas{
- display: block;
- margin: 30px auto 0px;
- }
- .content{
- width: 200px;
- color: #333;
- letter-spacing: 1px;
- margin: 30px auto 0;
- }
- .content-btn{
- width: 100px;
- height: 35px;
- line-height: 35px;
- color: #fff;
- text-align: center;
- background: #398e55;
- border: 1px solid #0f7152;
- letter-spacing: 3px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- cursor: pointer;
- margin: 0 auto 30px;
- }
- #scrore{
- font-size: 64px;
- padding-left: 10px;
- color: mediumvioletred;
- font-weight: bold;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="400" height="300">Your browser doesn't support the HTML5 element canvas</canvas>
- <div class="content">
<div class="content-btn" id="start"> 开始 </div>
<div class="content-text"> 本次掷得分数: <span id="scrore">0</span></div>
- </div>
- <script src="http://cdn.bootCSS.com/jquery/3.2.1/jquery.min.js"></script>
- <script>
- $(function(){
- function Game(){
- this.cwidth = 400; // 画布的宽
- this.cheight = 300; // 画布的高
- this.dicex = 150; // 骰子水平位置变量
- this.dicey = 100; // 骰子垂直位置变量
- this.dicewidth = 100; // 骰子面宽度变量
- this.diceheight = 100; // 骰子面高度的变量
- this.dotrad = 10; // 保存一个圆点半径的变量
- this.ctx = null; // 保存画布上下文的变量, 所有绘制命令中都要用到
- this.init();
- };
- $.extend(Game.prototype,{
- init: function(){
- var self = this;
- self.render();
- },
- render: function(){
- var self = this;
- window.ctx = document.getElementById('canvas').getContext('2d');
- var image = new Image();
- image.src = 'http://pic.linecg.com/uploads/video_sucai/189125/20161115/189125_1479220805_799.jpg';
- image.onload = function(){
- ctx.drawImage(image,0,0,self.cwidth,self.cheight);
- self.bindEvent();
- };
- },
- bindEvent: function(){
- var self = this,
- $score = $('#scrore');
- $('#start').on('click',function(){
- $score.html('');
- var i = 0,
- speed = 30,
- count = null,
- timer = setInterval(function () {
- if(i <21){
- self.randowCount();
- i++;
- }else if(i>= 21){
- count = self.randowCount();
- $score.html(count);
- clearInterval(timer);
- }
- }, speed);
- });
- },
- drawface: function(ch){
- var self = this;
- ctx.lineWidth = 8;
- ctx.clearRect(self.dicex,self.dicey,self.dicewidth,self.diceheight);
- ctx.fillStyle = "#fff";
- ctx.strokeStyle = "rgba(100,13,14,0.4)";
- ctx.strokeRect(self.dicex,self.dicey,self.dicewidth,self.diceheight);
- ctx.fillRect(self.dicex,self.dicey,self.dicewidth,self.diceheight);
- switch (ch){
- case 1: self.draw1();break;
- case 2: self.draw2();break;
- case 3: self.draw3();break;
- case 4: self.draw4();break;
- case 5: self.draw4();self.draw1();break;
- case 6: self.draw4();self.draw2mid();break;
- }
- },
- draw1: function(){
- var self = this, dotx,doty;
- ctx.beginPath();
- ctx.fillStyle = '#000';
- dotx = self.dicex + 21 + 28;
- doty = self.dicey + 21 + 28;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- ctx.fill();
- },
- draw2: function(){
- var self = this, dotx,doty;
- ctx.beginPath();
- ctx.fillStyle = '#000';
- dotx = self.dicex + 21 + 28;
- doty = self.dicey + 25;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- doty = self.dicey + 17 + 28 * 2;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- ctx.fill();
- },
- draw3: function(){
- var self = this, dotx,doty;
- ctx.beginPath();
- ctx.fillStyle = '#000';
- dotx = self.dicex + 25;
- doty = self.dicey + 25;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- dotx = self.dicex + 21 + 28;
- doty = self.dicey + 21 + 28;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- dotx = self.dicex + 17 + 28 * 2;
- doty = self.dicey + 17 + 28 * 2;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- ctx.fill();
- },
- draw4: function(){
- var self = this, dotx,doty;
- ctx.beginPath();
- ctx.fillStyle = '#000';
- dotx = self.dicex + 25;
- doty = self.dicey + 25;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- doty = self.dicey + 17 + 28 * 2;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- dotx = self.dicex + 17 + 28 * 2;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- doty = self.dicey + 25;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- ctx.fill();
- },
- draw2mid: function(){
- var self = this, dotx,doty;
- ctx.beginPath();
- ctx.fillStyle = '#000';
- dotx = self.dicex + 25;
- doty = self.dicey + 21 + 28;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- dotx = self.dicex + 17 + 28 * 2;
- ctx.arc(dotx,doty,self.dotrad,0,Math.PI*2,true);
- ctx.closePath();
- ctx.fill();
- },
- randowCount: function () {
- var self = this, ch = 1 + Math.floor(Math.random()*6);
- self.drawface(ch);
- return ch;
- }
- });
- new Game();
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/24824/1784da2717b4e986d59a4ba8f6a23c13.html