Html5骰子游戏

最新推荐文章于 2021-07-01 20:30:09 发布

转载最新推荐文章于 2021-07-01 20:30:09 发布 · 723 阅读

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML5 Canvas实现的骰子游戏，通过JavaScript进行逻辑处理。玩家点击按钮投掷两个骰子，并根据首次投掷结果决定后续的游戏流程。游戏包含胜利、失败和平局等不同情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html> <head> <title>骰子游戏</title> <meta charset="utf-8"/> <script type="text/javascript"> // 画布大小 var canvasWidth = 400; var canvasHeight = 300; // 骰子大小 var diceWidth = 100; var diceHeight = 100; // 骰子位置 var diceX = 50; var diceY = 50; // 偏移量，用于绘制不同位置的骰子 var dx; var dy; // 点半径 var dotRadius = 6; var ctx; var point; var isFirstThrownFlag = true; function btnThrowClickHandler() { var sum = 0; // 记录每一次的两个骰子的和 ctx = document.getElementById("canvas").getContext("2d"); // 第一个骰子绘制开始 var randomNum = Math.floor((Math.random() * 6)) + 1; sum += randomNum; dx = diceX; dy = diceY; draw(randomNum); randomNum = Math.floor((Math.random() * 6)) + 1; sum += randomNum; dx = diceX + 150; draw(randomNum); if(isFirstThrownFlag) { switch(sum) { case 7: case 11: document.getElementById("txtOutCome").value = "You Win!"; break; case 2 : case 3 : case 12: document.getElementById("txtOutCome").value = "You lose!!"; break; default: point = sum; isFirstThrownFlag = false; document.getElementById("txtScore").value = point; document.getElementById("txtStage").value = "Need folloy up throw!!"; document.getElementById("txtOutCome").value = ""; break; } } else { switch(sum) { case point: document.getElementById("txtOutCome").value = "You Win!!"; document.getElementById("txtStage").value = "Back to first throw!!"; isFirstThrownFlag = true; document.getElementById("txtScore").value = ""; break; case 7: document.getElementById("txtOutCome").value = "You lose!!"; document.getElementById("txtStage").value = "Back to first throw!!"; isFirstThrownFlag = true; document.getElementById("txtScore").value = ""; break; } } } function draw(num) { // 绘制骰子的矩形外框 ctx.lineWidth = 5; ctx.clearRect(dx,dy,diceWidth,diceHeight); ctx.strokeRect(dx,dy,diceWidth,diceHeight); // 设置圆点的颜色 ctx.fillStyle = "#009966"; switch(num) { case 1: draw1(); break; case 2: draw2(); break; case 3: draw1(); draw2(); break; case 4: draw4(); break; case 5: draw1(); draw4(); break; case 6: draw2mid(); draw4(); break; default: break; } } function draw1() { // 绘制一个点，放到正中间 var dotX = dx + diceWidth * 0.5; var dotY = dy + diceHeight * 0.5; ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); ctx.closePath(); ctx.fill(); } function draw2() { // 绘制两个点，一个左上角，一个右下角 // 左上点的角圆心 var dotX = dx + 3 * dotRadius; var dotY = dy + 3 * dotRadius; ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); // 右下角点的圆心 dotX = dx + diceWidth - 3 * dotRadius; dotY = dy + diceHeight - 3 * dotRadius; ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); ctx.closePath(); ctx.fill(); } function draw4() { // 先绘制左上角和右下角 draw2(); // 绘制右上角 var dotX = dx + diceWidth - 3 * dotRadius; var dotY = dy + 3 * dotRadius; ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); dotX = dx + 3 * dotRadius; dotY = dy + diceHeight - 3 * dotRadius; ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); ctx.closePath(); ctx.fill(); } function draw2mid() { // 第二行中间绘制两个点 var dotX = dx + 3 * dotRadius; var dotY = dy + 0.5 * diceHeight; ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); dotX = dx + diceWidth - 3 * dotRadius; ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); ctx.closePath(); ctx.fill(); } </script> </head> <body > <canvas id="canvas" width="400" height="300"> Sorry,your browser doesn't support Canvas!!! </canvas> <input type="button" value="Throw" onClick="btnThrowClickHandler()"/><br/> <table> <tr> <td>Stage:<input type="text" id="txtStage"/></td> <td>Score:<input type="text" id="txtScore"/></td> <td>OutCome:<input type="text" id="txtOutCome"/></td> </tr> </table> </body></html>