Quote:
Jiugong lottery has been very popular, mobile phone terminal is often used, not to the interest to write a wave, looking at the effect is good, take out we talk!
Effect:
Implementation approach
-
Draw a large background image, two images, one smaller, and the smaller image is darker;
-
Draw 8 small images on a white background (in what order? To be explained later), as the background of the prize card, a yellow background image of the instant draw is placed in the middle;
-
On the corresponding background picture, draw the award picture and text to complete the layout of the whole lottery page;
-
Add a click event to the background picture of instant lottery, click and rotate [open scheduled task] (there are 3 rotation methods, currently write one clockwise, the other two, only need to set the order in step 2, will be explained in detail);
-
The number of steps of rotation, the current setting rule is 2 turns + (0-8) random bit, because 1 turn is 8 steps, 2 turns is 16 steps, plus random 0 to 8, can get 8 kinds of steps: 16 17 18 19 20 21 22 23;
-
After reaching the final number of steps, clear the timer, reset the relevant parameters, according to the rotating square indicator of the subscript to determine the winning situation;
implementation
Draw the background
The background starts at the coordinate (0,0) and is 340 in width and height; Add 10 to the subbackground x and y, starting from (10,10), with a width and height of 320 and a slightly darker color.
/ / draw the TAB background ChouJiang. Prototype. DrawBG = function () {var image,img,sx=0,sy=0,sWidth=340,sHeight=340,dx=0,dy=0,dWidth=340,dHeight=340; // Background 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; // Background small 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); }Copy the code
Draw the award card background
/ / draw the TAB background 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; 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; } // Background 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; If (I ==0){img.id=j; 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; } } } } } }Copy the codeDescription:
Attention should be paid to * * code point is imgArr array element is put in order, this code sets is clockwise rotation, the lottery is in imgArr order take back, if the current is 0 subscript of the corresponding element, the next step to walk is 1 subscript corresponding element, then the next step 2 subscript of the corresponding element, * * and so on, So the order of imgArr determines the order of rotation in the lottery. The subscript of array elements is shown in the figure: How to set the subscript if we want to set the subscript counterclockwise? What if you want to rotate horizontally? The same goes for adding elements to the imgArr array using the following subscript:
How do I set the subscript if I want to go counterclockwise? As shown below
What if they spin sideways? The same goes for adding elements to the imgArr array using the following subscript:
What if they spin sideways? The same goes for adding elements to the imgArr array using the following subscript:
/ / draw option picture and text ChouJiang. The 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; 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; // background 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); / / the weather 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); }}}Copy the code
Drawing of lucky draw indicator chart: A rounded square is wrapped around the background image of the prize card. A random number (0-7) is chosen here, that is, the subscript value corresponding to the background array of the prize card. If the subscript is selected, the square image is drawn, and the box is placed on the corresponding background image. When the lottery rotates, that is, the square picture is framed one by one in the order of imgArr to achieve the effect of rotation:
Drawing of lucky Draw square indicator:
Drawing code:
/ / draw when the rotation of the square picture ChouJiang. The prototype. DrawCjImage = function () {/ / random from appearing in a card. The location of the 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.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); }Copy the code
At this point you have drawn all the pages.
Click on the draw
I set the number of turns to 2, each turn is 8 steps, and then random a number from 0 to 7, if random to 5, the total number of steps adds up to 2*8+5=21 steps;
Open timing task, inside the code for the current position + 1, such as in the picture above backpack subscript 6, 1 is 7, we can take from a imgArr array to subscript for seven elements, namely “thank you for your participation in this picture, let draw maps and the coordinates of the element’s like this, so you can wrap” thank you for your participation, effect the diagram below:
Then the next step in the timing task code, the current position also increasing, so the 7 + 1 = 8, program judgement index greater than 7, then set to 0, the next step let draw the location of the indicator diagram and book a place, and so on, when up to the total number of cloth 21, clean out the timer, judge the winning, pop-up winning tips.
/ / mouse click event ChouJiang. Prototype. MouseClick = function (e) {var that = this; Var index = _.getrandom (0, this.imgarr.length); TotalCount = this.imgarr. Length *2 + index; MoveCount =0; this.moveCount=0; this.timmer=setInterval(this.move.bind(this),100); 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]; var rectImage = this.renderarr2 [0]; rectImage.dx=imgObj.dx; rectImage.dy=imgObj.dy; If (this.movecount ==this.totalCount){console.log(' stop '); 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(); }Copy the code