這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)html5制作簡單跑馬燈的方法，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站是一家專業(yè)從事成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)建站依托強大的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！

本游戲使用的是html5的canvas，運行游戲需要瀏覽器支持html5。

使用開源引擎：lufylegend.js，

lufylegend.js引擎包內(nèi)包含這個demo，請直接下載lufylegend.js引擎，查看引擎包內(nèi)源碼

lufylegend.js引擎下載地址

http://lufylegend.com/lufylegend

游戲截圖

游戲測試地址：http://fsanguo.comoj.com/html5/slot/index.html

游戲結(jié)構(gòu)

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;
 
//-------------------------------------------
//実行側(cè)から操作可能なプロパティの初期設(shè)定
//-------------------------------------------
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;
//-------------------------------------------
//準(zhǔn)備
//-------------------------------------------
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.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;
//回転速度の調(diào)節(jié)
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

slot
loading……

以上便是html5制作簡單跑馬燈的方法，雖然從篇幅上看很復(fù)雜，但是示例代碼非常詳細(xì)且容易理解，如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：html5制作簡單跑馬燈的方法-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/dghicj.html