引言：
九宮格抽獎一直就挺火爆，手機端也經常用，這不來了興趣寫了一波，看著效果還不錯，拿出來大家嘮嘮！
效果：
實作思路
-
繪制出背景大圖，兩張圖片，一張稍微小，并且稍小的圖片顏色更深一些；
-
繪制8張白色背景的小圖片（繪制的順序？待會說明），作為獎項卡的背景，一張立即抽獎的黃色背景圖片放在中間；
-
在對應的背景圖片上，繪制出獎項圖片和文字，完成整個抽獎頁面的布局；
-
給立即抽獎的背景圖片添加點擊事件，點擊后旋轉【開啟定時任務】（旋轉方式有3種，目前寫了順時針一種，另外兩種，只需在第2步設定好順序即可，待會詳細說明）；
-
旋轉的步數，目前設定的規則是2圈 + （0-8）隨機一位，因1圈是8步，2圈就是16步，加上隨機0到8，可以得到的步數有8種：16 17 18 19 20 21 22 23；
-
達到最終步數以后，清除定時器，重置相關引數，根據旋轉方形指示所在的下標確定中獎情況；
實作
繪制背景
大背景從坐標（0,0）開始，寬高是340；次背景圖x,y分別加10，從（10,10）開始，寬高為320，顏色稍深，
//繪制選項卡背景
ChouJiang.prototype.drawBG=function(){
var image,img,sx=0,sy=0,sWidth=340,sHeight=340,dx=0,dy=0,dWidth=340,dHeight=340;
//背景
image = this.imgObj[14];
img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
this.renderArr.push(img);
sx=0,sy=0,sWidth=320,sHeight=320,dx=10,dy=10,dWidth=320,dHeight=320;
//背景小
image = this.imgObj[15];
img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
this.renderArr.push(img);
}
繪制獎項卡背景圖
//繪制選項卡背景
ChouJiang.prototype.drawImage=function(){
var image,img,rect,x=0,sx=0,sy=0,sWidth=100,sHeight=100,dx=0,dy=0,dWidth=100,dHeight=100,dx_dis=18,dy_dis=18;
//繪制9張小背景
var imgKey = 0;
for(var i=0;i<3;i++){
dy = dy_dis+i*102;
for(var j=0;j<3;j++){
dx = dx_dis+j*102;
if(i==1&&j==1){
imgKey=4;
}else{
imgKey=3;
}
//背景
image = this.imgObj[imgKey];
img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
this.renderArr.push(img);
if(imgKey==4){//中間的抽獎卡片
this.choujiangImage=img;
}else{
//注意添加的順序 ,因為轉動的時候是根據這個陣列來的
if(i==0){
img.id=j;
this.imgArr.push(img);
}else if(i==1){
if(j==0){
img.id=7;
this.imgArr[7]=img;
}else if(j==2){
img.id=3;
this.imgArr[3]=img;
}
}else if(i==2){
if(j==0){
img.id=6;
this.imgArr[6]=img;
}else if(j==1){
img.id=5;
this.imgArr[5]=img;
}else if(j==2){
img.id=4;
this.imgArr[4]=img;
}
}
}
}
}
}說明：
代碼要注意的點就是imgArr陣列里元素的擺放順序，此代碼設定的是順時鐘旋轉，抽獎的時候是按imgArr順序往后取，如果當前是0下標對應的元素，下一步要走的就是1下標對應的元素，再下一步就2下標對應的元素了，以此類推，取完7以后再回到0開始取，就達到了尾部接上頭部的效果，所以imgArr的順序決定了抽獎時旋轉的順序，陣列元素的下標如圖：如果要逆時針怎么設定下標？如下圖即可如果要橫著旋轉抽獎呢？同樣的道理代碼給imgArr陣列添加元素的時候按下圖的下標添加即可：
如果要逆時針怎么設定下標？如下圖即可
如果要橫著旋轉抽獎呢？同樣的道理代碼給imgArr陣列添加元素的時候按下圖的下標添加即可：
繪制獎項卡內容圖片和文字
這個跟上面的道理差不多，對應上就行，代碼很類似
//繪制選項圖片和文字
ChouJiang.prototype.drawCard=function(){
var image,img,rect,x=0,sx=0,sy=0,sWidth=64,sHeight=64,dx=0,dy=0,dWidth=48,dHeight=48,disX=45,disY=40;
//繪制9張獎項卡
var imgKey = 5;
var content="",tx=ty=0,text;
for(var i=0;i<3;i++){
dy = i*102;
for(var j=0;j<3;j++){
dx = j*102;
//背景
image = this.imgObj[imgKey++];
img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight,disX:disX,disY:disY});
//img.id=i;
this.renderArr.push(img);
//天氣
tx=dx+68;ty=dy+102;
if(i==0){
if(j==0){
content=this.textArr[0];
}else if(j==1){
content=this.textArr[1];
}else if(j==2){
content=this.textArr[2];
}
}else if(i==1){
if(j==0){
content="";
}else if(j==1){
content="";
}else if(j==2){
content=this.textArr[3];
}
}else if(i==2){
if(j==0){
content=this.textArr[6];
}else if(j==1){
content=this.textArr[5];
}else if(j==2){
content=this.textArr[4];
}
}
text = new _.Text({
x:tx,
y:ty,
text:content,
font:'12px ans-serif',
textAlign:'center',
fill:true,
fillStyle:'#DD4646'
});
this.renderArr.push(text);
}
}
}
抽獎指示圖的繪制：一個圓角正方形，讓它包裹在獎項卡背景圖的外圍，這里隨機取（0-7）的一個數，也就是獎項卡背景陣列對應的下標值，取到什么下標就繪制這個方形圖片，框住在對應的那個背景圖上，抽獎轉動的時候也就是讓這個方形圖片按imgArr的順序的往后一個個的框住，達到轉動的效果：
抽獎方形指示圖: 
繪制代碼：
//抽獎時轉動的方形圖片
ChouJiang.prototype.drawCjImage=function(){
//隨機從出現在一個卡片的位置
var index = _.getRandom(0,this.imgArr.length);
this.currImageIndex=index;//當前卡片被選擇下標
var imgObj = this.imgArr[index];//卡片背景物件
var image,img,sx=0,sy=0,sWidth=100,sHeight=100,dx=imgObj.dx-2,dy=imgObj.dy-2,dWidth=104,dHeight=104;
//轉動方形圖片
image = this.imgObj[16];
img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
this.renderArr2.push(img);
}
此時已經繪制好全部頁面了，
點擊抽獎
我設定轉圈數為2，每一圈是8步，然后在從0-7隨機一個數字，假如隨機到是5，總步數加起來是 2*8+5=21步；
開啟定時任務，里面代碼讓當前位置+1，比如上圖中的背包下標是6，加1就是7，我們就從imgArr陣列里面取到下標為7的元素，也就是圖中的“謝謝參與”，讓抽獎指示圖的坐標位置和此元素的一樣，這樣就可以包裹住“謝謝參與”，效果如下圖:
然后定時任務的下一步代碼，當前位置同樣執行遞增，于是7+1=8，程式判斷下標大于了7，于是設定為0，下一步就讓抽獎指示圖的位置和書一本的位置一樣，以此類推，當達到了總布數21的時候，就清除定時器，判斷中獎情況，彈出中獎提示，
//滑鼠點擊事件
ChouJiang.prototype.mouseClick=function(e){
var that=this;
//隨機從出現在一個卡片的位置
var index = _.getRandom(0,this.imgArr.length);
//轉兩圈 + 亂數0-8
this.totalCount = this.imgArr.length *2 + index;//轉圈總步數
this.moveCount=0;
this.timmer=setInterval(this.move.bind(this),100);
}
//轉動
ChouJiang.prototype.move=function(){
var arr = this.imgArr;
this.currImageIndex++;
this.moveCount++;
if(this.currImageIndex==arr.length){
this.currImageIndex=0;
}
console.log(this.currImageIndex,this.totalCount);
var imgObj = this.imgArr[this.currImageIndex];//卡片背景物件
//更新方形的位置，其實只有一個元素，不回圈也可以
var rectImage = this.renderArr2[0];
rectImage.dx=imgObj.dx;
rectImage.dy=imgObj.dy;
if(this.moveCount==this.totalCount){
console.log('停止');
clearInterval(this.timmer);
this.timmer=null;
//console.log("id==="+imgObj.id,this.textArr[imgObj.id]);
var res = this.textArr[imgObj.id];
setTimeout(function(){
alert(res);
},30);
}
this.render2();
}全部完成了
最終效果就跟文章開頭的一樣，
原始碼下載
方式1：少量積分，下載代碼
方式2：關注下方公眾號，回復 127 下載代碼
★ 更多原始碼
? 基于canvas的手風琴特效（附原始碼）?
? 抖音很火的華為太空人表盤（附原始碼）?
? 基于JavaScript頁面動態驗證碼（附原始碼）?
? 基于JavaScript的拖動滑塊拼圖驗證（附原始碼）?
? 基于JavaScript的幸運大轉盤（附原始碼）?
? 抖音很火的羅盤時鐘（附原始碼）?
? 基于JavaScript的俄羅斯方塊小游戲（附原始碼）?
? 基于JavaScript的貪吃蛇游戲（附原始碼）?
? 基于JavaScript的拼圖游戲（附原始碼）?
? 用JavaScript給女兒做的煙花特效（附原始碼）?
? 老父親給女兒做的下雪特效，滿足女兒看雪的愿望（附原始碼）?
? 雷達掃描特效（附原始碼）?
? 香港黃金配角吳孟達去世，80后程式員以輪播圖來悼念達叔，達叔一路走好！（附原始碼）?
? 仿抖音重繪進度條（附原始碼）?
? 仿頭條方形重繪進度條（附原始碼）?
? 仿360加速球、水波評分特效（附原始碼）?
? 基于canvas的刮刮卡（附原始碼）?
? 原生js寫的左側飛入拼圖特效，你是喜歡美女單飛還是雙飛（附原始碼）?
? 用js寫的旋轉木馬，在新年獻給各位剛登基的皇帝，讓你的后宮轉起來！程式員就是可以為所欲為！（附原始碼）?
? 用js寫的輪播圖，八位女明星，你翻誰的牌，程式員就是可以為所欲為！（附原始碼）?
? 原生js實作美女拼圖，把美女老婆抱回家，5個美女夠不夠！程式員就是可以為所欲為！（附原始碼）?
? 用js仿探探拖拽卡片的效果、飛卡片的效果，感覺挺酷，最后有美女看哦！（附原始碼）?
? 老婆說程式員不懂浪漫，程式員默默拿起了鍵盤，這就親手帶你去看流星雨，女人真的會影響男人拔刀的速度！（附原始碼）?
? 學生成績管理系統（jsp+jquery+java+mysql+tomcat）有原始碼，你的畢設我的心（附原始碼）?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/275879.html
標籤：其他
上一篇：瑾小的春招總結