值得一看的html5实现简单老虎机的教程（游戏开发）

值得一看的htML5实现简单老虎机的教程

本游戏使用的是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;
    i3;
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;
    i3;
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;
    i3;
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;
    i3;
i++){
    if(!reels[i].startReel)allstop++;
}
    if(allstop >
= 3){
    for(i=0;
    i3;
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;
    iself.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>
    div id="mylegend">
    loading……/div>
     /body>
    /html>
    

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/lufy_Legend/article/details/7021965

推荐教程： 《HTML教程》

以上就是值得一看的html5实现简单老虎机的教程（游戏开发）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！