请选择 进入手机版 | 继续访问电脑版
查看: 12210|回复: 303

[新手教程] html5游戏开发-简单老虎机

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-3-23 14:20:30 | 显示全部楼层 |阅读模式
本游戏使用的是HTML5的canvas,运行游戏需要浏览器支持Html5
使用开源引擎:lufylegend.js

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

lufylegend.js引擎下载地址:
http://lufylegend.com/lufylegend

游戏截图:
QQ截图20170323141955.jpg
游戏测试地址:
http://fsanguo.comoj.com/html5/slot/index.html

游戏结构:
index.html
js文件夹|---Main.js
        |---Reel.js
        |---count.js
        |---legend.js
images文件夹|--图片


游戏代码:
Main.js
  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.     win = new LButton(new LBitmap(new LBitmapData(imglist["slot_ok"])),new LBitmap(new LBitmapData(imglist["slot_ok"])));  
  101.     startLayer.addChild(win);  
  102.     win.visible = false;  
  103.     win.addEventListener(LMouseEvent.MOUSE_UP, winclick);  
  104.       
  105.     backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
  106. }  
  107. function onframe(){  
  108.     var i;  
  109.     for(i=0;i<3;i++){  
  110.         reels[i].onframe();  
  111.     }  
  112. }  
  113. function stopevent(event,currentTarget){  
  114.     reels[currentTarget.index].stopFlag = true;  
  115. }  
  116. function onmouseup(event){  
  117.     var i;  
  118.     var stopNum = Math.floor(Math.random()*(combination.length/3));  
  119.     start.visible = false;  
  120.     for(i=0;i<3;i++){  
  121.         stopBtn[i].visible = true;  
  122.         reels[i].startReel = true;  
  123.         reels[i].stopFlag = false;  
  124.         reels[i].stopNum = stopNum;  
  125.     }  
  126. }  
  127. function winclick(){  
  128.     win.visible = false;  
  129.     start.visible = true;  
  130. }  
  131. function checkWin(){  
  132.     var i;  
  133.     var allstop = 0;  
  134.     for(i=0;i<3;i++){  
  135.         if(!reels[i].startReel)allstop++;  
  136.     }  
  137.     if(allstop >= 3){  
  138.         for(i=0;i<3;i++){  
  139.             stopBtn[i].visible = false;  
  140.         }  
  141.          
  142.         if(reels[0].stopNum >= 19){  
  143.             win.visible = true;  
  144.         }else{  
  145.             start.visible = true;  
  146.         }  
  147.     }  
  148. }  
复制代码
opyReel.js
  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.     var i,sy;  
  30.     self.reels[0].height = 60;  
  31.     self.reels[0].bitmapData.height = self.reels[0].height;  
  32.     self.reels[0].bitmapData.setCoordinate(0,80-self.reels[0].height);  
  33.     self.reels[2].height = 60;  
  34.     self.reels[2].bitmapData.height = self.reels[2].height;  
  35.     self.reels[3].visible = false;  
  36.     sy = 0;  
  37.     for(i=0;i<self.reels.length;i++){  
  38.         self.reels[i].y = sy;  
  39.         sy += self.reels[i].height;  
  40.         self.addChild(self.reels[i]);  
  41.     }  
  42.     //self.startReel = true;  
  43.     //self.stopFlag = false;  
  44. }  
  45. Reel.prototype.onframe = function (){  
  46.     var self = this;  
  47.   
  48.     if(self.startReel)self.wheel();  
  49. };  
  50. Reel.prototype.getReel = function (){  
  51.     var self = this;  
  52.     if(self.currentNum > self.maxNum)self.currentNum = 1;  
  53.     self.indexs[0] = self.currentNum;  
  54.   
  55.     self.indexs.pop();  
  56.     self.indexs.unshift(self.currentNum);  
  57.     var nextReel = new LBitmapData(imglist["item"+self.currentNum++]);  
  58.     return nextReel;  
  59. };  
  60. Reel.prototype.wheel = function (){  
  61.     var self = this;  
  62.       
  63.     //回転速度の調節  
  64.     if (self.stopFlag) {  
  65.         //スピードダウン  
  66.         if (self.currentSpeed > self.minSpeed) {  
  67.             self.currentSpeed -= self.speedDownStep;  
  68.         } else {  
  69.             self.currentSpeed = self.minSpeed;  
  70.         }  
  71.     } else {  
  72.         //スピードアップ  
  73.         if (self.currentSpeed < self.maxSpeed) {  
  74.             self.currentSpeed += self.speedUpStep;  
  75.         } else {  
  76.             self.currentSpeed = self.maxSpeed;  
  77.         }  
  78.     }  
  79.     if(self.stopFlag && self.currentSpeed <= self.minSpeed && self.indexs[1] == self.combination[self.stopNum][self.index] && self.reels[1].y + self.currentSpeed > 60){  
  80.         self.currentSpeed = 60 - self.reels[1].y;   
  81.         self.startReel = false;  
  82.          
  83.     }  
  84.     self.setY();  
  85.     if(!self.startReel)checkWin();  
  86. };  
  87. Reel.prototype.setY = function(){  
  88.     var self = this;  
  89.     self.reels[1].y += self.currentSpeed;  
  90.     if(self.reels[1].y + self.reels[1].height > 200){  
  91.         self.reels[1].height = 200 - self.reels[1].y;  
  92.         self.reels[1].bitmapData.height = self.reels[1].height;  
  93.     }  
  94.     if(self.reels[1].y > 80){  
  95.         self.reels[0].height = 80;  
  96.         self.reels[0].y = self.reels[1].y - 80;  
  97.     }else{  
  98.         self.reels[0].height = self.reels[1].y;  
  99.         self.reels[0].y = 0;  
  100.     }  
  101.     self.reels[0].bitmapData.height = self.reels[0].height;  
  102.     self.reels[0].bitmapData.setCoordinate(0,80-self.reels[0].height);  
  103.       
  104.     self.reels[2].y = self.reels[1].y + self.reels[1].height;  
  105.       
  106.     if(self.reels[2].y > 200){  
  107.         self.reels[2].visible = false;  
  108.     }else if(self.reels[2].y + 80 > 200){  
  109.         self.reels[2].height = 200 - self.reels[2].y;  
  110.         self.reels[2].bitmapData.height = self.reels[2].height;  
  111.     }else{  
  112.         self.reels[3].y = self.reels[2].y + self.reels[2].height;  
  113.         if(self.reels[3].y < 200){  
  114.             self.reels[3].height = 200 - self.reels[3].y;  
  115.             self.reels[3].bitmapData.height = self.reels[3].height;  
  116.         }  
  117.     }  
  118.       
  119.     if(self.reels[0].y > 0){  
  120.         var child = self.reels.pop();  
  121.         child.bitmapData = self.getReel();  
  122.         child.visible = true;  
  123.         self.reels.unshift(child);  
  124.         child.y = 0;  
  125.         child.height = self.reels[1].y;  
  126.         child.bitmapData.height = child.height;  
  127.         child.bitmapData.setCoordinate(0,80-child.height);  
  128.     }  
  129.     if(self.reels[3].y >= 200){  
  130.         self.reels[3].visible = false;  
  131.     }  
  132. };  
复制代码
index.html
  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. </body>  
  14. </html>  
复制代码
游客,如果您要查看本帖隐藏内容请回复




最佳答案
0 
goodlife2017 发表于 2017-3-23 15:05:56 | 显示全部楼层
666666666666666666666666
最佳答案
0 
鱼之恋 发表于 2017-3-23 15:19:52 | 显示全部楼层
html5游戏开发-简单老虎机
最佳答案
0 
wo2nanren 发表于 2017-3-23 16:20:43 | 显示全部楼层
厉害了 我的歌
最佳答案
0 
sword2009 发表于 2017-3-23 17:07:19 | 显示全部楼层
HTML5的canvas
最佳答案
0 
sword2009 发表于 2017-3-23 17:07:26 | 显示全部楼层
HTML5的canvas
最佳答案
0 
wz441057973 发表于 2017-3-23 17:59:48 | 显示全部楼层
最佳答案
0 
goodlife2017 发表于 2017-3-23 21:02:06 | 显示全部楼层
66666666666666666666666666
最佳答案
0 
goodlife2017 发表于 2017-3-24 07:43:58 | 显示全部楼层
6666666666666
最佳答案
0 
goodlife2017 发表于 2017-3-24 08:58:16 | 显示全部楼层
6666666666666666
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表