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

@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
    ]);
 
    /* ... */
}

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .