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

2022-07-21 0 655
本文讲述了html5游戏开发实现简单老虎机,本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。

游戏测试地址: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; } } }	
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; } } }	
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" 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="" if(self.stopflag="" &&="" <="self.minSpeed" self.indexs[1]="=" self.combination[self.stopnum][self.index]="" self.reels[1].y=""> 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; } };</self.maxspeed)></self.reels.length;i++){>

 

index.html

1
<div id="mylegend">loading……</div>

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

 

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 前端开发 值得一看的html5实现简单老虎机的教程 https://www.lingchenw.cn/jishu/2452.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载