“

這份小游戲原型代碼寫于2018年，當時是想基于區塊鏈做一個菠菜小游戲，后來因為種種原因沒有做完。今天把這份代碼拿出來分享下這類游戲的設計思路。

”

效果預覽

動圖

在線試玩

開發準備

pixi.min.js

“

一個適用于所有設備的快速輕量級2D庫

”

sound.js

“

一個使用WebAudio API用代碼創作音效的框架

”

tweenlite.js

“

非常著名和流行的一個補間動畫庫

”

界面搭建

繪制方形轉盤界面

“

這里我使用一個二維數組來配置轉盤，可以很方便的更改配置。代碼也非常直觀。

”

var?arr=[[13,09,02,01,15,16,11],[10,00,00,00,00,00,07],[15,00,00,00,00,00,08],[17,00,00,00,00,00,18],[05,00,00,00,00,00,15],[06,00,00,00,00,00,14],[11,12,15,03,04,09,13]];var?tsquares=[];for(var?i=0;i<arr.length;i++){for(var?j=0;j<arr[i].length;j++){var?itemKey=parseInt(arr[i][j]);var?citem={};if(itemKey>0){citem=createItemSquare(itemKey-1);citem.x?=?25+100*j;citem.y?=?25+100*i;citem.key=itemKey-1;stage.addChild(citem);}tsquares.push(citem);}}

下注按鈕界面

“

首先通過一個數組來配置所有的有效格，并且定義格子對應的獎勵倍數。

”

var?squareItemConfigs=[{name:"王",coin:"*120"},{name:"小王",coin:"*50"},{name:"77",coin:"*40"},{name:"小77",coin:"*3"},{name:"星星",coin:"*30"},{name:"小星星",coin:"*3"},{name:"西瓜",coin:"*20"},{name:"小西瓜",coin:"*3"},{name:"鈴鐺",coin:"*20"},{name:"小鈴鐺",coin:"*3"},{name:"檸檬",coin:"*20"},{name:"小檸檬",coin:"*3"},{name:"橙子",coin:"*10"},{name:"小橙子",coin:"*3"},{name:"蘋果",coin:"*5"},{name:"小蘋果",coin:"*3"},{name:"幸運",type:"lucky1"},{name:"小幸運",type:"lucky2"}];

定義下注按鈕

var?bets=[{key:"01",value:0},{key:"03",value:0},{key:"05",value:0},{key:"07",value:0},{key:"09",value:0},{key:"11",value:0},{key:"13",value:0},{key:"15",value:0}];

繪制下注按鈕

for(var?i=0;i<bets.length;i++){var?betitem=createBetItem(parseInt(bets[i].key)-1,function(item){betIn(item.index);});betitem.index=i;bets[i].target=betitem;betitem.x=25+i*88;betitem.y=750;stage.addChild(betitem);}

算法

隨機一個結果

“

我的做法是在當前位置上加上一個隨機位置，然后將隨機位置再加上隨機的整數圈數來進行轉動。

”

var?pos=Math.round(squares.length*Math.random()); //轉換為一圈內的真實位置 function?getStopPosition()function?getTPos(){var?tpos=pos+curIndex;if(tpos>=squares.length){tpos-=squares.length;}return?tpos;}var?tpos=getTPos();//將最終的結果加上整數圈數，用于滾動計算return?squares.length*(Math.floor(Math.random()*4)+3)+pos; }

轉動起來

function?startRoll(){isrolling=true;deselectItem(curIndex);var?count=0;var?totalCount=getStopPosition();function?rollloop(){//開始轉動時由慢變快，最后停下時由快變慢，這里其實可以有更優雅的方法來實現var?easeval=0.1;if(count>=totalCount-5)easeval=0.05;else?if(count>=totalCount-10)easeval=0.1;else?if(count>=totalCount-15)easeval=0.2;else?if(count>=10)easeval=1;else?if(count>=5)easeval=0.2;count=count+easeval;count=parseFloat(count.toFixed(2));if(isInteger(count)){curIndex+=1;if(curIndex>=squares.length){curIndex=0;}var?item=selectItem(curIndex);soundplay();if(count>=totalCount){//結束滾動rollstop();calcBonus(item);}else{//做一個淡出效果item.fadeout();}}}function?rollstop(){//解綁ticker重繪app.ticker.remove(rollloop);isrolling=false;}//綁定ticker重繪app.ticker.add(rollloop); }

控制概率

“

既然是菠菜游戲，如果使用真的隨機，可能會賠死。必須是在滾動開始前就已經計算好了，想讓你贏你就贏，想讓你輸你就輸。

”

絕對不讓你贏

/* 下注者最小收益模型 如果可能中獎，則破壞本次選定值 */var?betResult=isInBetWithKey(titem.key); if(betResult!=false){console.log("本次轉動將停止到：",squareItemConfigs[parseInt(titem.key)].name);console.log(squareItemConfigs[parseInt(titem.key)].name,"可中獎,重新改變位置");return?getStopPosition(); }//判斷當前位置是否有獎 function?isInBetWithKey(key){var?isGetBonus=false;for(var?i=0;i<bets.length;i++){var?rk=parseInt(key);//當前停在的項目var?tk=parseInt(bets[i].key)-1;//下注的目標項目if(bets[i].value>0){//當下注大于0時才進入判斷if((rk==tk||rk-1==tk)){isGetBonus=true;break;}}}return?isGetBonus; }

只讓你贏最小的獎

function?getMinEarningKey(){//沒寫，你會怎么寫呢？ }

遠離賭博

“

本文到這里就結束了，但希望借此告誡所有伙伴們，遠離賭博。

”

源碼倉庫

https://github.com/ezshine/jsfruitmachine

“

這份還存在一些小bug，但基本涵蓋了此游戲應該有的全部機制，現實生活中的水果機上還有個中獎后猜大小的機制，這里就不繼續實現了。大家可以使用源碼任意玩耍。

”

關注大帥搞全棧

感謝分享點贊評論三連

總結

以上是生活随笔為你收集整理的使用纯JS还原小时候游戏厅里的水果机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。