3 / 3 / 0
Регистрация: 08.06.2013
Сообщений: 212
1

Игра-арканоид в канвасе на React. Почему скорость мяча меняется в зависимости от состояния платформы?

31.05.2023, 14:33. Показов 795. Ответов 4

Author24 — интернет-сервис помощи студентам
Если платформа неподвижна, мячик двигается медленно (со скоростью, меньшей скорости платформы).
Если платформа двигается, скорость мяча возрастает и становится равной скорости платформы.
По условиям задачи скорости мяча и платформы должны быть всегда равны.
В чём подвох?
Вот код:
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
export interface Brick {
    color: string,
    width: number,
    height: number,
    x: number,
    y: number,
}
 
export interface Ball {
    x: number,
    y: number,
    width: number,
    height: number,
    dirX: SPEED,
    dirY: SPEED,
    speed: SPEED
}
 
export interface Platform {
    x: number,
    y: number,
    width: number,
    height: number,
    dir: SPEED
}
 
const createRowOfBricks = (color: string) => {
    let row = Array<string>(BRICK_ROW_LEN)
    row.fill(color)
    return row
}
 
const createBricks = () => {
    let level1 = Array<Array<string>>()
    for (let c of Object.keys(Colors).filter(v => Number.isNaN(parseInt(v))) ){
        level1.push(createRowOfBricks(c))
        level1.push(createRowOfBricks(c))
    }
 
    let currBricks: Brick[] = []
    for (let row = 0; row < level1.length; row ++) {
        for (let col = 0; col < level1[row].length; col ++) {
            currBricks.push({
                color: level1[row][col],
                width: BRICK_DIMENSION,
                height: BRICK_DIMENSION,
                x: BRICKS_X + (GAP_BTW_BRICKS + BRICK_DIMENSION) * col,
                y: BRICKS_Y + (GAP_BTW_BRICKS + BRICK_DIMENSION) * row
            })
        }
    }
    return currBricks
}
 
export const Arkanoid = React.memo(() => {
 
    const [ball,setBall] = useState({
        dirX: 0 as SPEED,
        x: ( CANVAS_WIDTH - BRICK_DIMENSION ) / 2,
        y: CANVAS_HEIGHT - BRICK_DIMENSION * 2,
        dirY: 0 as SPEED,
        width: BRICK_DIMENSION,
        height: BRICK_DIMENSION,
        speed: 1 as SPEED,
    })
    const [result, setResult] = useState<Array<boolean | string>>([false, ''])
    const [context,setContext] = useState<CanvasRenderingContext2D>()
    const [platform,setPlatform] = useState({
        dir: 0 as SPEED,
        x: ( CANVAS_WIDTH - PLATFORM_WIDTH ) / 2,
        y: CANVAS_HEIGHT - BRICK_DIMENSION,
        width: PLATFORM_WIDTH,
        height: BRICK_DIMENSION,
    })
    const [bricks,setBricks] = useState(createBricks())
    const [started, setStarted] = useState(false)
 
    useEffect(() => {
        if (ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH) {
            if (platform.dir || ! started) {
                setBall({
                    ...ball,
                    dirX: platform.dir
                })
            }
        }
    }, [ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH, platform.dir, started])
 
    useEffect(() => {
        if (ball.dirY) {
            setStarted(true)
        }
    }, [! ball.dirY])
 
    const onMount = () => {
        const callBack = (speed: SPEED) => (pr: Platform) => ({
            ...pr,
            dir: speed as SPEED
        })
        document.addEventListener('keydown', e => {
            switch (e.code) {
                case ARROW_LEFT:
                    //setPlatform(callBack(-1))
                    setPlatform(pr => ({
                        ...pr,
                        dir: -1 as SPEED
                    }))
                    break
                case ARROW_RIGHT:
                    //setPlatform(callBack(1))
                    break
                case SPACE:
                    setBall(pr => ({
                        ...pr,
                        dirY: -pr.speed as SPEED,
                        dirX: pr.speed
                    }))
                    break
                default:
                    console.log('unknown command')
            }
        })
        document.addEventListener('keyup', e => {
            switch (true) {
                case e.code === ARROW_LEFT || e.code === ARROW_RIGHT:
                    setPlatform(pr => ({
                        ...pr,
                        dir: 0 as SPEED
                    }))
                    break
                default:
                    console.log('unknown command')
            }
        })
    }
 
    useEffect(() => {
        onMount()
    }, [])
 
    const collided = (o1: Ball, o2: Brick) => {
        const x1 = [o1.x, o1.x + o1.width]
        const x2 = [o2.x, o2.x + o2.width]
        const smallFuncX = (i: number) => x2[i] > x1[0] && x2[i] < x1[1]
        const byOx = smallFuncX(0) || smallFuncX(1)
        const y1 = [o1.y, o1.y + o1.height]
        const y2 = [o2.y, o2.y + o2.height]
        const smallFuncY = (i: number) => y2[i] > y1[0] && y2[i] < y1[1]
        const byOy = smallFuncY(0) || smallFuncY(1)
 
        return byOx && byOy
    }
 
    const gameIteration = () => {
        if (context) {
            context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
 
            //moving platform
            setPlatform(pr => ({
                ...pr,
                x: pr.x + pr.dir
            }))
            if (platform.x < 0) {
                setPlatform(pr => ({
                    ...pr,
                    x: 0,
                    dir: -pr.dir as SPEED
                }))
            } else if (platform.x + PLATFORM_WIDTH > CANVAS_WIDTH) {
                setPlatform(pr => ({
                    ...pr,
                    x: CANVAS_WIDTH - PLATFORM_WIDTH,
                    dir: -pr.dir as SPEED
                }))
            }
 
            //moving the ball
            setBall(pr => ({
                ...pr,
                x: pr.x + pr.dirX,
                y: pr.y + pr.dirY
            }))
            if (ball.x <= 0) {
                setBall(pr => ({
                    ...pr,
                    dirX: 1
                }))
            } else if (ball.x + BRICK_DIMENSION >= CANVAS_WIDTH) {
                setBall(pr => ({
                    ...pr,
                    dirX: -1
                }))
            }
            if (ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH) {
                if (ball.dirY) {
                    setBall(pr => ({
                        ...pr,
                        dirY: -1
                    }))
                }
            } else if (ball.y <= 0) {
                setBall(pr => ({
                    ...pr,
                    dirY: 1,
                    y: 1
                }))
            } else if (ball.y > CANVAS_HEIGHT - BRICK_DIMENSION) {
                setResult([true, LOSS_TEXT])
            }
 
            //removing the bricks
            setBricks(bricks.filter(b => ! collided(ball, b)))
 
            //tracing the platform
            context.fillStyle = 'blanchedalmond'
            context.shadowOffsetX = -1
            context.shadowOffsetY = -1
            context.shadowBlur = 3
            context.shadowColor = 'lightblue'
            context.fillRect(platform.x, platform.y, platform.width, platform.height)
 
            //tracing the bricks
            bricks.forEach(b => {
                context.fillStyle = b.color
                context.fillRect(b.x, b.y, b.width, b.height)
            })
 
            if (! bricks.length) {
                context.fillStyle = 'blue'
                context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
                setResult([true, VICTORY_TEXT])
            }
 
            //drawing the ball
            let sm = new Image();
            sm.src = BALL;
            context.shadowColor = 'yellow'
            context.shadowOffsetX = -1
            context.shadowOffsetY = -1
            context?.drawImage(sm, ball.x, ball.y, ball.width, ball.height);
        }
    }
 
    requestAnimationFrame(gameIteration)
 
    return <div className={'mainContainer'}>
        <Button id='start' onClick={у => {
            const canvas: any = document.getElementById('canvas')
            document.getElementById('start')?.setAttribute('disabled', 'true')
            setContext(canvas.getContext("2d"));
        }}>начать игру</Button>
        <Modal
            className={`mod ${result[1] === LOSS_TEXT && 'modLost'}`}
            centered
            show={result[0] as boolean}
            onHide={
                () => setResult(Object.assign([], false, result[1]))
            }
            backdrop="static"
            keyboard={false}
        >
            <Modal.Body className={'modalBody'}>
                <Modal.Title>{result[1]}</Modal.Title>
            </Modal.Body>
            <Modal.Footer className = 'modalFooter'>
                <Button variant="light" onClick={() => window.location.reload()}>ok</Button>
            </Modal.Footer>
        </Modal>
        <canvas id={'canvas'} width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
        </canvas>
    </div>
})
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.05.2023, 14:33
Ответы с готовыми решениями:

Арканоид. Переменные направления мяча
Ребята, помогите разобраться с переменными направления мяча.Сижу над игрой уже долго . Где то...

Пишу игру-арканоид на канвасе js. Когда мячик сбил все кирпичи, надо вывести сообщение "YOU WON!'
Алерт срабатывает раньше времени, когда bricks.length = 1. Но если заключить его в setTimeout, всё...

[Арканоид] Как вычислить скорость по X и Y имея угол направления шара и скорость движения?
Пишу арканоид(C++, SDL). Нашол формулу для определения угла с каким надо отразить шар от ракетки, в...

Почему значение ячейки меняется в зависимости от масштаба просмотра листа?
Здравствуйте! Столкнулся с тем, что код значение ячейки, читаемое через метод .Text для объекта...

В игре 'Арканоид' мяч отталкивается от пустого места на линии платформы
Добрый день! В игре 'Арканоид' мяч отталкивается от пустого места на линии платформы. Помогите...

4
74 / 53 / 24
Регистрация: 10.06.2015
Сообщений: 162
31.05.2023, 21:42 2
Не понятно почему в обработчике для клавиши ARROW_RIGHT нет вызова setPlatform? Пока что только это приходит на ум

Javascript
1
2
3
4
5
6
case ARROW_LEFT:
  setPlatform(pr => ({
    ...pr,
    dir: -1 as SPEED
  }))
  break
Javascript
1
2
3
4
5
6
case ARROW_RIGHT:
  setPlatform(pr => ({
    ...pr,
    dir: 1 as SPEED
  }))
  break
1
3 / 3 / 0
Регистрация: 08.06.2013
Сообщений: 212
01.06.2023, 12:54  [ТС] 3
А, это я просто эксперементировала и забыла вернуть, как было.
0
74 / 53 / 24
Регистрация: 10.06.2015
Сообщений: 162
01.06.2023, 16:05 4
Возможно вам стоит обновлять состояние мяча в функции gameIteration, а не в useEffect?
1
3 / 3 / 0
Регистрация: 08.06.2013
Сообщений: 212
01.06.2023, 16:29  [ТС] 5
Это? Закомментила, однако ситуации это не помогло
Javascript
1
2
3
4
5
6
7
8
9
10
useEffect(() => {
        if (ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH) {
            if (platform.dir || ! started) {
                setBall({
                    ...ball,
                    dirX: platform.dir
                })
            }
        }
    }, [ball.y >= CANVAS_HEIGHT - BRICK_DIMENSION * 2 && ball.x >= platform.x && ball.x <= platform.x + PLATFORM_WIDTH, platform.dir, started])
0
01.06.2023, 16:29
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.06.2023, 16:29
Помогаю со студенческими работами здесь

Скорость мяча
Помогите, нужно поменять скорость мяча в проекте, через бегунок

Игра Арканоид
1. Нужен рабочий исходник игры Арканоид. (Внизу платформа отбиваешь шарик а шарик разбивает блоки)...

Игра Арканоид!!!
помогите с игрой!!!! вот что я написал: unit Unit1; interface uses Windows, Messages,...

игра Арканоид!
всем привет! пожалуйста напишите игру &quot;Арканоид&quot; на С++! это очень срочно! за ранее спасибо!!!

Игра Арканоид
Добрый день! Создал(По видео уроку) игру Арканоид на c# Visual Basic, Не могу додумать как...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru