Cainiao makes HTML5 games-repeat

Record the opening process. For Mini-game development, cross-platform development is required, and flash does not support iPhone. html5 is the best choice. First, let's take a look at the final effect: Well, start the demo. 1. preparation: image material (Omitted... finally, package the Code together.) learn about HTML5 Canvas API 2. start: Create Canvas 1 <div style = "background-image: url(sudoku-bg.png); width: 590px; height: 632px; position: relative "> 2 <canvas id =" CanvasCup "width =" 540 "height =" 500 "> </canvas> 3 </div> OK, simple and clear, now we need to figure out how to place nine images to the Canvas and calculate the x and y coordinates. Next I will define an array copy code var bgImg = []; bgImg [0] = [20, 0]; bgImg [1] = [20,170]; bgImg [2] = [36]; bgImg [3] = []; bgImg [4] = [2, 190,170]; bgImg [5] = [360,170]; bgImg [6] = [20,340]; bgImg [7] = [190,340]; bgImg [8] = [360,340]; copy the code on the Canvas, directly loop. First, define the Canvas object, Image object, initialize the Image object height, width var imageWidth = 150; var imageheight = 150 ;, then call the HTML5 Canvas API to draw and copy the code var canvas = document. getElementById ("CanvasCup"); var context2D = canvas. getContext ("2d"); var pic = new Image (); pic. src = "bg.png"; // note the directory structure. Put the image and html in a directory for (var I = 0; I <9; I ++) {pic. onload = Function () {context2D. drawImage (pic, bgImg [I] [0], bgImg [I] [1], imageWidth, imageheight) ;}} copy the code, now we can see that the nine images are neatly arranged. The next action is the animation effect, from 1st ~ One or two pictures move to the middle. To move to the middle, you must know the Coordinate Position in the middle, that is, bgImg [4] = [190,170]. the first coordinate is bgImg [1] = [20, 0], which is equivalent to moving from 20 to 170 to. When moving, press Speed. Here I initialize the Speed to Speed = 1, if fps = 1000, 1 Ms x is moved to 1 unit, and 1 unit is moved to y. In the second case, the x coordinate is equal to 190, and the y coordinate is 0. Relative to the center, you only need to move the y coordinate, and so on. Finally, maintain a setInterval function and copy code 1 function draw () {2 if (iy + Speed = CenterPint [1] | ix + Speed = CenterPint [0] | ix = CenterPint [0] & iy = CenterPint [1]) {3 if (t <9) {t ++; ix = bgImg [t] [0]; iy = bgImg [t] [1];} 4} 5 if (ix! = CenterPint [0]) {6 CenterPint [0]-ix> 0? Ix = ix + Speed: ix = ix-Speed; 7} 8 if (iy! = CenterPint [1]) {9 CenterPint [1]-iy> 0? Iy = iy + Speed: iy = iy-Speed; 10} 11 12 context2D. clearRect (0, 0, canvas. getAttribute ("width"), canvas. getAttribute ("height"); 13 if (t> = 4) {context2D. drawImage (pic, bgImg [4] [0], bgImg [4] [1], imageWidth, imageheight) ;}; 14 for (var I = 0; I <9; I ++) {15 if (t <I) {16 context2D. drawImage (pic, bgImg [I] [0], bgImg [I] [1], imageWidth, imageheight); 17} 18} 19 context2D. save (); // save the paint brush status 20 context2D. translate (ix, I Y); 21 context2D. drawImage (pic, 0, 0, imageWidth, imageheight); 22 context2D. restore (); // after the painting is complete, restore the paint brush state 2324} interval = setInterval (draw, 1000/fps); copy the code to achieve the animation effect. (When moving...) will eventually be moved to the central point set. Now we need to return the coordinates for moving to the original nine points, that is, moving outward from the center point. The principle is the same as moving the square direction. Here we also need to maintain a bool in the square direction and the opposite direction. The first time we initialize x and y in the opposite direction, here I will rebuild the draw function, when adding the inverse direction to the last one, add the click event to copy the Code 1 var direction = true; // true positive rotation, false Reverse Rotation stop (); return; 2 var bool = true; // maintain the inverse direction x coordinate. The first initialization value is 3 var booly = true; // maintain the inverse direction y coordinate. The first initialization value is 4 function draw () {5 if (t> 8) {direction = false; t --; ix = bgImg [t] [0]; iy = bgImg [t] [1];} 6 if (t <0) {direction = true; t ++; stop (); boxclick (canvas, context2D); return ;} // Click Event 7 if (direction) {8 if (iy + Speed = CenterPint [1] | ix + Speed = CenterPint [0] | ix = CenterPint [0] & iy = CenterPint [1]) {9 if (t <9) {t ++; ix = bgImg [t] [0]; iy = bgImg [t] [1];} 10} 11} 12 else {13 if (iy + Speed = bgImg [t] [1] | ix + Speed = bgImg [t] [0] | ix = = CenterPint [0] & iy = CenterPint [1]) 14 if (t> = 0) {t --; ix = bgImg [t] [0]; iy = bgImg [t] [1]; bool = true; booly = true;} 15} 16 if (ix! = CenterPint [0]) {17 if (direction) {CenterPint [0]-ix> 0? Ix = ix + Speed: ix = ix-Speed;} 18 else {19 if (CenterPint [0]-ix <0) {20 if (bool) {21 bool = false; 22 ix = CenterPint [0]; 23} 24 ix = ix + Speed; 25} 26 else {if (bool) {27 bool = false; ix = CenterPint [0]; 28} 29 ix = ix-Speed;} 30} 31} 32 if (iy! = CenterPint [1]) {33 if (direction) {34 CenterPint [1]-iy> 0? Iy = iy + Speed: iy = iy-Speed;} 35 else {36 if (CenterPint [1]-iy <0) {37 if (booly) {38 booly = false; 39 iy = CenterPint [1]; 40} 41 iy = iy + Speed; 42} 43 else {if (booly) {44 booly = false; iy = CenterPint [1]; 45} 46 iy = iy-Speed; 47} 48} 49} 50 context2D. clearRect (0, 0, canvas. getAttribute ("width"), canvas. getAttribute ("height"); 51 if (t> = 4) {context2D. drawImage (pic, bgImg [4] [0], bgImg [4] [1], imageWid Th, imageheight) ;}; 52 for (var I = 0; I <9; I ++) {53 if (t <I) {54 context2D. drawImage (pic, bgImg [I] [0], bgImg [I] [1], imageWidth, imageheight); 55} 56} 57 context2D. save (); // save the paint brush status 58 context2D. translate (ix, iy); 59 context2D. drawImage (pic, 0, 0, imageWidth, imageheight); 60 context2D. restore (); // after the painting is finished, the paint brush status will be restored. 61} 62 interval = setInterval (draw, 1000/fps). Copy the code and click the event function below, when you click it, you can get the coordinates of the click. Then, you can determine which coordinate range of the coordinate area is within the nine coordinates. Replace. Here I use the demo to replace the image directly. If you make a lucky draw, you also need to use the background probability and then return to the front-end to display the corresponding image. Copy code 1 function boxclick (canvas, context2D) {2 canvas. onclick = function (e) {3 var canvasOffset = $ (canvas ). offset (); 4 var canvasX = Math. floor (e. pageX-canvasOffset. left); 5 var canvasY = Math. floor (e. pageY-canvasOffset. top); 6 // console. log ("x:" + canvasX + "y:" + canvasY); 7 var p = new Image (); 8 p. src = "get-2.png"; // pay attention to the directory structure, where the image and html are placed in a directory of 9 lottery (canvasX, canvasY, context2D, p ); 10} 11} 12 function lottery (x, y, context2D, p) {13 // alert ("x:" + x + "y:" + y ); 14 for (var I = 0; I <9; I ++) {15 var w = bgImg [I] [0] + imageWidth; 16 var h = bgImg [I] [1] + imageheight; 17 18 if (bgImg [I] [0] <= x & x <= w & bgImg [I] [1] <= y & y <= h) 19 {20 console. log ("p:" + I); 21 var pWidth = bgImg [I] [0]; 22 var pHeight = bgImg [I] [1]; 23 p. onload = function () {24 context2D. drawImage (p, pWidth, pHeight, imageWidth, imageheight); 25} 26} 27} 28} 29 function stop () {30 clearInterval (interval); 31}