本游戏使用的是html5的canvas，运行游戏需要浏览器支持html5。
使用开源引擎：lufylegend.js，
lufylegend.js引擎包内包含这个demo，请直接下载lufylegend.js引擎，查看引擎包内源码
lufylegend.js引擎下载地址
http://lufylegend.com/lufylegend
游戏截图
游戏测试地址
http://fsanguo.comoj.com/html5/slot/index.html
游戏结构
index.html
js文件夹｜---main.js
｜---reel.js
images文件夹｜--图片
游戏代码：
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;
}
}
}
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;
}
};
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>
以上就是html5游戏开发-简单老虎机的内容。