Бросьте кости (случайные числа) и переместитесь в таблице
html код такой
<input type = "button" value = "Throw the Dice" onmouseup = "throwTwoDice(6,6)">
<div id = "dice1" style = "padding:10px;font-style:bold;font-size:xx-large">0 - 0</div>
</div>
код javascript это
function dice(sides){
var rand = Math.floor(Math.random()*sides) + 1;
return rand;
};
function throwTwoDice(dice1Sides, dice2Sides){
var rand1 = dice(dice1Sides);
var rand2 = dice(dice2Sides);
document.getElementById('dice1').innerHTML = rand1 + ' - ' + rand2;
return true;
};
У меня есть случайные числа rand1 и rand2. Я хочу, чтобы ранд1 = х1 и ранд2 = х2. У меня есть таблица с 2 строками и 12 столбцами, строка 1 - это x1, а строка 2 - x2. У меня есть изображения в [1,1] и в [12,2]. Код это javascript
let colors = {black:"https://media2.giphy.com/media/htSM5MPkwlKaSYE7yN/giphy.gif?cid=ecf05e47pftg0oul854g6z0mypnv4564axlqcaxsrlttxl5o&rid=giphy.gif"
,red:"https://media3.giphy.com/media/fxhEoiBJo7NNXc7ozy/giphy.gif?cid=ecf05e474lq8uatdu2wyyun0cpf096zqy78hsopz0pxzvete&rid=giphy.gif"}
let items = [{
"x": 1,
"y": 1,
"piece": "p",
"piece_color": "black",
"b_color": "black"
},
{
"x": 12,
"y": 2,
"piece": "p",
"piece_color": "red",
"b_color": "red"
}
];
$(function() {
draw_empty_board();
fill_board();
});
function fill_board() {
fill_board_by_data(items);
}
function fill_board_by_data(data) {
for (var i = 0; i < data.length; i++) {
var o = data[i];
var id = '#square_' + o.x + '_' + o.y;
var c = (o.piece != null) ? o.piece_color : '';
var im = (o.piece != null) ? '<img class = "piece" src = "' + colors[c] + '.png">' : '';
var htmls = ''; //delcare this
//check color if black 14 or 15(red)
var count = (o.piece_color == "black") && (o.piece != null) ? 15 : 15
//loop till count
for (var j = 0; j < count; j++) {
//append img
htmls += '<img class = "piece" src = "' + colors[c] + '.png">';
}
//finally add img inside td
$(id).addClass(o.b_color + '_square').html(htmls)
}
var t = '<table id = "chess_table">';
for (var i = rowCount; i > 0; i--) {
t += '<tr>';
t += '<td class = "line_label">' + i + '</td>';
for (var j = 1; j < columnCount; j++) {
t += '<td class = "chess_square" id = "square_' + j + '_' + i + '">' + j + ',' + i + '</td>';
}
t += '</tr>';
}
t += '<tr><td class = "column_label line_label"></td>';
for (var j = 1; j < 13; j++) {
t += '<td class = "column_label">' + j + '</td>';
}
t += '</tr>';
t += '</table>';
}
Я хочу, когда приходят случайные числа пример 3-6. Тогда первым (3 в этом случае) будет позиция [3,1]. Затем в этот слот перейдет 1 изображение черного цвета. Кроме того, около (6 в этом случае) будет позиция [6,2], и одно из красных изображений будет помещено в этот слот. В результате, чтобы суммировать 3, это x1, а 6 - это x2. Более подробная строка x1 имеет 1, а строка x2 имеет 2. Таким образом, числа будут такими ( ,1) ( ,1) и т. д. и для x2 ( ,x2) ( ,x2) и т. д. Я заменяю пустое место случайным числом. Я пока пытаюсь переместить свои изображения или сделать это, но я теряю изображения или значения не идут хорошо. подсказка: черные изображения двигаются только по линии x1. Красные изображения перемещаются только по линии x2.
У меня есть таблица 2 строки 12 столбцов. Строки 1 и 2. Я называю это x=1 и x=2. Как видите, я загрузил картинку. С таблицей, похожей на то, что я создаю.
У меня есть таблица 2 строки 12 столбцов. Строки 1 и 2. Я называю это x=1 и x=2. Как видите, я загрузил картинку. С таблицей, подобной той, что я показываю вам здесь. У меня есть фотографии 15 (изображения). У меня есть черный, цветной и красный цвет. 15 каждый. Теперь черный (15 изображений) находится в [1,1], а красный (15 изображений) — в [12,2]. Я создал игральную кость (что она имеет 2 случайных значения). Это дает мне пример, когда я нажимаю кнопку fhe 2 числа, пример 7 - 9. 7 пойдет для черных, и это будет, например, [7,1], поэтому 1 изображение из 15 черных попадет в этот слот, как вы видите изображение . С другой стороны, 9 будет [9,2]
Другим способом, если вы все еще не поняли. Посмотрите на изображение, которое я хочу сделать, это из [1,1], у меня есть изображения (черные), я хочу переместить их до [8,1]. Как вы можете видеть, 1 является стандартным, что меняется, так это первое число. Поэтому, когда я нажму кнопку, я возьму случайное число до 8. Это случайное число будет первым неизвестным числом [ ,1]. И то же самое я делаю для слотов [,2]
@josef wittmann ты понимаешь, что я пытаюсь сделать? . Я не могу сделать фрагмент, потому что это то же самое, что и изображение, которое я загрузил. За исключением того, что у меня есть изображения в [1,1] и в [12,2] (на картинке, которую я загружаю, это [8,2])
Я не могу уследить. Кажется, у вас в голове есть четкая картина, но нет возможности следовать, если только вы не сосредоточитесь на том, в чем на самом деле заключается ваша проблема (забудьте о деталях). Чего вы пытаетесь достичь, шаг за шагом?
Переместите jmages черным по x = 1 от 1,1, чтобы переместить его со случайным числом до 12,1. То же самое с красным, но я хочу переместить красный только в x=2. Вот и все. Я хочу, чтобы это было сделано со случайными числами. Допустим, xx неизвестно и x1=1, затем [xx,1], где xx=случайное число. Затем мое изображение (черное) идет дальше.
@Josef wittmann Я думаю, теперь ты поймешь. У меня есть стол. У меня есть две линии. В каждой строке у меня разные образы. Я бросаю кости и получаю два случайных числа. Эти случайные числа я использую для перемещения 1 черного и 1 красного. Красный ходит по своим линиям (это означает, что x=2), а черные ходят по своим линиям (x=1). Случайные числа из игральных костей — это [случайное число,1], [случайное число,2].
Становится яснее. Хорошим подходом было бы иметь игровое состояние (может быть, массив элементов, таких как ваш items), а затем иметь функцию render(items), которая рисует объекты в соответствии с состоянием items. Тогда вам не придется беспокоиться о рисовании при работе с игровой логикой. А затем просто создайте еще одну функцию, которая обрабатывает логику игры (найдите черную фигуру и переместите ее в соответствии с первым кубиком, найдите красную фигуру и переместите ее в соответствии со второй фигурой). Это где вы боретесь?
@JosefWittmann именно это. Я пытаюсь делать так много часов, но все еще не могу. Я пробовал много вещей, и в Интернете мало информации об этом.
Пожалуйста, добавьте к вопросу все необходимые сведения, а затем удалите все комментарии, в которых содержится информация, относящаяся к вопросу. Исследователям и добровольцам не нужно читать комментарии, чтобы понять вопрос. Почему в этом вопросе есть тег php?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что Вы думаете об этом:
// basic game settings
const gameSettings = {
length: 12,
die: {
min: 1,
max: 8,
}
}
// define "actors"
let gameItems = [{
name: "R",
bgColor: "red",
color: "white",
position: 11,
direction: -1,
startingPosition: 11,
imgUrl: `https://picsum.photos/seed/red/40/20`,
},
{
name: "B",
bgColor: "black",
color: "white",
position: 0,
direction: 1,
startingPosition: 0,
imgUrl: `https://picsum.photos/seed/black/40/20`,
},
]
// the random function
// source: https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript
function randomIntFromInterval(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min);
}
// -----------------
// creating a row & cells
const rowHtml = (gameItem, cols) => {
let html = `<div class = "row" style = "grid-template-columns: repeat(${ cols }, 1fr)">`
for (let i = 0; i < cols; i++) {
let content = "-"
let background = "white"
let color = "black"
if (gameItem.position === i) {
marker = gameItem.name
background = gameItem.bgColor
color = gameItem.color
content = `<img src = "${ gameItem.imgUrl }" />`
}
html += `<div class = "cell" style = "background: ${ background }; color: ${ color }">${ content }</div>`
}
html += `</div>`
return html
}
// updating rows
const updateRows = (container, gameItems, cols) => {
let html = ''
for (let i = 0; i < gameItems.length; i++) {
html += rowHtml(gameItems[i], cols)
}
container.innerHTML = html
}
// setting container
const container = document.getElementById('container')
// set up board for first time
updateRows(container, gameItems, gameSettings.length)
// -----------------
// action buttons
const btnRoll = document.getElementById("rollTheDice")
const btnResetBoard = document.getElementById("resetBoard")
// roll action
btnRoll.addEventListener('click', function() {
const {
length,
die: {
min
},
die: {
max
}
} = gameSettings
gameItems = gameItems.map(item => ({
...item,
position: item.position + (randomIntFromInterval(min, max) * item.direction),
}))
updateRows(container, gameItems, length)
})
// reset action
btnResetBoard.addEventListener('click', function() {
const {
length
} = gameSettings
gameItems = gameItems.map(item => ({
...item,
position: item.startingPosition,
}))
updateRows(container, gameItems, length)
}).row {
display: grid;
grid-template-rows: 1fr;
}
.cell {
box-sizing: border-box;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
height: 32px;
}
.cell img {
max-width: 100%;
min-width: 100%;
}<div id = "container"></div>
<hr />
<button id = "rollTheDice">ROLL THE DICE</button><br />
<button id = "resetBoard">RESET BOARD</button>В этом сниппете можно задать количество игроков, длину доски, разброс кубиков (мин-макс) и некоторые настройки «игроков».
РЕДАКТИРОВАТЬ
В gameItems добавлено три новых атрибута:
directionуправляет направлением шаговgameItem(1 слева направо, -1 справа налевоstartingPositionустанавливает, где начинаетсяgameItemпосле сброса доскиimgUrl— это URL-адрес изображения, которое отображается какgameItemна доске.
сразу после этого } html += </div> return html } // обновление строк const updateRows = (container, gameItems, cols) => { let html = '' for (let i = 0; i < gameItems.length; i++) { html += rowHtml(gameItems[i], cols) } container.innerHTML = html
до конца. Я поместил его в сценарий javascript, и он не показывает меня как код javascript, лол
Итак, а) может быть, это потому, что это не html, а .php? вот почему я думаю. Во-вторых, я хочу, чтобы R начинался с конца. не слева направо, а справа налево. Идея правильная, но требует некоторых изменений.. если бы вы могли отредактировать
также я не могу добавить в этот код изображения. Идеально, если бы он мог работать с изображениями и вместо html быть на php этот код
@mainklain Привет, извините за то, что этот ответ занял так много времени - это было время Рождества.
Я не могу понять, что вы пытаетесь сделать. Вы можете вставить рабочий фрагмент в свой вопрос, чтобы его было легче понять.