Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > html5 game development-simple slot machine

html5 game development-simple slot machine

黄舟
Release： 2017-03-02 14:25:19
Original
5386 people have browsed it

This game uses HTML5 canvas, and the browser needs to support HTML5 to run the game.

Use open source engine: lufylegend.js,

lufylegend.js engine package contains this demo, please download lufylegend.js engine directly and view the engine package Internal source code

##lufylegend.js engine download address

http://lufylegend.com/lufylegend##Game screenshots


Game test address

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

Game structure

index.html

js folder｜---Main.js

　　　｜---Reel.js

images folder｜--Pictures

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();
//停止ボタン参照用配列
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;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;
		}
	}
}
Copy after login

Reel.js

function Reel(combination,index){
	base(this,LSprite,[]);
	var self = this;

	//-------------------------------------------
	//実行側から操作可能なプロパティの初期設定
	//-------------------------------------------
	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;
	//-------------------------------------------
	//準備
	//-------------------------------------------
	self.reels = [];
	self.indexs = [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.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.prototype.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;
	
	//回転速度の調節
	if (self.stopFlag) {
		//スピードダウン
		if (self.currentSpeed > self.minSpeed) {
			self.currentSpeed -= self.speedDownStep;
		} else {
			self.currentSpeed = self.minSpeed;
		}
	} 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[self.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 > 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;
	}
};
Copy after login

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slot</title>	
<meta name="viewport" content="width=480,initial-scale=0.5" />
<script type="text/javascript" src="../legend/legend.js"></script> 
<script type="text/javascript" src="./js/Reel.js"></script> 
<script type="text/javascript" src="./js/Main.js"></script> 
</head>
<body>
<p id="mylegend">loading……</p>

</body>
</html>
Copy after login

The above is html5 game development -The content of simple slot machines, please pay attention to the PHP Chinese website (www.php.cn) for more related content!



Related labels：
html5，游戏开发，简单老虎机
source：php.cn
Previous article：HTML5 game development-barrage + imitation lightning game demo Next article：HTML5 game development open source library lufylegend 1.4.0 is released, adding new physics engine Box2dWeb package and easing class TweenLite
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2300
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2432
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2047
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1931
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
2002
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template