使用纯JS还原小时候游戏厅里的水果机

“

这份小游戏原型代码写于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还原小时候游戏厅里的水果机相关推荐

html五子棋游戏原理讲解,纯JS实现五子棋游戏
本文实例为大家分享了JS实现五子棋游戏的具体代码,供大家参考,具体内容如下基本实现方式是表格,当时想用黑白圆棋代替的,但是尺寸没调好,就先上黑白底色了说一下实现思路,刚开始是想每次落子的时候都把整 ...
纯js 消灭星星游戏，js 消灭星星游戏实现原理，有道具的消灭星星
消灭星星游戏的几个核心逻辑用10*10的数组nums保存星星,1-5表示有星星,0表示已经消去 1.初始化,5种颜色的星星分配. 1-5 这个最容易,随机分配就好,产生1-100的随机数num,nu ...
纯js完成石头剪刀布游戏（仅仅使用JavaScript完成）
思路 1.创设一个玩家可输入的定义框(promp) 2.创设电脑的随机函数(var com = Math.floor(Math.random()*3);)(这个的意思是0,1,2随机取值) 3.进行假 ...
投篮机投篮有技巧吗_游戏厅里的投篮机怎样才能投出高分，准确度还可以了，就是速度跟不上。...
关于投篮机技巧注:以下说的都是关于小号投篮机当然仅供参考 1 选一台你喜欢的机子(个人喜欢小号的) 数字显示要完好(正佳好多大机都很残)球的重量偏轻抓上手不会跑一般正规的机子都是六个球 ...
纯js制作的弹球游戏
纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1  5 <!DOCTYP ...
纯js单页面赛车游戏
纯js单页面赛车游戏这次就是给大家分享赛车的游戏: 废话不多,直接上代码: <!DOCTYPE html> <html> <head><meta chars ...
html5 canvas纯js开发战棋类rpg游戏
一.效果游戏是用纯js开发的,我也不是经常用js,代码有写的不好的地方还请见谅. 这个项目是上班闲着的时候做的,目前正在开发中,代码地址:https://github.com/zxf20180725 ...
纯js写的手机版成语填空游戏
前面用python的pygame版本做了一个成语填空游戏 https://blog.csdn.net/zhangenter/article/details/89807613 有朋友抱怨手机上用不了,现 ...
纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html&g ...

使用纯JS还原小时候游戏厅里的水果机

效果预览

动图

在线试玩

开发准备

pixi.min.js

sound.js

tweenlite.js

界面搭建

绘制方形转盘界面

下注按钮界面

定义下注按钮

绘制下注按钮

算法

随机一个结果

转动起来

控制概率

绝对不让你赢

只让你赢最小的奖

远离赌博

源码仓库

关注大帅搞全栈

使用纯JS还原小时候游戏厅里的水果机相关推荐

最新文章

热门文章