本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下
因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS, JS来做骰子游戏即有前端了,又省了后台处理,代码量会比用JAVA来做少了非常非常多。考虑到这种实验实在不想浪费时间去用JAVA写于是有了一下JS实现的版本。但是大家都知道JS的面向对象其实是伪面向对象。我感觉并不好用,因为用句柄的方式无法传值,你封装成对象了还得拆出来成为过程(单一方法)来用。
<>强版本1:(没有用面向对象)
& lt; ! DOCTYPE>
& lt; html>
& lt; head>
& lt; title>掷骰子游戏作者:SenDog
& lt;元charset=皍tf - 8”比;
& lt; script>
var leftX=150;
var topY=100;
var diceX=80;
var冒险=80;
var dotR=4;
var计算=0;
var lastNum=0;
var=false标记;
函数clickMe () {
数=0;
如果(国旗){
返回错误;
}
国旗=true;
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.beginPath ();//ctx.strokeRect (leftX, topY diceX,冒险);//绘制矩形加粗//ctx.strokeRect (leftX + 150、topY diceX,冒险);
setTimeout(函数(){
随机(ctx);}, 200);
}
函数drawDice (ctx, randomNum randomNum2){//绘制骰子123456的点数
ctx.clearRect (leftX, topY diceX,冒险);
开关(randomNum) {
案例1:
draw1 ();
打破;
案例2:
draw2 ();
打破;
案例3:
draw3 ();
打破;
案例4:
draw4 ();
打破;
例5:
draw5 ();
打破;
例6:
draw6 ();
打破;
}
ctx.clearRect (leftX + 150、topY diceX,冒险);
开关(randomNum2) {
案例1:
draw11 ();
打破;
案例2:
draw22 ();
打破;
案例3:
draw33 ();
打破;
案例4:
draw44 ();
打破;
例5:
draw55 ();
打破;
例6:
draw66 ();
打破;
}
数+ +;
如果(count>=20) {
如果(randomNum + randomNum2==7) {
alert("骰子1:”+ randomNum +”,骰子2:”+ randomNum2 +“总和为7您赢了");
}
其他{
alert("骰子1:”+ randomNum +”;骰子2:”+ randomNum2);
}
国旗=false;
返回错误;
其他}{
setTimeout(函数(){
随机(ctx);
},200 -数);
}
}
随机函数(ctx){//生成骰子点数,如果和上一步的点数相同重新生成点数,并绘制
var randomNum=Math.floor (math . random () * 6) + 1;
var randomNum2=Math.floor (math . random () * 6) + 1;
如果(randomNum==lastNum) {
随机(ctx);
其他}{
lastNum=randomNum;
drawDice (ctx、randomNum randomNum2);
}
}
函数commonDraw (ctx、dotX dotY) {
ctx.beginPath ();
ctx.arc (dotX dotY dotR 0, 2 * Math.PI,假);
ctx.stroke ();
ctx.fill ();
}
函数draw1 () {
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 0000 ff ";
var dotX=leftX + diceX/2;
var dotY=topY +冒险/2;
commonDraw (ctx、dotX dotY);
}
函数draw2 () {
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 99 ff66”;
var dotX=leftX + 4 * dotR;
var dotY=topY + 4 * dotR;
commonDraw (ctx、dotX dotY);
var dotX=leftX + diceX-4 * dotR;
var dotY=topY + diceY-4 * dotR;
commonDraw (ctx、dotX dotY);
}
函数draw3 () {
draw1 ();
draw2 ();
}
函数draw4 () {
draw2 ();
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 99 cc00”;
var dotX=leftX + diceX-4 * dotR;
var dotY=topY + 4 * dotR;
commonDraw (ctx、dotX dotY);
var dotX=leftX + 4 * dotR;
var dotY=topY + diceY-4 * dotR;
commonDraw (ctx、dotX dotY);
}
函数draw5 () {
draw1 ();
draw4 ();
}
函数draw6 () {
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 996633”;
var dotX=leftX + 4 * dotR;
var dotY=topY +冒险/2
commonDraw (ctx、dotX dotY);
var dotX=leftX + diceY-4 * dotR;
commonDraw (ctx、dotX dotY);
draw4 ();
}/* - - - - - - - - - - - - -骰子2 - - - - - - - - - - - - - - - - - */函数draw11 () {
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 0000 ff ";
var dotX=leftX + diceX/2 + 150;
var dotY=topY +冒险/2;
commonDraw (ctx、dotX dotY);
}
函数draw22 () {
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 99 ff66”;
var dotX=leftX + 4 * dotR + 150;
var dotY=topY + 4 * dotR;
commonDraw (ctx、dotX dotY);
var dotX=leftX + diceX-4 * dotR + 150;
var dotY=topY + diceY-4 * dotR;
commonDraw (ctx、dotX dotY);
}
函数draw33 () {
draw11 ();
draw22 ();
}
函数draw44 () {
draw22 ();
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 99 cc00”;
var dotX=leftX + diceX-4 * dotR + 150;
var dotY=topY + 4 * dotR;
commonDraw (ctx、dotX dotY);
var dotX=leftX + 4 * dotR + 150;
var dotY=topY + diceY-4 * dotR;
commonDraw (ctx、dotX dotY);
}
函数draw55 () {
draw11 ();
draw44 ();
}
函数draw66 () {
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.fillStyle=" # 996633”;
var dotX=leftX + 150 + 4 * dotR;
var dotY=topY +冒险/2
commonDraw (ctx、dotX dotY);
var dotX=leftX + 150 + diceY-4 * dotR;
commonDraw (ctx、dotX dotY);
draw44 ();
}
init()函数{
var ctx=. getelementbyid(“画布”).getContext (2 d);
ctx.beginPath ();
ctx.strokeRect (leftX, topY diceX,冒险);//绘制灰色框框第一个骰子
ctx.strokeRect (leftX + 150、topY diceX,冒险);//第二个骰子的灰色框的框
ctx.stroke ();
draw6 ();
draw66 ();
}
& lt;/script>
& lt;/head>
& lt;身体οnlοad=" init();“比;
& lt;帆布id=盎肌笨矶?=?00”“600”高度比;
你的浏览器不支持html5
& lt;/canvas>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/开始“οnclick=癱lickMe();“/比;
& lt;/body>
& lt;/html>
