如何用html5制作抽奖游戏,HTML5小游戏-简单抽奖小游戏

SlotMachine

}#test{background:#fff;width:100%;max-width:551px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);

}

您的浏览器不支持Canvas,现在都什么年代了

let canvas=document.querySelector(‘#test‘);//引入缩放比例计算，兼容多种终端

let scaling={

w: canvas.clientWidth/canvas.width,

h: canvas.clientHeight/canvas.height

};if(canvas.getContext) {

let ctx=canvas.getContext(‘2d‘);

let bg= newImage();

let imgs={

left:newImage(),

middle:newImage(),

right:newImage()

};

let flag={

left:1,

middle:1,

right:1,

max:6};

let ps={

left: [70,160],

middle: [185,160],

right: [295,160]

};

let interval= 1000 / 10;

let timer={

left:null,

middle:null,

right:null};//绘制图片

functiondrawImg(img, x, y) {

ctx.drawImage(img, x, y, img.width, img.height);

}//绘制背景

functiondrawBg(img) {

let pattern=ctx.createPattern(img,‘no-repeat‘);

ctx.fillStyle=pattern;

ctx.fillRect(0,0,533,411);

}//绘制图片边框

functiondrawBorder(x, y, w, h) {

ctx.save();

ctx.strokeStyle= ‘#000000‘;

ctx.lineWidth= 4;

ctx.strokeRect(x, y, w, h);

ctx.restore();

}//判断点击是否在图片范围内

functionisPointInPath(x, y, x1, y1) {returnx<=x1&&x+ 100 >=x1&&y<=y1&&y+ 100 >=y1;

}//动画开始

functionstart(key) {

timer[key]=setInterval(function() {

flag[key]===flag.max?flag[key]= 1: flag[key]++;

imgs[key].src= ‘./img/slot‘ +flag[key]+ ‘.png‘;

}, interval);

}//动画停止

functionstop(key) {

clearInterval(timer[key]);

timer[key]= null;

}//初始化

functioninit() {

bg.src= ‘./img/machine.png‘;

bg.οnlοad=()=>{

drawBg(bg);

drawBorder(ps.left[0], ps.left[1],100,100);

drawBorder(ps.middle[0], ps.middle[1],100,100);

drawBorder(ps.right[0], ps.right[1],100,100);

imgs.left.src= ‘./img/slot6.png‘;

imgs.left.οnlοad=()=>{

drawImg(imgs.left, ps.left[0], ps.left[1]);

};

imgs.middle.src= ‘./img/slot6.png‘;

imgs.middle.οnlοad=()=>{

drawImg(imgs.middle, ps.middle[0], ps.middle[1]);

};

imgs.right.src= ‘./img/slot6.png‘;

imgs.right.οnlοad=()=>{

drawImg(imgs.right, ps.right[0], ps.right[1]);

};

};

canvas.addEventListener(‘click‘,function(e) {//引入缩放比例计算，兼容多种终端

let x1=e.offsetX/scaling.w;

let y1=e.offsetY/scaling.h;for(let keyinps) {if(ps.hasOwnProperty(key)) {

let item=ps[key];if(!isPointInPath(item[0], item[1], x1, y1))continue;if(timer[key]) {

stop(key);

}else{

start(key);

}

}

}

});

}

init();

}

})();