源码搜藏网
网站首页
网站源码
加入VIP，免费下载全站VIP素材开通VIP
PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码
CMS模板
加入VIP，免费下载全站VIP素材开通VIP
织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码 pbootcms
安卓源码
加入VIP，免费下载全站VIP素材开通VIP
VIP源码 控件分类 功能分类 技术博客
免费源码
php源码 asp源码 .NET源码 java源码 其他源码
会员特权
广告合作
●●●
加入VIP，免费下载全站素材开通VIP
设计素材 网页特效 网页设计作业 开发教程
全部作品
全部作品
终身源码
vip源码
安卓源码
开发教程
当前位置：首页 > 开发教程 > html5教程 >

html5游戏开发-简单老虎机

时间：2014-05-07 08:58 来源：互联网 作者：源码搜藏 收藏

本游戏使用的是html5的canvas，运行游戏需要浏览器支持html5。 使用开源引擎：lufylegend.js， lufylegend.js引擎包内包含这个demo，请直接下载lufylegend.js引擎，查看引擎包内源码 lufylegend.js引擎下载地址 http://lufylegend.com/lufylegend 游戏截图

本游戏使用的是html5的canvas，运行游戏需要浏览器支持html5。

使用开源引擎：lufylegend.js，

 

lufylegend.js引擎包内包含这个demo，请直接下载lufylegend.js引擎，查看引擎包内源码

lufylegend.js引擎下载地址

http://lufylegend.com/lufylegend


游戏截图

html5游戏开发-简单老虎机

游戏测试地址

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

游戏结构

index.html

js文件夹｜---Main.js

     　　　　｜---Reel.js

images文件夹｜--图片

 

 

游戏代码：

Main.js

 

[javascript] view plaincopy
 
  1. init(50,"mylegend",600,600,main);  
  2.   
  3. var loadingLayer;  
  4. var backLayer;  
  5. var stopLayer;  
  6. var startLayer;  
  7. var loadIndex = 0;  
  8. var imglist = {};  
  9. var btnup,btndown,btnleft,btnright;  
  10. var imgData = new Array();  
  11.   
  12. var mapImgList = new Array();  
  13. var mapmoveflag = "";  
  14. var MOVE_STEP = 10;  
  15.   
  16. 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]);  
  17. var reels = new Array();  
  18. var kakes = new Array();  
  19. //停止ボタン参照用配列  
  20. var stopBtn = new Array();  
  21. var start;  
  22. var win;  
  23. function main(){  
  24.     imgData.push({name:"stop_up",path:"./images/slot_stop_up.png"});  
  25.     imgData.push({name:"stop_over",path:"./images/slot_stop_over.png"});  
  26.     imgData.push({name:"start",path:"./images/slot_start.jpg"});  
  27.     imgData.push({name:"kake",path:"./images/slot_kake.png"});  
  28.     imgData.push({name:"slot_back",path:"./images/slot_back.jpg"});  
  29.     imgData.push({name:"slot_ok",path:"./images/slot_ok.png"});  
  30.     imgData.push({name:"item1",path:"./images/1.png"});  
  31.     imgData.push({name:"item2",path:"./images/2.png"});  
  32.     imgData.push({name:"item3",path:"./images/3.png"});  
  33.     imgData.push({name:"item4",path:"./images/4.png"});  
  34.     imgData.push({name:"item5",path:"./images/5.png"});  
  35.     imgData.push({name:"item6",path:"./images/6.png"});  
  36.     loadingLayer = new LSprite();  
  37.     loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");  
  38.     addChild(loadingLayer);  
  39.     loadImage();  
  40. }  
  41. function loadImage(){  
  42.     if(loadIndex >= imgData.length){  
  43.         removeChild(loadingLayer);  
  44.         legendLoadOver();  
  45.         gameInit();  
  46.         return;  
  47.     }  
  48.     loader = new LLoader();  
  49.     loader.addEventListener(LEvent.COMPLETE,loadComplete);  
  50.     loader.load(imgData[loadIndex].path,"bitmapData");  
  51. }  
  52. function loadComplete(event){  
  53.     loadingLayer.graphics.clear();  
  54.     loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");  
  55.     loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");  
  56.     imglist[imgData[loadIndex].name] = loader.content;  
  57.     loadIndex++;  
  58.     loadImage();  
  59. }  
  60. function gameInit(event){  
  61.     var i,j,bitmap,bitmapdata,childmap;  
  62.       
  63.     backLayer = new LSprite();  
  64.     addChild(backLayer);  
  65.   
  66.     bitmapdata = new LBitmapData(imglist["slot_back"]);  
  67.     bitmap = new LBitmap(bitmapdata);  
  68.     backLayer.addChild(bitmap);  
  69.       
  70.     stopLayer = new LSprite();  
  71.     addChild(stopLayer);  
  72.     for(i=0;i<3;i++){  
  73.         var reel = new Reel(combination,i);  
  74.         reel.x = 150 * i + 90;  
  75.         reel.y = 225;  
  76.         reels.push(reel);  
  77.         addChild(reel);  
  78.         var kake = new LBitmap(new LBitmapData(imglist["kake"]));  
  79.         kake.x = 150 * i + 90;  
  80.         kake.y = 225;  
  81.         kakes.push(kake);  
  82.         addChild(kake);  
  83.         var stop = new LButton(new LBitmap(new LBitmapData(imglist["stop_up"])),new LBitmap(new LBitmapData(imglist["stop_over"])));  
  84.         stop.x = 150 * i + 110;  
  85.         stop.y = 490;  
  86.         stop.index = i;  
  87.         stopBtn.push(stop);  
  88.         stop.visible = false;  
  89.         stop.addEventListener(LMouseEvent.MOUSE_UP, stopevent);  
  90.         addChild(stop);  
  91.     }  
  92.   
  93.     startLayer = new LSprite();  
  94.     addChild(startLayer);  
  95.     start = new LButton(new LBitmap(new LBitmapData(imglist["start"])),new LBitmap(new LBitmapData(imglist["start"])));  
  96.     start.x = 55;  
  97.     start.y = 450;  
  98.     startLayer.addChild(start);  
  99.     start.addEventListener(LMouseEvent.MOUSE_UP, onmouseup);  
  100.       
  101.       
  102.     win = new LButton(new LBitmap(new LBitmapData(imglist["slot_ok"])),new LBitmap(new LBitmapData(imglist["slot_ok"])));  
  103.     startLayer.addChild(win);  
  104.     win.visible = false;  
  105.     win.addEventListener(LMouseEvent.MOUSE_UP, winclick);  
  106.       
  107.     backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
  108. }  
  109. function onframe(){  
  110.     var i;  
  111.     for(i=0;i<3;i++){  
  112.         reels[i].onframe();  
  113.     }  
  114. }  
  115. function stopevent(event,currentTarget){  
  116.     reels[currentTarget.index].stopFlag = true;  
  117. }  
  118. function onmouseup(event){  
  119.     var i;  
  120.     var stopNum = Math.floor(Math.random()*(combination.length/3));  
  121.     start.visible = false;  
  122.     for(i=0;i<3;i++){  
  123.         stopBtn[i].visible = true;  
  124.         reels[i].startReel = true;  
  125.         reels[i].stopFlag = false;  
  126.         reels[i].stopNum = stopNum;  
  127.     }  
  128. }  
  129. function winclick(){  
  130.     win.visible = false;  
  131.     start.visible = true;  
  132. }  
  133. function checkWin(){  
  134.     var i;  
  135.     var allstop = 0;  
  136.     for(i=0;i<3;i++){  
  137.         if(!reels[i].startReel)allstop++;  
  138.     }  
  139.     if(allstop >= 3){  
  140.         for(i=0;i<3;i++){  
  141.             stopBtn[i].visible = false;  
  142.         }  
  143.           
  144.         if(reels[0].stopNum >= 19){  
  145.             win.visible = true;  
  146.         }else{  
  147.             start.visible = true;  
  148.         }  
  149.     }  
  150. }  

Reel.js

 

 

[javascript] view plaincopy
 
  1. function Reel(combination,index){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.   
  5.     //-------------------------------------------  
  6.     //実行側から操作可能なプロパティの初期設定  
  7.     //-------------------------------------------  
  8.     self.maxSpeed = 70;  
  9.     self.minSpeed = 10;  
  10.     self.currentNum = 1;  
  11.     self.stopNum = 0;  
  12.     self.maxNum = 6;  
  13.     self.speedUpStep = 2;  
  14.     self.speedDownStep = 2;  
  15.     self.combination = combination;  
  16.     self.stopFlag = true;  
  17.     self.currentSpeed = 0;  
  18.     self.startReel = false;  
  19.     self.index = index;  
  20.     //-------------------------------------------  
  21.     //準備  
  22.     //-------------------------------------------  
  23.     self.reels = [];  
  24.     self.indexs = [0,0,0,0];  
  25.     self.reels.push(new LBitmap(self.getReel()));  
  26.     self.reels.push(new LBitmap(self.getReel()));  
  27.     self.reels.push(new LBitmap(self.getReel()));  
  28.     self.reels.push(new LBitmap(self.reels[0].bitmapData));  
  29.       
  30.       
  31.     var i,sy;  
  32.     self.reels[0].height = 60;  
  33.     self.reels[0].bitmapData.height = self.reels[0].height;  
  34.     self.reels[0].bitmapData.setCoordinate(0,80-self.reels[0].height);  
  35.     self.reels[2].height = 60;  
  36.     self.reels[2].bitmapData.height = self.reels[2].height;  
  37.     self.reels[3].visible = false;  
  38.     sy = 0;  
  39.     for(i=0;i<self.reels.length;i++){  
  40.         self.reels[i].y = sy;  
  41.         sy += self.reels[i].height;  
  42.         self.addChild(self.reels[i]);  
  43.     }  
  44.     //self.startReel = true;  
  45.     //self.stopFlag = false;  
  46. }  
  47. Reel.prototype.onframe = function (){  
  48.     var self = this;  
  49.   
  50.     if(self.startReel)self.wheel();  
  51. };  
  52. Reel.prototype.getReel = function (){  
  53.     var self = this;  
  54.     if(self.currentNum > self.maxNum)self.currentNum = 1;  
  55.     self.indexs[0] = self.currentNum;  
  56.   
  57.     self.indexs.pop();  
  58.     self.indexs.unshift(self.currentNum);  
  59.     var nextReel = new LBitmapData(imglist["item"+self.currentNum++]);  
  60.     return nextReel;  
  61. };  
  62. Reel.prototype.wheel = function (){  
  63.     var self = this;  
  64.       
  65.     //回転速度の調節  
  66.     if (self.stopFlag) {  
  67.         //スピードダウン  
  68.         if (self.currentSpeed > self.minSpeed) {  
  69.             self.currentSpeed -= self.speedDownStep;  
  70.         } else {  
  71.             self.currentSpeed = self.minSpeed;  
  72.         }  
  73.     } else {  
  74.         //スピードアップ  
  75.         if (self.currentSpeed < self.maxSpeed) {  
  76.             self.currentSpeed += self.speedUpStep;  
  77.         } else {  
  78.             self.currentSpeed = self.maxSpeed;  
  79.         }  
  80.     }  
  81.     if(self.stopFlag && self.currentSpeed <= self.minSpeed && self.indexs[1] == self.combination[self.stopNum][self.index] && self.reels[1].y + self.currentSpeed > 60){  
  82.         self.currentSpeed = 60 - self.reels[1].y;   
  83.         self.startReel = false;  
  84.           
  85.     }  
  86.     self.setY();  
  87.     if(!self.startReel)checkWin();  
  88. };  
  89. Reel.prototype.setY = function(){  
  90.     var self = this;  
  91.     self.reels[1].y += self.currentSpeed;  
  92.     if(self.reels[1].y + self.reels[1].height > 200){  
  93.         self.reels[1].height = 200 - self.reels[1].y;  
  94.         self.reels[1].bitmapData.height = self.reels[1].height;  
  95.     }  
  96.     if(self.reels[1].y > 80){  
  97.         self.reels[0].height = 80;  
  98.         self.reels[0].y = self.reels[1].y - 80;  
  99.     }else{  
  100.         self.reels[0].height = self.reels[1].y;  
  101.         self.reels[0].y = 0;  
  102.     }  
  103.     self.reels[0].bitmapData.height = self.reels[0].height;  
  104.     self.reels[0].bitmapData.setCoordinate(0,80-self.reels[0].height);  
  105.       
  106.     self.reels[2].y = self.reels[1].y + self.reels[1].height;  
  107.       
  108.     if(self.reels[2].y > 200){  
  109.         self.reels[2].visible = false;  
  110.     }else if(self.reels[2].y + 80 > 200){  
  111.         self.reels[2].height = 200 - self.reels[2].y;  
  112.         self.reels[2].bitmapData.height = self.reels[2].height;  
  113.     }else{  
  114.         self.reels[3].y = self.reels[2].y + self.reels[2].height;  
  115.         if(self.reels[3].y < 200){  
  116.             self.reels[3].height = 200 - self.reels[3].y;  
  117.             self.reels[3].bitmapData.height = self.reels[3].height;  
  118.         }  
  119.     }  
  120.       
  121.     if(self.reels[0].y > 0){  
  122.         var child = self.reels.pop();  
  123.         child.bitmapData = self.getReel();  
  124.         child.visible = true;  
  125.         self.reels.unshift(child);  
  126.         child.y = 0;  
  127.         child.height = self.reels[1].y;  
  128.         child.bitmapData.height = child.height;  
  129.         child.bitmapData.setCoordinate(0,80-child.height);  
  130.     }  
  131.     if(self.reels[3].y >= 200){  
  132.         self.reels[3].visible = false;  
  133.     }  
  134. };  
index.html

 

 

[html] view plaincopy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>slot</title>   
  6. <meta name="viewport" content="width=480,initial-scale=0.5" />  
  7. <script type="text/javascript" src="../legend/legend.js"></script>   
  8. <script type="text/javascript" src="./js/Reel.js"></script>   
  9. <script type="text/javascript" src="./js/Main.js"></script>   
  10. </head>  
  11. <body>  
  12. <div id="mylegend">loading……</div>  
  13.   
  14. </body>  
  15. </html>  


标签：源码网站源码Html5用的游戏简单Canvas
上一篇：HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接
下一篇：HTML 5 input placeholder 属性如何完美兼任ie

html5游戏开发-简单老虎机

HTML5 UTF-8 中文乱码的解决方法

html5移动开发中的如何对事件进行监听和处

html5记忆翻牌游戏实现思路及代码

html5指南-6.如何创建离线web应用程序实现

具有定时创建HTML5（和JavaScript）迷宫游

仿酷狗html5手机音乐播放器主要部分代码

HTML5图片预览实例分享

HTML5的结构和语义(1):前言

html5通过canvas实现刮刮卡效果示例分享

利用HTML5中Geolocation获取地理位置调用Go

html5 Canvas画图教程(10)—把面拆成线条模

html5教程阅读排行

最新文章

热门源码

  • 公司网站模板
  • asp源码下载
  • 源码大全
  • 免费个人网站模板
  • 软件源码
  • 源码超市
  • 免费论坛
  • 网页作业
  • PHP源码
  • 免费网站模板
  • 电子书籍
  • 帝国cms模板
  • 网站源码下载
  • 个人简历网页模板
  • php问答系统下载
  • asp文件
  • 网址导航源码
  • 企业网站程序
  • 后台管理
  • 论坛源码
  • 编程电子书
  • 导航菜单代码
  • 网页模板免费下载
  • 网页模版
  • 源码中国
  • 免费网页模板
  • 整站源码
  • 开源网店
  • asp建站系统
  • 办公管理系统
  • 免费模块
  • yuanma
  • php网站
  • 网站源码
  • 网站首页模板
  • 导航菜单
  • 模版代码
  • 图片代码
  • 登录界面素材
  • html个人主页模板
  • 模板之家
  • 个人主页模板
  • 中国源码
  • php cms
  • 在线客服源码
  • 源码之家
  • 网站模板免费下载
  • 免费商业源码
  • 在线客服代码
  • 企业网站模板下载

    • 服务咨询

    QQ-xxxxxxxx

    （周一至周六 9:00——18:00） 在线客服

    整站源码

    织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码

    网站模板

    PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码

    免费源码

    协同办公 留言日记 社区论坛 上传下载 电子商务 广告排行 投票调查

    关于我们

    网站公告 关于我们 免责声明 注册协议 联系我们
    Copyright © 版权所有 本站资源均来自互联网或会员发布，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！