Код прототипа этой небольшой игры был написан в 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(){
//没写，你会怎么写呢？
}
Репозиторий исходного кода
В этом коде еще могут быть небольшие баги, но он в основном покрывает все механизмы, которые должны быть в этой игре.В реальной жизни так же есть механизм угадывания размера после выигрыша в лотерею на автомате с фруктами, так что не буду продолжайте реализовывать его здесь. Вы можете использовать исходный код, чтобы играть бесплатно.
Обратите внимание на Дашуая и займитесь полным стеком
Спасибо, что поделились, поставили лайк и прокомментировали три раза подряд. Давайте «Самородок» с большим красавчиком~