使用javascript开发全浏览器兼容的水果机游戏.doc

Javascript开发全浏览器兼容的老虎机游戏该文档来源于金牌小说网 在线演示地址 /UserCenter/#user_makegold而了开发效率，使用了jquery库整个老虎机仅需要一个图片足以，其他均使用css渐变和IE滤镜搭建界面这个很容易，只要对css 足够熟悉能很轻松的搭建先看css代码,就几行.MakeGoldClient float: left; width:719px; border-left: 0; border-top: 0; .MakeGoldTab .MakeGoldTab .MakeGoldTabHeader height: 36px; border-bottom: 1px solid #C9C9C9; .MakeGoldTab .MakeGoldTabHeader .tab float: left; height: 35px; line-height: 35px; padding: 0 20px 0 20px; cursor: pointer; border: 1px solid #D3D3D3; border-bottom: 0; margin-left: 2px; color: #525252; font-weight: bold; background: rgb(252,252,252); /* Old browsers */ background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1), color-stop(100%,rgba(234,234,234,1); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#fcfcfc, endColorstr=#eaeaea,GradientType=0 ); /* IE6-9 */ .MakeGoldTab .MakeGoldTabHeader .tab.hover border-color: #C0D8E3; background: rgb(242,249,254); /* Old browsers */ background: -moz-linear-gradient(top, rgba(242,249,254,1) 0%, rgba(207,237,252,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,249,254,1), color-stop(100%,rgba(207,237,252,1); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(242,249,254,1) 0%,rgba(207,237,252,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(242,249,254,1) 0%,rgba(207,237,252,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(242,249,254,1) 0%,rgba(207,237,252,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(242,249,254,1) 0%,rgba(207,237,252,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#f2f9fe, endColorstr=#cfedfc,GradientType=0 ); /* IE6-9 */ .MakeGoldTab .MakeGoldTabHeader .tab.current border-color: #C9C9C9; height: 36px; background: rgb(242,242,242); /* Old browsers */ background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1), color-stop(100%,rgba(255,255,255,1); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#f2f2f2, endColorstr=#ffffff,GradientType=0 ); /* IE6-9 */ .MakeGoldTab .MakeGoldTabClient border: 1px solid #C9C9C9; border-top: 0; border-left: 0; .MakeGoldTab .tab_client display: none; padding: 10px; color: #353535; background: white;然后html 结构 一个主div classname 设置为 makegoldgame_1嵌套一个 div game_roulette_client ，用来放旋转时候的水果嵌套一个 div game_roulette_control 用来放下注的水果Html 样式自行搭建,根据自己想要的风格搭建，也可以参考上面的demo地址现在看js代码var code0x14_jsgame = roulette : data: currentItemArrayID:0, gold:0, finished:1 , dom: main:0, client:0, control:0, items:0, controlItems:0, startButton:0, gold:0 , sound: timeout:0, itemClick:0, goItemPlayCount:0 , updateGold:function(szFlag,nGold) var updateGoldHtml = function(nGold,nCurrent) if(nGold + 1 = nCurrent) return; code0x14_jsgame.roulette.dom.gold.html(nCurrent); nCurrent+; setTimeout(function() updateGoldHtml(nGold,nCurrent); ,5); if(szFlag = -) if(this.data.gold 1) return; pDom.load(); pDom.play(); code0x14_jsgame.roulette.sound.goItemPlayCount+; setTimeout(function() code0x14_jsgame.roulette.sound.goItemPlayCount-; ,100); else if(szName = finished) pDom = this.sound.finished.get(0); pDom.load(); pDom.play(); , initSound:function() var pMain = this.dom.main; var appendSound = function(szSrc) var szHtml = ; pMain.append(szHtml); return $(audio:last,pMain); this.sound.itemClick = appendSound(/sound/game/roulette/itemclick.wav); this.sound.goItem = appendSound(/sound/game/roulette/goItem.wav); this.sound.finished = appendSound(/sound/game/roulette/finished.wav); , init:function(pDom,n) if ($.browser.msie & $.browser.version = 6) alert(抱歉,水果机没有做IE6兼容,请升级浏览器.); pDom.hide(); return; this.data.gold = n; this.dom.main = pDom.addClass(game_roulette); this.dom.client = $(div.game_roulette_client,pDom); this.dom.control = $(div.game_roulette_control,pDom); this.dom.gold = $(div.center_client_gold,pDom); $(.btn,this.dom.control).mouseenter(function() $(this).addClass(btn_hover); ).mouseleave(function() $(this).removeClass(btn_hover); ).mousedown(function() $(this).addClass(btn_press); ).mouseup(function() $(this).removeClass(btn_press); ); this.dom.startButton = $(.startButton,this.dom.client).mouseenter(function() $(this).addClass(hover); ).mouseleave(function() $(this).removeClass(hover); ).mousedown(function() $(this).addClass(press); ).mouseup(function() $(this).removeClass(press); ).click(function() if(code0x14_jsgame.roulette.data.finished = 0) return false; code0x14_jsgame.roulette.start(); ); this.dom.controlItems = $(div.item,this.dom.control).mouseenter(function() ).mouseleave(function() ).mousedown(function() ).mouseup(function() ).click(function(e) if(e.target.className = itemcount) return; code0x14_jsgame.roulette.playSound(itemClick); var me = $(this); var pItemCountDom = $(div.itemcount,me); var nCurrentCount = me.attr(count); var nPrice = me.attr(price); if(code0x14_jsgame.roulette.updateGold(-,1) = false) return false; nCurrentCount+; pItemCountDom.html(nCurrentCount); me.attr(count,nCurrentCount); ); if (typeof(Worker) != undefined) this.initSound(); else base.showMsg( icon:warning, text:您的浏览器不支持html5,音效被禁用.请升级至IE10,chrome或火狐浏览器, lock:true ); var itemsClass = ; this.dom.items = $(div.item,this.dom.client); code0x14_jsgame.roulette.dom.gold.html(this.data.gold); , itemsCount:function() var data = ; var nMaxCount = 0; $.each(code0x14_jsgame.roulette.dom.controlItems, function(i,pDom) var szItem = $(pDom).attr(item); var nPrice = $(pDom).attr(price); var nCount = $(pDom).attr(count); nMaxCount+= nCount; dataszItem = count:nCount, price:nPrice ; ); if(nMaxCount = 0) return false; return data; , clear:function() var nCount = 0; this.dom.controlItems.attr(count,nCount); $(div.itemcount,this.dom.controlItems).html(nCount); , start:function() var itemCounts = this.itemsCount(); if(itemCounts = false) return; code0x14_jsgame.roulette.data.finished = 0; code0x14_jsgame.roulette.dom.items.removeClass(select); var pCurrentItem = 0; var finished = function() code0x14_jsgame.roulette.playSound(finished); pCurrentItem.addClass(current); var szItemName = pCurrentItem.attr(item); var nCount = itemCountsszItemName.count; var nPrice = itemCountsszItemName.price; code0x14_jsgame.roulette.updateGold(+,nCount * nPrice); code0x14_jsgame.roulette.clear(); code0x14_jsgame.roulette.data.finished = 1; var goItem = function(i) code0x14_jsgame.roulette.playSound(goItem); code0x14_jsgame.roulette.data.currentItemArrayID = i; if(pCurrentItem != 0) pCurrentItem.removeClass(select); pCurrentItem = code0x14_jsgame.roulette.dom.items.filter(divarrayid=+i+).removeClass(current).addClass(select); var goFinished = function(nGoto,nCurrent) var nMaxItemCount = code0x14_jsgame.roulette.dom.items.length; goItem(nCurrent); if(nCurrent = nGoto) finished(); return; else nCurrent+; if(nCurrent = nMaxItemCount + 1) nCurrent = 0; setTimeou