HTML5 game development-Simple slot

This game uses HTML5 canvas. To run the game, the browser must support HTML5.

Use open-source engine: lufylegend. JS,

The lufylegend. js engine package contains this demo. Please download the lufylegend. js engine directly to view the source code in the engine package

Lufylegend. js Engine

Http://lufylegend.com/lufylegend

Games

Game test address

Http://fsanguo.comoj.com/html5/slot/index.html

Game structure

Index.html

JS folder | --- main. js

| --- Reel. js

Images folder | -- Image

Game Code:

Main. js

Init (50, "mylegend", 600,600, main); var loadinglayer; var backlayer; var stoplayer; var startlayer; var loadindex = 0; var imglist ={}; var btnup, btndown, btnleft, btnright; var imgdata = new array (); var mapimglist = new array (); var mapmoveflag = ""; var move_step = 10; vaR combination = new array ([, 5], [, 4], [, 1], [, 4], [, 3, 1], [, 4], [, 2], [, 3], [, 5], [, 2], [, 3], [4, 5, 1], [, 5], [, 1], [, 4], [, 2], [, 1], [, 1, 1]); var reels = new array (); var kakes = new array (); // you can use the configuration column var stopbtn = new array (); var start to stop sequence; vaR win; function main () {imgdata. push ({name: "stop_up", path :". /images/slot_stop_up.png "}); imgdata. push ({name: "stop_over", path :". /images/slot_stop_over.png "}); imgdata. push ({name: "Start", path :". /images/slot_start.jpg "}); imgdata. push ({name: "Kak E ", path :". /images/slot_kake.png "}); imgdata. push ({name: "slot_back", path :". /images/slot_back.jpg "}); imgdata. push ({name: "slot_ OK", path :". /images/slot_ OK .png "}); imgdata. push ({name: "Item1", path :". /images/1.png"}); imgdata. push ({name: "item2", path :". /images/2.png"}); imgdata. push ({name: "item3", path :". /images/3.png"}); imgdata. push ({name: "item4", path :". /images/4.png"}); imgdata. push ({name: "item5", path :". /imag ES/5.png"}); imgdata. push ({name: "item6", path :". /images/6.png"}); loadinglayer = new lsprite (); loadinglayer. graphics. drawrect (1, "black", [50,200,200, 20], true, "# ffffff"); addchild (loadinglayer); LoadImage ();} function LoadImage () {If (loadindex> = imgdata. length) {removechild (loadinglayer); legendloadover (); gameinit (); return;} loader = new lloader (); loader. addeventlistener (Levent. complete, loadcomplete); load Er. load (imgdata [loadindex]. path, "bitmapdata");} function loadcomplete (event) {loadinglayer. graphics. clear (); loadinglayer. graphics. drawrect (1, "black", [50,200,200, 20], true, "# ffffff"); loadinglayer. graphics. drawrect (1, "black", [50,203,200 * (loadindex/imgdata. length), 14], true, "#000000"); imglist [imgdata [loadindex]. name] = loader. content; loadindex ++; LoadImage ();} function gameinit (event) {var I, j, bitmap, Bitmapdata, childmap; backlayer = new lsprite (); addchild (backlayer); bitmapdata = new lbitmapdata (imglist ["slot_back"]); bitmap = new lbitmap (bitmapdata); backlayer. addchild (Bitmap); stoplayer = new lsprite (); addchild (stoplayer); for (I = 0; I <3; I ++) {var reel = new reel (combination, i); reel. X = 150 * I + 90; reel. y = 225; reels. push (REEL); addchild (REEL); var Kake = new lbitmap (New lbitmapdata (imglist ["Kake"]); k Ake. X = 150 * I + 90; Kake. y = 225; kakes. push (Kake); addchild (Kake); var stop = new lbutton (New lbitmap (New lbitmapdata (imglist ["stop_up"]), new lbitmap (New lbitmapdata (imglist ["stop_over"]); stop. X = 150 * I + 110; stop. y = 490; stop. index = I; stopbtn. push (STOP); stop. visible = false; stop. addeventlistener (lmouseevent. mouse_up, stopevent); addchild (STOP);} startlayer = new lsprite (); addchild (startlayer ); Start = new lbutton (New lbitmap (New lbitmapdata (imglist ["start"]), new lbitmap (New lbitmapdata (imglist ["start"]); start. X = 55; start. y = 450; startlayer. addchild (start); start. addeventlistener (lmouseevent. mouse_up, onmouseup); win = new lbutton (New lbitmap (New lbitmapdata (imglist ["slot_ OK"]), new lbitmap (New lbitmapdata (imglist ["slot_ OK"]); startlayer. addchild (WIN); win. visible = false; win. addeventl Istener (lmouseevent. mouse_up, winclick); backlayer. addeventlistener (Levent. enter_frame, onframe);} function onframe () {var I; for (I = 0; I <3; I ++) {reels [I]. onframe () ;}} function stopevent (event, currenttarget) {reels [currenttarget. index]. stopflag = true;} function onmouseup (event) {var I; var stopnum = math. floor (math. random () * (combination. length/3); start. visible = false; for (I = 0; I <3; I ++) {stopbtn [I]. visible = tr UE; reels [I]. startreel = true; reels [I]. stopflag = false; reels [I]. stopnum = stopnum;} function winclick () {win. visible = false; start. visible = true;} function checkwin () {var I; var allstop = 0; for (I = 0; I <3; I ++) {If (! Reels [I]. startreel) allstop ++;} If (allstop >=3) {for (I = 0; I <3; I ++) {stopbtn [I]. visible = false;} If (reels [0]. stopnum> = 19) {win. visible = true;} else {start. visible = true ;}}}

Reel. js

Function reel (combination, index) {base (this, lsprite, []); var self = this; // --------------------------------------------- // The operation may be completed during the initial modification. // --------------------------------------------------------------- self. maxspeed = 70; self. minspeed = 10; self. currentnum = 1; self. stopnum = 0; self. maxnum = 6; self. speedupstep = 2; self. speeddownstep = 2; self. combination = combination; self. stopflag = true; self. currentspeed = 0; self. star Treel = false; self. index = index; // ----------------------------------------------- // certificate failed // --------------------------------------------- self. reels = []; self. indexs = [0, 0, 0]; self. reels. push (New lbitmap (self. getreel (); self. reels. push (New lbitmap (self. getreel (); self. reels. push (New lbitmap (self. getreel (); self. reels. push (New lbitmap (self. reels [0]. bitmapdata); var I, Sy; self. reels [0]. height = 60; self. REE Ls [0]. bitmapdata. height = self. reels [0]. height; self. reels [0]. bitmapdata. setcoordinate (0, 80-self. reels [0]. height); self. reels [2]. height = 60; self. reels [2]. bitmapdata. height = self. reels [2]. height; self. reels [3]. visible = false; Sy = 0; for (I = 0; I <self. reels. length; I ++) {self. reels [I]. y = sy; SY + = self. reels [I]. height; self. addchild (self. reels [I]);} // self. startreel = true; // self. stopflag = false;} reel. prot Otype. onframe = function () {var self = this; if (self. startreel) self. wheel () ;}; reel. prototype. getreel = function () {var self = this; if (self. currentnum> self. maxnum) self. currentnum = 1; self. indexs [0] = self. currentnum; self. indexs. pop (); self. indexs. unshift (self. currentnum); var nextreel = new lbitmapdata (imglist ["item" + self. currentnum ++]); Return nextreel;}; reel. prototype. wheel = function () {var self = This; // The restore speed when the restore fails if (self. stopflag) {// when there is already existed before if (self. currentspeed> self. minspeed) {self. currentspeed-= self. speeddownstep;} else {self. currentspeed = self. minspeed;} else {// please specify your desired parameter when creating else if (self. currentspeed <self. maxspeed) {self. currentspeed + = self. speedupstep;} else {self. currentspeed = self. maxspeed ;}} if (self. stopflag & self. currentspeed <= self. minspeed & self. indexs [1] = self. combination [s Elf. stopnum] [self. index] & self. reels [1]. Y + self. currentspeed> 60) {self. currentspeed = 60-self. reels [1]. y; self. startreel = false;} self. sety (); If (! Self. startreel) checkwin () ;}; reel. prototype. sety = function () {var self = This; self. reels [1]. Y + = self. currentspeed; If (self. reels [1]. Y + self. reels [1]. height> 200) {self. reels [1]. height = 200-self. reels [1]. y; self. reels [1]. bitmapdata. height = self. reels [1]. height;} If (self. reels [1]. y> 80) {self. reels [0]. height = 80; self. reels [0]. y = self. reels [1]. y-80;} else {self. reels [0]. height = self. reels [1]. y; self. reels [0]. y = 0;} self. reels [0]. bitmapdata. height = self. reels [0]. height; self. reels [0]. bitmapdata. setcoordinate (0, 80-self. reels [0]. height); self. reels [2]. y = self. reels [1]. Y + self. reels [1]. height; If (self. reels [2]. y> 200) {self. reels [2]. visible = false;} else if (self. reels [2]. Y + 80 & gt; 200) {self. reels [2]. height = 200-self. reels [2]. y; self. reels [2]. bitmapdata. height = self. reels [2]. height;} else {self. reels [3]. y = self. reels [2]. Y + self. reels [2]. height; If (self. reels [3]. y< 200) {self. reels [3]. height = 200-self. reels [3]. y; self. reels [3]. bitmapdata. height = self. reels [3]. height ;}} if (self. reels [0]. y> 0) {var child = self. reels. pop (); child. bitmapdata = self. getreel (); child. visible = true; self. reels. unshift (child); child. y = 0; child. height = self. reels [1]. y; child. bitmapdata. height = child. height; child. bitmapdata. setcoordinate (0, 80-child. height);} If (self. reels [3]. Y >=200) {self. reels [3]. visible = false ;}};

Index.html

<!DOCTYPE html>