Написать программу для движения персонажа на игровом поле

@pinokkkio · Регистрация: 19.10.2020

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

Двигаем спрайт

Мы напишем программу для движения персонажа на игровом поле, состоящем из клеточек, в ответ на нажатия клавиш. Страница на языке HTML уже готова, называется index.html, и ее изменять не надо. Она загружает файл play.js, содержащий код всех необходимых функций на языке JavaScript. Вы должны добавить туда логику движения персонажа

Страница выглядит вот так. Для изображения игрового поля на ней используется объект Холст (canvas) HTML5 с фиксированными размерами 512 на 320 пикселей. Одна клетка имеет размеры 32x32, то есть поле 16 клеток в ширину и 10 клеток в высоту. Используются два вида изображений - трава для всего поля и спрайт с прозрачным фоном поверх него для персонажа.

Ваши задачи:

Измените функцию init(), так, чтобы персонаж располагался в левом верхнем углу.

Измените функцию init(), так, чтобы все поле заполнялось травой.

Измените функцию moveOnce() так, чтобы по первому щелчку мыши выполнялась анимация сдвига персонажа вниз от угла. Нужно стирать его в углу.

Измените функцию moveOnce() так, чтобы по каждому щелчку мыши строго выше, строго левее, строго ниже, или строго правее поля, выполнялся сдвиг персонажа в соответствующую сторону, кроме случаев, когда он уже уперся в край поля с этой стороны. Используйте глобальные переменные ghostRow, ghostCol, и координаты event.clientX, event.clientY места отпускани кнопки мыши. При щелчке внутри поля или, например левее и выше, ничего делать не нужно.

По образцу обработчика onmouseup напишите обработчик клавиатуры на событие onkeyup, так, чтобы движение персонажа происходило также и по нажатию клавиш со стрелками или A/S/D/W.

Файл:

@8Observer8 · 12.12.2020, 23:27

По-моему, я полностью решил задачу.

Название: move-ghost-for-pinokkkio.gif
Просмотров: 49

Размер: 39.7 Кб

Запустить в песочнице
Скачать исходники: move-ghost-for-pinokkkio.zip (39.3 Кб)

Исходники

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
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset=utf-8>
  <title>js02: Moving sprite</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.3.0/gl-matrix-min.js"></script>
</head>
 
<body>
  <h1>Moving sprite</h1>
 
  <canvas width="512" height="320" id="cnv"></canvas>
 
  <button id="btnStartGame">Start Game</button>
 
  <div id="info">
    Press these keys for moving: A,S,W,D
 
    <p>
      <img id="grass" src="https://www.cyberforum.ru/images/grass.png">
      Grass tile by qubodup, Bart K., Blarumyrran
      <a href="http://opengameart.org">opengameart.org</a>
      <br>
      <img id="ghost" src="https://www.cyberforum.ru/images/ghost.png">
      Ghost sprite from <a href="https://www.construct.net/en/tutorials/cloning-classics-pacman-171">
        Construct 2 - Cloning The Classics: Pacman</a>
    </p>
 
    <input id="msg" disabled value="go!">
  </div>
 
  <script type="x-shader/x-vertex" id="vertexShader">
    attribute vec3 aPosition;
    attribute vec2 aTexCoord;
    uniform mat4 uMpMatrix;
    varying vec2 vTexCoord;
    void main()
    {
      gl_Position = uMpMatrix * vec4(aPosition, 1.0);
      vTexCoord = aTexCoord;
    }
  </script>
 
  <script type="x-shader/x-fragment" id="fragmentShader">
    precision mediump float;
    varying vec2 vTexCoord;
    uniform sampler2D uSampler;
    void main()
    {
      gl_FragColor = texture2D(uSampler, vTexCoord);
    }
  </script>
 
  <script src="js/play.js"></script>
</body>
 
</html>

js/play.js

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
273
274
275
// Get the WebGL context
const gl = document.getElementById("cnv").getContext("webgl");
// Background cell, 32×32, grass
const bg = document.getElementById("grass");
// Character, sprite 32x32. Ghost from the Pacman game
const char = document.getElementById("ghost");
// Coordinates of the character, row and column, counting from zero
let ghostCol = 1, ghostRow = 0, ghostLayer = 1;
// For output of messages
const msg = document.getElementById("msg");
// Get the start Button
const btnStartGame = document.getElementById("btnStartGame");
 
// Shader sources
const vShaderSource = document.getElementById("vertexShader")
    .firstChild.textContent;
const fShaderSource = document.getElementById("fragmentShader")
    .firstChild.textContent;
 
// Textures
let bgTexture, charTexture;
 
// Vertex buffers
let bgVertexTextCoordBuffer, charVertexTextCoordBuffer;
 
// Size of one element in a vertex buffer in bytes
let FSIZE;
 
// Transform matrices
const mpMatrix = glMatrix.mat4.create();
const projMatrix = glMatrix.mat4.create();
const modelMatrix = glMatrix.mat4.create();
 
// Locations
let uMpMatrixLocation;
 
// Draw a beginning state of the game field
function init()
{
    // const style = getComputedStyle(gl.canvas);
 
    setButtonPosition();
    function setButtonPosition()
    {
        const canvasRect = gl.canvas.getBoundingClientRect();
        const buttonRect = btnStartGame.getBoundingClientRect();
        btnStartGame.style.left = `${canvasRect.left + canvasRect.width / 2 - buttonRect.width / 2}px`;
        btnStartGame.style.top = `${canvasRect.top + canvasRect.height / 2 - buttonRect.height / 2}px`;
    }
    window.onresize = () =>
    {
        setButtonPosition();
    };
 
    btnStartGame.onclick = () =>
    {
        btnStartGame.hidden = true;
        startGame();
    };
 
    gl.clearColor(0.2, 0.2, 0.2, 1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
    const program = createShaderProgram();
 
    uMpMatrixLocation = gl.getUniformLocation(program, "uMpMatrix");
    glMatrix.mat4.ortho(projMatrix, 0, 512, 320, 0, -50, 50);
 
    const uSamplerLocation = gl.getUniformLocation(program, "uSampler");
    gl.uniform1i(uSamplerLocation, 0);
 
    initVertexBuffers(program);
    bgTexture = loadTexture(bg);
    charTexture = loadTexture(char);
 
    draw();
 
    // for (let col = 0; col < 16; col++){
    //  board.drawImage(bg, col*32, 0);
    //  if (col === ghostCol) board.drawImage(char, 1*32, 0);
    // }    
};
 
function startGame()
{
    window.onkeydown = (event) =>
    {
        switch (event.key)
        {
            case "w":
            case "ArrowUp":
                if (ghostRow > 0)
                {
                    ghostRow--;
                }
                break;
            case "s":
            case "ArrowDown":
                if (ghostRow < 9)
                {
                    ghostRow++;
                }
                break;
            case "a":
            case "ArrowLeft":
                if (ghostCol > 0)
                {
                    ghostCol--;
                }
                break;
            case "d":
            case "ArrowRight":
                if (ghostCol < 15)
                {
                    ghostCol++;
                }
                break;
        }
        draw();
    };
 
    window.onmousedown = (event) =>
    {
        const cx = event.clientX;
        const cy = event.clientY;
        msg.value = "Click in " + cx + ", " + cy + "!";
        const canvasRect = gl.canvas.getBoundingClientRect();
 
        if (cx < canvasRect.left || canvasRect.right < cx ||
            cy < canvasRect.top || canvasRect.bottom < cy)
        {
            if (cx < canvasRect.left && canvasRect.top + ghostRow * 32 < cy
                && cy < canvasRect.top + ghostRow * 32 + 32)
            {
                if (0 < ghostCol)
                {
                    ghostCol--;
                }
            }
            else if (canvasRect.right < cx && canvasRect.top + ghostRow * 32 < cy
                && cy < canvasRect.top + ghostRow * 32 + 32)
            {
                if (ghostCol < 15)
                {
                    ghostCol++;
                }
            }
            else if (cy < canvasRect.top && canvasRect.left + ghostCol * 32 < cx
                && cx < canvasRect.left + ghostCol * 32 + 32)
            {
                if (0 < ghostRow)
                {
                    ghostRow--;
                }
            }
            else if (canvasRect.top < cy && canvasRect.left + ghostCol * 32 < cx
                && cx < canvasRect.left + ghostCol * 32 + 32)
            {
                if (ghostRow < 9)
                {
                    ghostRow++;
                }
            }
        }
        draw();
    };
}
 
function draw()
{
    drawBackground();
    drawGhost();
}
 
function drawBackground()
{
    glMatrix.mat4.fromScaling(modelMatrix, glMatrix.vec3.fromValues(512, 320, 1));
    glMatrix.mat4.mul(mpMatrix, projMatrix, modelMatrix);
    gl.uniformMatrix4fv(uMpMatrixLocation, false, mpMatrix);
 
    gl.bindBuffer(gl.ARRAY_BUFFER, bgVertexTextCoordBuffer);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 5 * FSIZE, 0);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 5 * FSIZE, 3 * FSIZE);
    gl.enableVertexAttribArray(1);
 
    gl.bindTexture(gl.TEXTURE_2D, bgTexture);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
 
function drawGhost()
{
    glMatrix.mat4.fromScaling(modelMatrix, glMatrix.vec3.fromValues(32, 32, 1));
    glMatrix.mat4.translate(modelMatrix, modelMatrix,
        glMatrix.vec3.fromValues(ghostCol, ghostRow, ghostLayer));
    glMatrix.mat4.mul(mpMatrix, projMatrix, modelMatrix);
    gl.uniformMatrix4fv(uMpMatrixLocation, false, mpMatrix);
 
    gl.bindBuffer(gl.ARRAY_BUFFER, charVertexTextCoordBuffer);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 5 * FSIZE, 0);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 5 * FSIZE, 3 * FSIZE);
    gl.enableVertexAttribArray(1);
 
    gl.bindTexture(gl.TEXTURE_2D, charTexture);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
 
function loadTexture(image)
{
    const texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    return texture;
}
 
function initVertexBuffers(program)
{
    const bgVertPosAndTextCoors = new Float32Array([
        0, 0, 0, 0, 0, // x, y, z, u, v
        0, 1, 0, 0, 10,
        1, 0, 0, 16, 0,
        1, 1, 0, 16, 10
    ]);
 
    bgVertexTextCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bgVertexTextCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, bgVertPosAndTextCoors, gl.STATIC_DRAW);
 
    FSIZE = bgVertPosAndTextCoors.BYTES_PER_ELEMENT;
 
    gl.bindAttribLocation(program, 0, "aPosition");
    gl.bindAttribLocation(program, 1, "aTexCoord");
 
    const charVertPosAndTextCoors = new Float32Array([
        0, 0, 0, 0, 0, // x, y, z, u, v
        0, 1, 0, 0, 1,
        1, 0, 0, 1, 0,
        1, 1, 0, 1, 1
    ]);
 
    charVertexTextCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, charVertexTextCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, charVertPosAndTextCoors, gl.STATIC_DRAW);
}
 
function createShaderProgram()
{
    const vShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vShader, vShaderSource);
    gl.compileShader(vShader);
    const fShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fShader, fShaderSource);
    gl.compileShader(fShader);
    const program = gl.createProgram();
    gl.attachShader(program, vShader);
    gl.attachShader(program, fShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    return program;
}
 
function moveOnce(event)
{
    // board.drawImage(char, 0, 1*32);
    // msg.value = "Click in "+ event.clientX + ", "+ event.clientY +"!";
}
 
window.onload = init;
document.onmouseup = moveOnce;

css/style.css

CSS
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
body {
    font-family: "Segoe UI", "SF Pro Display", sans-serif;
    background-color: white;
    text-align: center;
}
 
p {
    font-size: 12px;
    color: gray;
    text-align: left;
}
 
div#info {
    width: 520px;
    margin: 1em auto;
    color: black;
}
 
canvas {
    border: solid 1px black;
}
 
img {
    vertical-align: middle;
    margin: 7px;
}
 
#btnStartGame {
    font-size: large;
    padding: 20px;
    position: absolute;
}

Пояснение

Я рисую на элементе <canvas> в контексте "webgl":

JavaScript
1
const gl = document.getElementById('cnv').getContext('webgl');

В этом контексте намного проще делать многие вещи, чем в контексте "2d". Если захотите начать осваивать, то лучшая книга с отличным переводом: WebGL. Программирование трехмерной графики | Мацуда Коичи, Ли Роджер Примеры: Небольшие примеры на WebGL

Например, чтобы покрасить поле квадратами 32x32 достаточно настроить текстурные координаты с повторением по числу строк и столбцов (16x10):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function initVertexBuffers(program)
{
    const vertPosAndTextCoors = new Float32Array([
        0, 0, 0, 0, 0, // x, y, z, u, v
        0, 1, 0, 0, 10,
        1, 0, 0, 16, 0,
        1, 1, 0, 16, 10
    ]);
 
    /* ... */
}

Новые блоги и статьи Все статьи Все блоги /
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 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	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. Пошагово создадим проект для загрузки изображения. . .