首页 > 代码库 > Html5最简单的游戏Demo——Canvas绘图的骰子
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绘图的骰子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。