- <!doctype html5>
- <html>
- <head>
- <style>
- #myCanvas{
- border:3px solid red;
- background:#62ccff;
- }
- form{
- position:absolute;
- left:50px;
- top:500px;
- }
- </style>
- </head>
- <body>
- <canvas id="myCanvas" width=900 height=600>你的浏览器不支持canvas,趁早换了吧</canvas>
- <form>
- <input type="button" value="掷骰子" id="throwdice" onclick="throwDice();" />
- 得分:<input type="text" value=0 id="score" />
- 成绩:<input type="text" value=" " id="result" />
- </form>
- <script>
- var sum1,sum2;
- var str = "这是您第一次投掷";
- var myCanvas = $("myCanvas");
- var myScore = $("score");
- var myResult = $("result");
- var myDice = $("throwdice");
- var throwNum = true;
- var cxt = myCanvas.getContext("2d");
- cxt.beginPath();
- cxt.lineWidth = 5;
- cxt.strokeStyle = "#ff8e1e";
- cxt.strokeRect(100,100,50,50);
- cxt.strokeRect(200,100,50,50);
- //cxt.arc(110,110,5,0,2*Math.PI,true);
- //cxt.arc(140,110,5,0,2*Math.PI,true);
- //cxt.arc(110,140,5,0,2*Math.PI,true);
- //cxt.arc(140,140,5,0,2*Math.PI,true);
- //cxt.fill();
- cxt.closePath();
- cxt.beginPath();
- //cxt.translate(100,200);
- //cxt.rotate(1/6*Math.PI);
- cxt.lineWidth = 1;
- cxt.strokeStyle = "#8000ff";
- cxt.font = "36pt Arial";
- cxt.strokeText(str,200,250);
- cxt.clothPath();
- //cxt.restore();
- function $(id){
- return document.getElementById(id);
- }
- function throwDice(){
- var strWidth = cxt.measureText(str).width;
- cxt.clearRect(200,200,200+strWidth,250);
- if(!throwNum){
- str = "这是您第二次投掷";
- }else{
- str = "这是您第一次投掷";
- }
- cxt.strokeText(str,200,250);
- throwNum = !throwNum;
- var num1=Math.floor(6*Math.random())+1;
- var num2=Math.floor(6*Math.random())+1;
- draw1(num1,num2);
- gameRule(throwNum,num1,num2);
- }
- function draw1(num1,num2){
- myScore.value = num1+num2;
- cxt.clearRect(102,102,46,46);
- cxt.clearRect(202,102,46,46);
- cxt.beginPath();
- switch(num1){
- case 1:
- cxt.arc(125,125,5,0,2*Math.PI,true);
- break;
- case 2:
- cxt.arc(110,110,5,0,2*Math.PI,true);
- cxt.arc(140,140,5,0,2*Math.PI,true);
- break;
- case 3:
- cxt.arc(125,125,5,0,2*Math.PI,true);
- cxt.arc(110,110,5,0,2*Math.PI,true);
- cxt.arc(140,140,5,0,2*Math.PI,true);
- break;
- case 4:
- cxt.arc(110,110,5,0,2*Math.PI,true);
- cxt.arc(140,110,5,0,2*Math.PI,true);
- cxt.arc(110,140,5,0,2*Math.PI,true);
- cxt.arc(140,140,5,0,2*Math.PI,true);
- break;
- case 5:
- cxt.arc(125,125,5,0,2*Math.PI,true);
- cxt.arc(110,110,5,0,2*Math.PI,true);
- cxt.arc(140,110,5,0,2*Math.PI,true);
- cxt.arc(110,140,5,0,2*Math.PI,true);
- cxt.arc(140,140,5,0,2*Math.PI,true);
- break;
- case 6:
- cxt.arc(110,110,5,0,2*Math.PI,true);
- cxt.arc(140,110,5,0,2*Math.PI,true);
- cxt.arc(110,125,5,0,2*Math.PI,true);
- cxt.arc(140,125,5,0,2*Math.PI,true);
- cxt.arc(110,140,5,0,2*Math.PI,true);
- cxt.arc(140,140,5,0,2*Math.PI,true);
- break;
- }
- cxt.fill();
- cxt.beginPath();
- switch(num2){
- case 1:
- cxt.arc(225,125,5,0,2*Math.PI,true);
- break;
- case 2:
- cxt.arc(210,110,5,0,2*Math.PI,true);
- cxt.arc(240,140,5,0,2*Math.PI,true);
- break;
- case 3:
- cxt.arc(225,125,5,0,2*Math.PI,true);
- cxt.arc(210,110,5,0,2*Math.PI,true);
- cxt.arc(240,140,5,0,2*Math.PI,true);
- break;
- case 4:
- cxt.arc(210,110,5,0,2*Math.PI,true);
- cxt.arc(240,110,5,0,2*Math.PI,true);
- cxt.arc(210,140,5,0,2*Math.PI,true);
- cxt.arc(240,140,5,0,2*Math.PI,true);
- break;
- case 5:
- cxt.arc(225,125,5,0,2*Math.PI,true);
- cxt.arc(210,110,5,0,2*Math.PI,true);
- cxt.arc(240,110,5,0,2*Math.PI,true);
- cxt.arc(210,140,5,0,2*Math.PI,true);
- cxt.arc(240,140,5,0,2*Math.PI,true);
- break;
- case 6:
- cxt.arc(210,110,5,0,2*Math.PI,true);
- cxt.arc(240,110,5,0,2*Math.PI,true);
- cxt.arc(210,125,5,0,2*Math.PI,true);
- cxt.arc(240,125,5,0,2*Math.PI,true);
- cxt.arc(210,140,5,0,2*Math.PI,true);
- cxt.arc(240,140,5,0,2*Math.PI,true);
- break;
- }
- cxt.fill();
- }
- function gameRule(throwNum,num1,num2){
- if(!throwNum){
- sum1 = num1+num2;
- myResult.value = "请在投掷一次,分出胜负";
- }else{
- sum2 = num1+num2;
- if(sum1>sum2){
- myResult.value = "恭喜您,您赢了";
- }else{
- myResult.value = "很稀罕,您输了";
- }
- }
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/190820135210.html
来源: http://www.codesnippet.cn/detail/190820135210.html