清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Craps game</title> <script> var cwidth =400; var cheight = 300; var dicex = 50; var dicey = 50; var dicewidth = 100; var diceheight = 100; var dotard = 6; var ctx; var dx; var dy; var firstturn = true; var point; function throwdice(){ var sum; var ch = 1+ Math.floor(Math.random()*6); sum = ch; dx = dicex; dy = dicey; drawface(ch); dx = dicex +150; ch = 1+Math.floor(Math.random()*6); sum +=ch; drawface(ch); if(firstturn){ switch(sum){ case 7: case 11: document.f.outcome.value = "You win!"; break; case 2: case 3: case 12: document.f.outcome.value = "You lose!"; break; default: point = sum; document.f.pv.value = point; firstturn = false; document.f.stage.value = "Need follow-up throw."; document.f.outcome.value=" "; } } else{ switch(sum){ case point: document.f.outcome.value = "You win!"; document.f.stage.value = "Back to first throw."; document.f.pv.value=" "; firstturn = true; break; case 7: document.f.outcome.value="You lose!"; document.f.stage.value="Back to first throw."; document.f.pv.value=" "; firstturn = true; } } } function drawface(n){ ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 5; ctx.clearRect(dx,dy,dicewidth,diceheight); ctx.strokeRect(dx,dy,dicewidth,diceheight); var dotx; var doty; ctx.fillStyle = "#009966"; switch(n){ case 1: draw1(); break; case 2: draw2(); break; case 3: draw2(); draw1(); break; case 4: draw4(); break; case 5: draw4(); draw1(); break; case 6: draw4(); draw2mid(); break; } } function draw1(){ var dotx; var doty; ctx.beginPath(); dotx = dx + .5*dicewidth; doty = dy + .5*diceheight; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } function draw2(){ var dotx; var doty; ctx.beginPath(); dotx = dx + 3*dotard; doty = dy + 3*dotard; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); dotx = dx + dicewidth-3*dotard doty = dy + diceheight-3*dotard; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } function draw4(){ var dotx; var doty; ctx.beginPath(); dotx = dx + 3*dotard; doty = dy + 3*dotard; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); dotx = dx + dicewidth-3*dotard doty = dy + diceheight-3*dotard; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); ctx.beginPath(); dotx = dx + 3*dotard; doty = dy + diceheight-3*dotard; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); dotx = dx + dicewidth-3*dotard doty = dy + 3*dotard; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } function draw2mid(){ var dotx; var doty; ctx.beginPath(); dotx = dx + 3*dotard; doty = dy + .5*deiceheight; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); dotx = dx + dicewidth-3*dotard; doty = dy + .5*deiceheight; ctx.arc(dotx,doty,dotard,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } </script> </head> <body> <canvas id="canvas" width="400" height="300"> 浏览器不支持HTML5的canvas元素</canvas> <br /> <button onClick="throwdice();">Throw dice</button> <form name="f"> Stage:<input name="stage" value="First Throw"/> Point:<input name="pv" value=" "/> Outcome:<input name="outcome" value=" "/> </form> </body> </html>