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

使用纯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);
	}
复制代码

音效

sound.js 这个库很好玩,完全用代码来生成音效,比如下面这段代码,就代表了一个金币的音效。

function soundplay(){
	soundEffect(1587.33, 0, 0.2, "square", 1, 0, 0);
	//A
	soundEffect(880, 0, 0.2, "square", 1, 0, 0.1);
	//High D
	soundEffect(1174.66, 0, 0.3, "square", 1, 0, 0.2);
}
复制代码

算法

随机一个结果

我的做法是在当前位置上加上一个随机位置,然后将随机位置再加上随机的整数圈数来进行转动。这样转动起来就有空间做效果

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);
}
复制代码

控制概率

如果只是使用Math.random来随机就属于失控的状况了,结果必须是在滚动开始前就已经计算好了,想让你赢你就赢,想让你输你就输。

绝对不让你赢的方法

/*
下注者最小收益模型
如果可能中奖,则破坏本次选定值
*/

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(){
  //没写,你会怎么写呢?
}
复制代码

源码仓库

github.com/ezshine/jsf…

这份代码可能还存在些小bug,但基本涵盖了此游戏应该有的全部机制,现实生活中的水果机上还有个中奖后猜大小的机制,这里就不继续实现了。大家可以使用源码任意玩耍。

关注大帅搞全栈

感谢分享点赞评论三连,跟大帅一起“掘金”吧~

文章分类
前端
文章标签