gpt4 book ai didi

javascript - 如何创建类似 'wheel of fortune' 的效果

转载 作者:行者123 更新时间:2023-11-30 11:41:14 26 4
gpt4 key购买 nike

首先让我描述一下我正在努力的元素。英语不是我的外语,所以我不知道我要寻找的效果的确切名称。

基本上我正在创建一种宾果类型的游戏,主机可以按下按钮启动宾果轮。最终,轮子会停下来,它落在的单词就是该轮选择的单词。之后,这个词从游戏中删除,游戏重新开始,直到有人叫宾果游戏。

我开始研究一些 JSON 数据以及如何从数组中删除元素等,这很容易做到。但现在是我最挣扎的部分。我必须创建一种功能,它可以像滚轮一样以一定的速度滚动所有选项,最终速度会降低,这样它就会落在这一轮选择的词上。我用我目前拥有的代码创建了一个 fiddle 。请注意,它纯粹是为功能而不是外观而创建的!

var json = {
"titles": [
"PLACEHOLDER_1",
"PLACEHOLDER_2",
"PLACEHOLDER_3",
"PLACEHOLDER_4",
"PLACEHOLDER_5",
"PLACEHOLDER_6",
"PLACEHOLDER_7",
"PLACEHOLDER_8",
"PLACEHOLDER_9",
"PLACEHOLDER_10",
"PLACEHOLDER_11",
"PLACEHOLDER_12",
"PLACEHOLDER_13",
"PLACEHOLDER_14",
"PLACEHOLDER_15"
]
}
$(document).ready(function() {
var app = new Bingo.init();
})

var Bingo = {
viewport: {
isMobile: 0,
isTablet: 0,
isDesktop: 1,
device: 'desktop',
browser: null
}
}

Bingo.init = function() {
Bingo.gameController.init();
};


Bingo.gameController = {
gameNames: {},
init: function() {
Bingo.gameController.general.saveJson();
$('.test').on('click', Bingo.gameController.array.pickRandomNumber)
},

general: {
saveJson: function() {
Bingo.gameController.gameNames = json.titles;
},

//General reset function
resetGame: function() {
Bingo.gameController.general.saveJson;
}
},

array: {
pickRandomNumber: function() {
//reset gamefield
Bingo.gameController.game.buildGame();
var gameNames = Bingo.gameController.gameNames;
var totalNames = gameNames.length;
//Pick a random number
var chosenNumber = Math.floor(Math.random() * totalNames);
Bingo.gameController.array.remove(chosenNumber)
},

remove: function(id) {
//remove chosen name from array
var gameNames = Bingo.gameController.gameNames;
var check = gameNames.indexOf(gameNames[id]);
Bingo.gameController.game.highlightName(id);
if (check != -1) {
gameNames.splice(check, 1);
Bingo.gameController.gameNames = gameNames;
}
}
},

game: {
buildGame: function() {
//build all the array entry's into the div
$('.page.main-game').empty();
var gameNames = Bingo.gameController.gameNames;
for (var i = 0; i < gameNames.length; i++) {
var item = '<div class="name-item" data-id="' + i + '">' + gameNames[i] + '</div>';
$('.page.main-game').append(item);
}
},

highlightName: function(id) {
//highlight the chosen number red
$('.name-item[data-id="' + id + '"]').css('color', 'red');
}
}
}

Fiddle link here(我希望链接是正确的,不要那么多地使用 fiddle )

现在当您点击“再次播放”按钮时,您会看到它会突出显示一个单词。必须发生的事情是,当我再次按下播放按钮时,红色突出显示必须从第一个 div 到最后一个 div,依此类推,直到它最终停在一个 div(用随机数或其他东西选择)。

如果有人可以帮助我解决这个问题,或者可以给我一个正确方向的提示,请告诉我!

额外:当您打开一个选择框时,该应用程序最终会看起来像 iphone 上的滚轮(希望您知道我指的是什么)。所以这就是为什么它具有命运之轮的效果。如果有人可以为我提供正确的名称,请告诉我,以便我调整标题!

如果缺少任何信息,请告诉我,我很乐意提供!谢谢!

最佳答案

基本思想是(1)保持当前索引,因此每次都可以从该索引开始旋转,其中“旋转”只是增加该索引或在达到时设置为零最大指数;和(2)为下一次绘画设置超时,并每次都减少超时,直到足够低。

JsFiddle Demo

HTML

<p><button onclick="w.spin(w.randomNext(), 8)">SPIN</button></p>

<ul id='wheel'>
<li>$100</li>
<li>$250,000</li>
<li>$25,000</li>
<li>$10,000</li>
<li>$1,000</li>
<li>$5</li>
<li>$2,000</li>
<li>30,000</li>
<li>$40</li>
</ul>

JavaScript

var wheelEl = document.getElementById('wheel');

function Wheel () {
this.current = 4;
}

Wheel.prototype.init = function () {
this.onItem();
}

Wheel.prototype.randomNext = function () {
return Math.floor(Math.random() * wheelEl.children.length);
}

Wheel.prototype.spin = function (next, itemsPerSecond) {
var timeout = setTimeout(onItem.bind(this), (1 / itemsPerSecond) * 1000);

function onItem () {
// stop if speed is low enough
if (itemsPerSecond < 1)
return;

// spin to next item
this.current ++;
if (this.current >= wheelEl.children.length)
this.current = 0;

// paint text
this.onItem();

// reduce speed
clearTimeout(timeout);
itemsPerSecond--;
timeout = setTimeout(onItem.bind(this), (1 / itemsPerSecond) * 1000);
}
}

// paints the index of this.current
Wheel.prototype.onItem = function () {
for (var i = 0 ; i < wheelEl.children.length ; i++)
wheelEl.children[i].style.color = (i == this.current) ? '#6d4321' : '#000000';
}

var w = new Wheel();
w.init();

关于javascript - 如何创建类似 'wheel of fortune' 的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42576478/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com