Перевести код на React

@Xrty · Регистрация: 30.03.2023

Студворк — интернет-сервис помощи студентам

Подскажите как перевести js код на React? Не могу понять смысл реакта, а задание сделать нужно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const main = document.getElementById("main");
const ctx = main.getContext("2d");
 
var gap = 90;
var xPos = 10;
var yPos = 150;
var grav = 1.5;
var score = 0;
 
var bird = document.getElementById("bird");
var mainImg = document.getElementById("bg");
var fg = document.getElementById("fg");
var pipeUp = document.getElementById("pipeUp");
var pipeDown = document.getElementById("pipeDown");
 
document.addEventListener("keydown", moveUp);
 
function moveUp() {
    yPos -= 32;
}
 
var pipe = [];
 
pipe[0] = {
    x: main.width,
    y: 0
};
 
function draw() {
    ctx.drawImage(mainImg, 0, 0);
 
    for (var i = 0; i < pipe.length; i++) {
        ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
        ctx.drawImage(pipeDown, pipe[i].x, pipe[i].y + pipeUp.height + gap);
        pipe[i].x--;
        if (pipe[i].x == 110) {
            pipe.push({
                x: main.width,
                y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
            });
        }
        if (xPos + bird.width >= pipe[i].x
            && xPos <= pipe[i].x + pipeUp.width
            && (yPos <= pipe[i].y + pipeUp.height
                || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= main.height - fg.height) {
            location.reload();
        }
        if(pipe[i].x == 5) {
            score += 1;
        }
    }
 
    ctx.drawImage(fg, 0, main.height - fg.height);
    ctx.drawImage(bird, xPos, yPos);
    yPos += grav;
    ctx.fillStyle = "white";
    ctx.font = "24px Verdana";
    ctx.fillText(score, 10, main.height - 20);
    requestAnimationFrame(draw);
}
 
mainImg.onload = draw;

@vxg · 06.05.2024, 09:15

Xrty, где HTML ко всей этой "красоте" чтобы потенциальный помощник мог хоть увидеть что должно получиться? судя по всему там должен быть какой то фон и какая то картинка-персонаж которая возможно должна перемещаться

@Xrty · 06.05.2024, 13:57 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Flappy Bird</title>
</head>
<body>
    <canvas id="main" width="288" height="512"></canvas>
    <img id="bird" src="img/bird.png">
    <img id="bg" src="img/bg.png">
    <img id="fg" src="img/fg.png">
    <img id="pipeUp" src="img/pipeUp.png">
    <img id="pipeDown" src="img/pipeDown.png">
    
    <script src="js/main.js"></script>
</body>
</html>

@Splaisto · 06.05.2024, 14:25

Сообщение от Xrty

как перевести js код на React

а что вообще это значит? дробить на компоненты тут нечего, jsx ни к чему, жизненный цикл мимо. что вообще надо? подключить реакт, что б был реакт?

@Xrty · 06.05.2024, 14:37 **[ТС]**

Здравствуйте, да, нужно, чтобы был реакт. Хотя бы настолько насколько это возможно в моём случае, я понимаю, что больших изменений здесь и не будет

krvsa · 07.05.2024, 09:51

Сообщение от Xrty

Не могу понять смысл реакта
...
я понимаю, что больших изменений здесь и не будет

Видно ты действительно совсем не понимаешь смысл Реакта...

Это будет совсем другая программа.
Она будет формировать html и управлять его формированием.

Если еще ты свою страничку не "собираешь" каким-то "сборщиком" - то ни о каком jsx речи не идет. Только хардкор с функцией e().

https://ru.legacy.reactjs.org/... bsite.html

@vxg · 07.05.2024, 10:38

krvsa, если "мне только посмотреть", то можно без сборщика

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height">
    <script crossorigin src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
    <style>
        .p8 {
            padding: 8px;
        }
 
        .v8 {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
 
        .h8 {
            display: flex;
            gap: 8px;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="root">
    </div>
<script type="text/babel">
 
const {Fragment, useState} = React;
const {createRoot} = ReactDOM;
const {CssBaseline, Button} = MaterialUI;
 
const Root = () => {
    const [count, setCount] = useState(0);
    return (
        <Fragment>
            <CssBaseline />
            <div className="p8 v8">
                <div>Hello, {count}</div>
                <div className="h8">
                    <Button
                        variant="contained"
                        onClick={() => setCount(count - 1)}
                    >
                        -1
                    </Button>
                    <Button
                        variant="contained"
                        onClick={() => setCount(count + 1)}
                    >
                        +1
                    </Button>
                </div>
            </div>
        </Fragment>
    );
};
 
const root = createRoot(document.getElementById("root"));
 
root.render(<Root />);
 
</script>
</body>
</html>

но там по коду не очень в духе реакт - холст и на нем рисование. это скорее всего будет классовый компонент - фактически обертка над тем что и так уже написано. чтобы было чуть ближе к реакт можно отказаться от рисования и сами DOM-картинки двигать читая их позиции из состояния.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@vxg Модератор 3409 / 2180 / 354 Регистрация: 13.01.2012 Сообщений: 8,450
	06.05.2024, 09:15
	Xrty, где HTML ко всей этой "красоте" чтобы потенциальный помощник мог хоть увидеть что должно получиться? судя по всему там должен быть какой то фон и какая то картинка-персонаж которая возможно должна перемещаться 1

@Xrty 0 / 0 / 0 Регистрация: 30.03.2023 Сообщений: 5
	06.05.2024, 14:37 [ТС]
	Здравствуйте, да, нужно, чтобы был реакт. Хотя бы настолько насколько это возможно в моём случае, я понимаю, что больших изменений здесь и не будет 0