Worth a look html5 implements a simple slot machine tutorial (game development)

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([1,1,5], [1,2,4], [1,5,1], [2,1,4], [2,3,3], [2,4  ,1], [2,5,4], [3,1,2], [3,4,3], [3,5,5], [4,1,2], [4,2,3  ], [4,5,1], [4,5,5], [5,1,1], [5,2,4], [5,3,2], [5,5,1],  [1,1,1], [1,1,1]);
 var reels = new Array();
 var kakes = new Array();
 //Stop bottan reference array
 var stopBtn = new Array();
 var start;
 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:"kake",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:"./images/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);
 loader.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"]));
 kake.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.addEventListener(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 = true;
 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){
 for(i=0;i= 19){
 win.visible = true;
 }else{
 start.visible = true;
 }
 }
 }

Reel.js

function Reel(combination,index){
 base(this,LSprite,[]);
 var self = this;
 
 //-------------------------------------------
 //The initial setting of the possible operation on the side of the line
 //-------------------------------------------
 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. startReel = false;
 self. index = index;
 //-------------------------------------------
 //Prepare
 //-------------------------------------------
 self. reels = [];
 self. indexes = [0,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.reels[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.maxNum)self.currentNum = 1;
 self. indexes[0] = self. currentNum;
 
 self. indexes. pop();
 self. indexes. unshift(self. currentNum);
 var nextReel = new LBitmapData(imglist["item"+self. currentNum++]);
 return nextReel;
 };
 Reel.prototype.wheel = function (){
 var self = this;
 //Adjustment of turning speed
 if (self. stopFlag) {
 //Spider Dawn
 if (self. currentSpeed ​​> self. minSpeed) {
 self.currentSpeed ​​-= self.speedDownStep;
 } else {
 self.currentSpeed ​​= self.minSpeed;
 }
 } else {
 //speed app
 if (self. currentSpeed ​​<self. maxSpeed) {
 self.currentSpeed ​​+= self.speedUpStep;
 } else {
 self.currentSpeed ​​= self.maxSpeed;
 }
 }
 if(self.stopFlag && 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 > 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  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

 
 
 


 loading...
 

 

Thank you for reading, I hope you will benefit a lot.

This article is transferred from: https://blog.csdn.net/lufy_Legend/article/details/7021965

Recommended tutorial: “HTML Tutorial”

The above is worth seeing For more details on the tutorial (game development) of implementing simple slot machines in html5, please pay attention to other related articles on 1024programmer.com!