Игра кликер, проблемы быстродействия

@alp7 · Регистрация: 02.09.2017

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

Делаю простую игру через canvas.
Создал конструктор класса и создаю экземпляры классы через puch каждую секунду.
Суть игры плывут шарики, их надо лопать.
Сделал снятие координат клика мыши в Update
Работает, но с жуткой задержкой через пару секунд.
И еще не пойму как удалить только данный экземпляр класса.

JavaScript
1
2
3
4
5
6
7
8
9
10
for(var i = 0; i < objects.length; i++) {
        hit = player.Collide(objects[i]);
        if(hit)
        {
            alert("Crash!");
            Stop();
            player.dead = true;
            break;
        }
    }

Добавлено через 15 минут
вот сама коллизия, хх уу - координаты клика мыши

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
Collide(sh)
    {
        var hit = false;
        if(yy < sh.y + sh.image.height && yy > sh.y) 
        {
            if(xx > sh.x && xx < sh.x + sh.image.width) 
            {               
hit = true;
            }
        }
        return hit; 
}   
}

Добавлено через 1 час 57 минут
нашел как удалить
objects.splice(i, 1);
вроде работает...
Но быстродействие не очень.

@8Observer8 · 17.12.2022, 17:08

Сложно угадать почему тормозит без кода. Хорошо бы, чтобы вы воспроизвели проблему в песочнице, например, в Plunker, CodePen или любой другой. Как правило, когда с нуля пытаешься сделать минимальный пример (без всего лишнего), то сам находишь проблему.

Возможно проблема заключается в алгоритме определения попал ли курсор мыши по шарику. У меня есть игровая демка Minesweeper (Сапёр) в этом сообщении. Я использую в ней библиотеку Planck.js, которая является портом физического движка Box2D на JS. В этой библиотеке есть метод определения попадания точки в объект любой формы. Этот метод оптимизирован, проверяет только ближайшие объекты. Универсальный метод. Я его специально выбрал даже для Сапёра, где можно было обойтись условиями if, чтобы продемонстрировать его применение. Planck.js можно подключить через jsdelivr или skypack. Я подключаю через skypack в виде ES6-модуля:

Песочница: https://plnkr.co/edit/nFHRxUFhcKhL4Jpd

PHP/HTML
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
<!DOCTYPE html>
 
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
 
    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
                "planck-js": "https://cdn.skypack.dev/planck-js@0.3.29"
            }
        }
    </script>
 
    <script type="module">
        import { mat4, vec3 } from "gl-matrix";
        import * as pl from "planck-js";
 
        const gravity = pl.Vec2(0, 0);
        const world = pl.World(gravity);
 
        const output = document.createElement("div");
        output.innerText = `gravity = ${world.getGravity()}`;
        document.body.appendChild(output);
    </script>
</body>
 
</html>

@alp7 · 17.12.2022, 17:17 **[ТС]**

Спасибо, пока обошелся "костылем". Почему то срабатывает за объектом по ходу движения. отнял высоту объекта от координат мыши, работает более - менее. сам ошибся, пока так, потом переделаю.

@8Observer8 · 17.12.2022, 17:45

Ещё один способ знаю - определение клика по цветовому id. Узнал о нём в книге WebGL. Программирование трехмерной графики. Если кратко, то при клике в фрагментный шейдер передаётся флаг uClick = true и заранее заданный цвет (например, красный (1, 0, 0) или зелёный (0, 1, 0). Вдруг перейдёте в будущем на контекст рисования "webgl" или "webgl2" вместо "2d" на элементе <canvas>. Лично мне намного интереснее использовать WebGL вместо Canvas API, так как больше возможностей и многие проблемы решаются проще и прозрачнее после некоторой практики и поиска примеров интернете и книгах.

glSlang
1
2
3
4
5
6
7
8
9
10
11
12
13
precision mediump float;
uniform sampler2D uSampler;
uniform bool uClick;
uniform vec3 uPickColor;
varying vec2 vTexCoord;
 
void main() {
    if (!uClick) {
        gl_FragColor = texture2D(uSampler, vTexCoord);
    } else {
        gl_FragColor = vec4(uPickColor, 1.0);
    }
}

После вызова drawArrays/drawElements объект рисуется этим цветом. Вызывается gl.readPixels для определения цвета пикселя в месте клика. Если цвет считанного пикселя равен заданному цвету, то был клик по объекту. Для каждого объекта задаётся свой цвет. Потом объекты рисуются со своими спрайтами и пользователь не замечает, что объекты рисовались цветом.

Есть пример:

Демка в песочнице: https://plnkr.co/edit/G0EwrPY4yEoJLeqK

index.html

PHP/HTML
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
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
 
<body>
 
    <head>
        <title>Pick textured object by click. WebGL, JavaScript</title>
 
        <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
 
        <style>
            #renderCanvas {
                position: absolute;
            }
 
            #outputEN {
                position: absolute;
                top: 210px;
                left: 20px;
            }
 
            #outputRU {
                position: absolute;
                top: 235px;
                left: 20px;
            }
 
            #outputCH {
                position: absolute;
                top: 260px;
                left: 20px;
            }
 
            #outputPinyin {
                position: absolute;
                top: 285px;
                left: 20px;
            }
        </style>
    </head>
 
    <body>
        <div>
            <canvas id="renderCanvas" width="300" height="300"></canvas>
            <span id="outputEN">Click on any object or outside</span>
            <span id="outputRU">Кликните на любой объект или мимо</span>
            <span id="outputCH">单击任何对象或外部</span>
            <span id="outputPinyin">Dān jí rènhé duìxiàng huò wàibù</span>
        </div>
 
        <script id="vertexShader" type="x-shader/x-vertex">
            attribute vec2 aPosition;
            attribute vec2 aTexCoord;
            uniform mat4 uMvpMatrix;
            varying vec2 vTexCoord;
            
            void main() {
                gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
                vTexCoord = aTexCoord;
            }
        </script>
 
        <script id="fragmentShader" type="x-shader/x-fragment">
            precision mediump float;
            uniform sampler2D uSampler;
            uniform bool uClick;
            uniform vec3 uPickColor;
            varying vec2 vTexCoord;
 
            void main() {
                if (!uClick) {
                    gl_FragColor = texture2D(uSampler, vTexCoord);
                } else {
                    gl_FragColor = vec4(uPickColor, 1.0);
                }
            }
        </script>
 
        <script>
            const gl = document.getElementById("renderCanvas").getContext("webgl");
 
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
            const outputEN = document.getElementById("outputEN");
            const outputRU = document.getElementById("outputRU");
 
            const vShader = gl.createShader(gl.VERTEX_SHADER);
            const vSrc = document.getElementById("vertexShader").firstChild.textContent;
            gl.shaderSource(vShader, vSrc);
            gl.compileShader(vShader);
            let ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
            if (!ok) {
                console.log("vert: " + gl.getShaderInfoLog(vShader));
            };
 
            const fShader = gl.createShader(gl.FRAGMENT_SHADER);
            const fSrc = document.getElementById("fragmentShader").firstChild.textContent;
            gl.shaderSource(fShader, fSrc);
            gl.compileShader(fShader);
            ok = gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
            if (!ok) {
                console.log("frag: " + gl.getShaderInfoLog(fShader));
            };
 
            const program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            ok = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!ok) {
                console.log("link: " + gl.getProgramInfoLog(program));
            };
            gl.useProgram(program);
 
            const vertPositions = [
                -0.5, -0.5,
                -0.5, 0.5,
                0.5, -0.5,
                0.5, 0.5
            ];
            const vertPosBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions), gl.STATIC_DRAW);
            const aPositionLocation = gl.getAttribLocation(program, "aPosition");
            gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPositionLocation);
 
            const texCoords = [
                0, 0,
                0, 1,
                1, 0,
                1, 1
            ];
            const texCoordBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);
            const aTexCoordLocation = gl.getAttribLocation(program, "aTexCoord");
            gl.vertexAttribPointer(aTexCoordLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aTexCoordLocation);
 
            // const blackMugImg = document.getElementById("blackMugImg");
            const blackMugImg = new Image();
            let blackMugTexture = null;
            blackMugImg.onload = () => {
                blackMugTexture = gl.createTexture();
                gl.bindTexture(gl.TEXTURE_2D, blackMugTexture);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, blackMugImg);
                draw();
            };
            blackMugImg.src = "img/mug-black.png";
 
            // const greenMugImg = document.getElementById("greenMugImg");
            const greenMugImg = new Image();
            let greenMugTexture = null;
            greenMugImg.onload = () => {
                greenMugTexture = gl.createTexture();
                gl.bindTexture(gl.TEXTURE_2D, greenMugTexture);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, greenMugImg);
                draw();
            };
            greenMugImg.src = "img/mug-green.png";
 
            // const orangeMugImg = document.getElementById("orangeMugImg");
            const orangeMugImg = new Image();
            let orangeMugTexture = null;
            orangeMugImg.onload = () => {
                orangeMugTexture = gl.createTexture();
                gl.bindTexture(gl.TEXTURE_2D, orangeMugTexture);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, orangeMugImg);
                draw();
            };
            orangeMugImg.src = "img/mug-orange.png";
 
            const modelMatrix = glMatrix.mat4.create();
            const mvpMatrix = glMatrix.mat4.create();
 
            const projMatrix = glMatrix.mat4.create();
            glMatrix.mat4.ortho(projMatrix, -0.5, 2.5, 2.5, -0.5, 10, -10);
 
            const viewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.lookAt(viewMatrix, [0, 0, 10], [0, 0, 0], [0, 1, 0]);
 
            const projViewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.mul(projViewMatrix, projMatrix, viewMatrix);
 
            const uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
            const uColorLocation = gl.getUniformLocation(program, "uColor");
            const uClickLocation = gl.getUniformLocation(program, "uClick");
            const uPickColorLocation = gl.getUniformLocation(program, "uPickColor");
 
            gl.uniform1i(uClickLocation, 0);
 
            const firstObj = {
                pos: glMatrix.vec3.fromValues(0, 0, 0),
                scale: glMatrix.vec3.fromValues(0.7, 0.7, 1),
                color: glMatrix.vec3.fromValues(0.50, 0.84, 0.22)
            };
 
            const secondObj = {
                pos: glMatrix.vec3.fromValues(1, 0, 0),
                scale: glMatrix.vec3.fromValues(0.7, 0.7, 1),
                color: glMatrix.vec3.fromValues(0.07, 0.59, 0.09)
            };
 
            const thirdObj = {
                pos: glMatrix.vec3.fromValues(2, 0, 0),
                scale: glMatrix.vec3.fromValues(0.7, 0.7, 1),
                color: glMatrix.vec3.fromValues(0.12, 0.88, 0.48)
            };
 
            const fourthObj = {
                pos: glMatrix.vec3.fromValues(0, 1, 0),
                scale: glMatrix.vec3.fromValues(0.7, 0.7, 1),
                color: glMatrix.vec3.fromValues(0.65, 0.37, 0.07)
            };
 
            const pickColors = {
                first: glMatrix.vec3.fromValues(255, 0, 0),
                second: glMatrix.vec3.fromValues(0, 255, 0),
                third: glMatrix.vec3.fromValues(0, 0, 255),
                fourth: glMatrix.vec3.fromValues(255, 255, 0)
            };
 
            gl.canvas.onmousedown = (e) => {
                // Get coordinates of mouse pick
                const rect = gl.canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;
                const pickX = mouseX;
                const pickY = rect.bottom - rect.top - mouseY - 1;
                // console.log("mouse pick coords:", pickX, pickY);
 
                // Set the click flag and color id
                gl.uniform1i(uClickLocation, 1);
                gl.clearColor(0, 0, 0, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);
 
                // Draw objects for picking
                gl.uniform3fv(uPickColorLocation, pickColors.first);
                glMatrix.mat4.fromTranslation(modelMatrix, firstObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, firstObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                gl.uniform3fv(uPickColorLocation, pickColors.second);
                glMatrix.mat4.fromTranslation(modelMatrix, secondObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, secondObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                gl.uniform3fv(uPickColorLocation, pickColors.third);
                glMatrix.mat4.fromTranslation(modelMatrix, thirdObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, thirdObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                gl.uniform3fv(uPickColorLocation, pickColors.fourth);
                glMatrix.mat4.fromTranslation(modelMatrix, fourthObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, fourthObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                const pixels = new Uint8Array(4);
                gl.readPixels(pickX, pickY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
                // console.log("pick color:", pixels[0], pixels[1], pixels[2], pixels[3]);
                const pickResult = glMatrix.vec3.fromValues(pixels[0], pixels[1], pixels[2]);
 
                let messageEN = "";
                let messageRU = "";
                let messageCH = "";
                let messagePinyin = "";
                if (glMatrix.vec3.exactEquals(pickResult, pickColors.first)) {
                    messageEN = "First object";
                    messageRU = "Первый объект";
                    messageCH = "第一个对象";
                    messagePinyin = "Dì yī gè duìxiàng";
                } else if (glMatrix.vec3.exactEquals(pickResult, pickColors.second)) {
                    messageEN = "Second object";
                    messageRU = "Второй объект";
                    messageCH = "第二个对象";
                    messagePinyin = "Dì èr gè duìxiàng";
                } else if (glMatrix.vec3.exactEquals(pickResult, pickColors.third)) {
                    messageEN = "Third object";
                    messageRU = "Третий объект";
                    messageCH = "第三个对象";
                    messagePinyin = "Dì sān gè duìxiàng";
                } else if (glMatrix.vec3.exactEquals(pickResult, pickColors.fourth)) {
                    messageEN = "Fourth object";
                    messageRU = "Четвёртый объект";
                    messageCH = "第四个对象";
                    messagePinyin = "Dì sì gè duìxiàng";
                } else {
                    messageEN = "You didn't click on the objects";
                    messageRU = "Вы не кликнули по объектам";
                    messageCH = "你没有点击对象";
                    messagePinyin = "Nǐ méiyǒu diǎnjī duìxiàng";
                }
                console.log(messageEN);
                outputEN.innerText = messageEN;
                outputRU.innerText = messageRU;
                outputCH.innerText = messageCH;
                outputPinyin.innerText = messagePinyin;
 
                gl.uniform1i(uClickLocation, 0);
                draw();
            };
 
            function draw() {
                gl.clearColor(0.9, 0.9, 0.95, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);
 
                if (blackMugTexture === null || greenMugTexture === null || orangeMugTexture === null) {
                    return;
                }
 
                gl.bindTexture(gl.TEXTURE_2D, blackMugTexture);
                glMatrix.mat4.fromTranslation(modelMatrix, firstObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, firstObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.uniform3fv(uColorLocation, firstObj.color);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                gl.bindTexture(gl.TEXTURE_2D, greenMugTexture);
                glMatrix.mat4.fromTranslation(modelMatrix, secondObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, secondObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.uniform3fv(uColorLocation, secondObj.color);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                gl.bindTexture(gl.TEXTURE_2D, orangeMugTexture);
                glMatrix.mat4.fromTranslation(modelMatrix, thirdObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, thirdObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.uniform3fv(uColorLocation, thirdObj.color);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
                gl.bindTexture(gl.TEXTURE_2D, greenMugTexture);
                glMatrix.mat4.fromTranslation(modelMatrix, fourthObj.pos);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, fourthObj.scale);
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.uniform3fv(uColorLocation, fourthObj.color);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
            }
 
            draw();
        </script>
    </body>
 
</body>

@alp7 · 18.12.2022, 18:58 **[ТС]**

Спасибо, вопрос разрешился, оказалось сделал неправильную разметку body. Делаю первую игру на JS.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@alp7 43 / 3 / 3 Регистрация: 02.09.2017 Сообщений: 217
	17.12.2022, 17:17 [ТС]
	Спасибо, пока обошелся "костылем". Почему то срабатывает за объектом по ходу движения. отнял высоту объекта от координат мыши, работает более - менее. сам ошибся, пока так, потом переделаю. 0

@alp7 43 / 3 / 3 Регистрация: 02.09.2017 Сообщений: 217
	18.12.2022, 18:58 [ТС]
	Сообщение было отмечено 8Observer8 как решение Решение Спасибо, вопрос разрешился, оказалось сделал неправильную разметку body. Делаю первую игру на JS. 1

Игра кликер, проблемы быстродействия

Решение