“
The prototype code of this small game was written in 2018. At that time, I wanted to make a spinach small game based on the blockchain, but it was not finished due to various reasons. Take out this code today to share the design ideas of this type of game.
”
Effect preview
GIF
Play online
Development preparation
pixi.min.js
“
A fast and lightweight 2D library for all devices
”
sound.js
“
A framework for creating audio effects with code using the WebAudio API
”
tweenlite.js
“
A very famous and popular motion tween library
”
interface construction
Draw a square carousel interface
“
Here I use a two-dimensional array to configure the turntable, which can easily change the configuration. The code is also very intuitive.
”
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);
}
}
Bet button interface
“
First, configure all valid grids through an array, and define the reward multiples corresponding to the grids.
”
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"
}];
Define the bet button
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
}];
draw bet button
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);
}
algorithm
a random result
“
My approach is to add a random position to the current position, and then add a random integer number of turns to the random position to rotate.
”
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;
}
turn up
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);
}
control probability
“
Since it is a spinach game, if it is really random, it may lose money. It must be calculated before the roll starts, if you want you to win, you win, if you want you to lose, you lose.
”
never let you win
/*
下注者最小收益模型
如果可能中奖，则破坏本次选定值
*/
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;
}
Only let you win the smallest prize
function getMinEarningKey(){
//没写，你会怎么写呢？
}
stay away from gambling
“
This article is over here, but I hope to use this to warn all partners to stay away from gambling.
”
source code repository
https://github.com/ezshine/jsfruitmachine
“
There are still some small bugs in this game, but it basically covers all the mechanisms that this game should have. In real life, there is also a mechanism of guessing the size of the lottery after winning, so it will not be implemented here. You can use the source code to play freely.
”
Pay attention to Dashuai and engage in full stack
Thanks for sharing, likes and comments