Estoy intentando construir una máquina tragamonedas en JavaScript y Vue.js con el índice de cada matriz devolviendo un número aleatorio. Para este proyecto, estoy usando un bucle for para recorrer una matriz de ranuras inicializada en [1, 1, 1] y el método indexOf para apuntar al índice de cada elemento de la matriz de ranuras. Luego, también estoy recorriendo una matriz de números aleatorios, luego uso un método de empalme para apuntar al índice de cada elemento de la matriz de ranuras, elimino 1 elemento de ese índice y reemplazo el elemento en ese índice dado con el número aleatorio. Sin embargo, mi slots.value.splice(index, 1, randomNum[r]) parece estar eliminando 1 elemento en index y reemplazando ese elemento con el último elemento de la matriz randomNum . Mi intención es reemplazar el elemento en cada índice de slots.value con diferentes números aleatorios de la matriz randomNum . ¿Cómo puedo hacer esto?
Aquí está mi código:
<template> <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="px-4 py-6 sm:px-0"> <div class="grid grid-cols-3 items-center py-16"> <div v-for="slot in slots" :key="slot.id" class="w-96 h-96"> <div class="w-full h-full rounded-md shadow-lg border-solid border-2 border-sky-500"> <p class="text-9xl mt-28">{{ slot }}</p> </div> </div> </div> <div class="flex justify-center"> <button @click="spin"> Spin </button> </div> </div> </div> </template> <script setup> import { ref } from "@vue/reactivity"; const slots = ref([1, 1, 1]) const spin = () => { const randomNumOne = Math.floor(Math.random() * (10 - 0) + 0) const randomNumTwo = Math.floor(Math.random() * (10 - 0) + 0) const randomNumThree = Math.floor(Math.random() * (10 - 0) + 0) const randomNum = [randomNumOne, randomNumTwo, randomNumThree] for (let i = 0; i < slots.value.length; i++) { for (let r = 0; r < randomNum.length; r++) { const index = slots.value.indexOf(slots.value[i]) console.log(randomNum[r]) if (index > -1) { // remove 1 element at each index and replace each with random numbers slots.value.splice(index, 1, randomNum[r]) } } } } </script>Esto funciona para tí ?
const slots = [1, 1, 1] const spin = () => { const randomNumOne = Math.floor(Math.random() * (10 - 0) + 0); const randomNumTwo = Math.floor(Math.random() * (10 - 0) + 0); const randomNumThree = Math.floor(Math.random() * (10 - 0) + 0); const randomNum = [randomNumOne, randomNumTwo, randomNumThree]; for (let i = 0; i < slots.length; i++) { const index = Math.floor(Math.random() * randomNum.length); slots[i] = randomNum.splice(index, 1)[0]; } } spin(); console.log(slots); Para cada elemento de su matriz de slots , tomamos un elemento aleatorio de randomNum , lo eliminamos y lo asignamos al índice actual de slots .
Tenga en cuenta que el mismo número puede aparecer varias veces en los slots finales, ya que la generación de randomNumOne , randomNumTwo y randomNumThree no evita que se genere el mismo número más de una vez.