Download "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: Основы Программирования - #10 - События Next video: #1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Создаем игровое поле)

0:00

Введение

0:17

Смещаем дерево по оси X

7:30

Возобновление игры

8:15

Оптимизируем получение координат

#1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Создаем игровое поле)

#1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Создаем игровое поле)

Channel: Какие-то уроки

Основы Программирования - #10 - События

Основы Программирования - #10 - События

Channel: loftblog

Начальный курс SQL.Группировка данных GROUP BY

Начальный курс SQL.Группировка данных GROUP BY

Channel: Igor Vovchenko

Как стать Full Stack веб разработчиком? ► Самый Верный Путь!

Как стать Full Stack веб разработчиком? ► Самый Верный Путь!

Channel: Хауди Хо™ - Просто о мире IT!

#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)

#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)

Channel: Какие-то уроки

Уроки

lesson

lessons

Для новичков

Для начинающих

Создать сайт

css

css3

Курсы по css

Уроки по css

Создать сайт html css

html

html5

javascript

js

it

программирование

практика

игра

requestAnimationFrame

cancelAnimationFrame

00:00:01

to develop our game and today we

00:00:03

need to animate all our trees and

00:00:05

make them spin

00:00:07

endlessly, that is, when the tree

00:00:09

is hidden outside the screen then it

00:00:11

should be drawn from above, and so

00:00:13

not only this tree should move, but

00:00:15

basically all the trees too before that,

00:00:18

let's fix our tank, that is, a

00:00:21

small error and also do

00:00:23

a little optimization. Now the problem is

00:00:25

that if we run

00:00:27

our game, then our tree moves

00:00:30

in the center, although we gave it

00:00:32

coordinates along the x axis so that this tree is

00:00:34

shifted somewhere but the problem

00:00:37

is that when we indicated

00:00:39

the coordinates to our tree, we gave it

00:00:42

these coordinates through translate and y and

00:00:44

does it have a transform property, that

00:00:46

is, we didn’t just change it, we

00:00:48

overwrote the old values, if we

00:00:51

now open the element panel, we will find our

00:00:54

blog like we just need more space, so

00:00:58

here’s our tree, if we look at it now,

00:01:00

we’ll see that it has the old

00:01:03

value, she signed up for Perry, but Perry also

00:01:06

signed up for ours, this

00:01:08

translate y, that is, now we should

00:01:09

get not only the y-coordinate but and

00:01:12

x-coordinate let's see how we

00:01:14

can do this, for this we

00:01:16

will use our same

00:01:19

get y court function, let's turn off our entire animation for now

00:01:22

and let's try again to

00:01:26

get the coordinate of our tree so that, in

00:01:29

principle, it is just one

00:01:30

number so that we can it’s more convenient

00:01:33

to work with this console varnish we call our where are

00:01:36

you greg court for our first tree

00:01:38

we update the page now we need to

00:01:40

get the coordinate along the y axis you and I

00:01:43

need to make sure that this function

00:01:45

returns not only the y coordinate but also, in

00:01:48

principle, the x coordinate so let’s give

00:01:51

it Let's rename it to get the court, that is,

00:01:53

get the coordinates.

00:01:55

Well, where can we get our x coordinate?

00:02:08

we pass some element and

00:02:10

pull out the transform property from it, and

00:02:13

the transform is presented in the form of a matrix

00:02:15

like this, this is just one of the

00:02:18

sessions for the value of the transform properties, I

00:02:20

talked about it, but it is very rarely

00:02:22

used because, well, it’s not the most

00:02:24

convenient, so how do you You may notice that we

00:02:26

took the last value, these are

00:02:29

just our y coordinates, and we

00:02:31

additionally need to pull out the

00:02:33

penultimate value, this is our

00:02:35

x coordinate, but if we look in

00:02:37

our css, we see that

00:02:41

minus 220 pixels is the x coordinate,

00:02:44

well, that is everything converges to220 and there is 220

00:02:48

and so how do we get the penultimate

00:02:50

value here we split our

00:02:53

matrix by commas we got a certain array

00:02:56

let’s look at this array

00:02:59

again through the console, refresh

00:03:02

the page and now we see what

00:03:03

our array looks like you and I we took the last

00:03:06

value and we need to take the penultimate element,

00:03:09

and to get the last element we

00:03:11

wrote array length -1 to

00:03:14

get the penultimate array length -2

00:03:17

to get the penultimate

00:03:20

array length -3 but in principle and so on,

00:03:22

let's rename it with you in x and

00:03:25

y to make it somehow more clear, but

00:03:29

when we convert

00:03:30

these values to numbers, we will

00:03:32

rename this numeric y and,

00:03:36

accordingly, numeric x, that is, the

00:03:39

numerical value of this element, here we

00:03:42

represent x and substitute y here for the

00:03:45

console forehead we, in principle, can delete by

00:03:47

the way, if you don’t remember how

00:03:50

this function works, then I recently released a

00:03:52

video lesson that explains how it

00:03:54

works, if I briefly remind you that this

00:03:56

function converts a string to a number, but

00:03:59

now we need to return our two variables from this function

00:04:03

how can we do this, well, either

00:04:05

using an array like this, we

00:04:08

say that our zero element will be

00:04:10

the y coordinate, the first element will be the x coordinate,

00:04:13

and now if we call this function, we have

00:04:16

the end of the lux, let’s

00:04:18

see what it will return to us and it it

00:04:21

just returns our coordinates to us

00:04:23

and we can get these coordinates with you in

00:04:25

this way, we

00:04:27

say that we will have some kind of pour,

00:04:30

or let’s have a court, that is, the coordinates, and

00:04:33

now if we need to get the

00:04:35

y coordinate, we write cards from 0 but if the

00:04:40

x coordinate of the cards from one and you and I

00:04:44

get these values, well, this

00:04:46

option is not very convenient because we are

00:04:48

faced with the problem that if

00:04:51

we return to this code in a month, then we will

00:04:53

basically forget what 0 is, what a

00:04:55

unit is, this is not very obviously, therefore,

00:04:58

the best solution here would be to return

00:05:01

exactly the object where we indicate that we

00:05:03

have a key x and we take the value from this

00:05:06

variable numeric x, we also have

00:05:09

a key y and the value will be numeric y, and in

00:05:13

this way we must get

00:05:15

the value again let's display

00:05:17

our course, let's see what it looks like,

00:05:19

now we see that this is an object

00:05:21

that has clear keys that

00:05:24

we can access, again, maps from x

00:05:27

court garden y and now when we

00:05:30

return here in a month we will understand

00:05:32

what this means what coordinates we

00:05:35

are trying pull out, so our function is

00:05:37

ready, it now takes out our

00:05:39

coordinates, which we must substitute

00:05:41

in the animation of our tree, so let's

00:05:45

go back here and uncomment all of our

00:05:48

animation, and now we return

00:05:50

the function to animate our trees,

00:05:52

again const cards, that is, our

00:05:56

coordinates, we say that we need to call the

00:05:58

get function court for our first

00:06:01

tree here we got the coordinates and

00:06:03

now we say that the new coordinate

00:06:06

for y is the

00:06:08

value from the variable court from y + speed

00:06:12

here we substitute this value and

00:06:15

we also have the x coordinate which lies

00:06:17

here we must also pass it to

00:06:20

our translate now we will do with

00:06:22

you not translate y but simply translate and

00:06:25

now it needs to pass the value

00:06:27

first along the x axis then along the y axis,

00:06:30

so again we need to glue our line

00:06:32

through this symbol, don’t forget about the

00:06:35

comma and the words pixels and now we need to go here

00:06:39

insert the x coordinate and something like

00:06:42

this should work out for you, let's

00:06:44

once again try to get the coordinates of

00:06:47

our first tree when we

00:06:49

got them, here in the variable court there will be

00:06:52

an object, we can even point here

00:06:55

at sunrise by the way, they will tell you what will

00:06:57

lie here after we try to form a

00:06:59

coordinate y but in the same way as we

00:07:02

did before, from our variable court we

00:07:04

get the current value of the y coordinate,

00:07:07

add our speed to it, we

00:07:10

have formed a y coordinate, which

00:07:12

we substitute here as we substituted

00:07:14

before, but also additionally we must

00:07:17

substitute the x coordinate that we

00:07:19

took all with the same variable court all with the

00:07:22

same object don’t forget to add

00:07:24

a pixel and put a comma and now we

00:07:26

can refresh the page and our tree

00:07:28

moves where it should move

00:07:30

now let’s fix the second problem the

00:07:33

problem with our pause when we

00:07:36

click on it the game stops

00:07:37

when we activate it again we have

00:07:40

nothing going on for this we

00:07:42

will return to our advent listener function

00:07:45

here if we have the game paused then we

00:07:47

stop the animation but when the game

00:07:50

is activated again we must

00:07:52

start our animation again

00:07:54

just copy the values from here to here

00:07:57

it we insert the prize, we say request to the

00:08:00

anime frame so that it starts

00:08:02

our game again, we update the page so that

00:08:05

the game pauses, we click on play,

00:08:07

the game continued well with one

00:08:10

less error, or rather two, and now let's

00:08:14

try to optimize our game,

00:08:16

let me try to tell you what the

00:08:18

problem is here, try to think and

00:08:21

if you succeed, well done, so

00:08:23

the problem now is that

00:08:25

our start game function, as you can

00:08:28

assume, is looped, that is, it is

00:08:30

called, called, called, a

00:08:32

bunch of times, and accordingly,

00:08:35

this function is also called a bunch of times, here we

00:08:38

are trying to calculate the coordinate of

00:08:40

our tree, but accordingly, in order to

00:08:42

calculate, we perform a rather

00:08:44

complex operation with you, we turn to our

00:08:47

Windows object, we say that we need to pull out the

00:08:49

style of a specific element,

00:08:52

get transform, break this transform

00:08:55

into some parts, pull out some

00:08:57

additional elements, that is, this

00:08:59

function of us called a bunch of times, you and I

00:09:01

can even use the consoles and

00:09:03

verify this, we are right now in

00:09:05

this and the error is well, you see, let's go,

00:09:08

these calls went out a bunch of times, she

00:09:10

called up, she just moved from the tree a

00:09:12

couple of pixels down, well, now

00:09:14

imagine you and I will have 6

00:09:16

trees, that is, in one call to this

00:09:19

function, this will be called 6 1, that

00:09:22

is, this is already quite a large load,

00:09:24

we are in this right now and the problem is

00:09:26

pause the video and think about how

00:09:29

this can be fixed,

00:09:32

so I hope that you were able to find a

00:09:34

solution here schematically for our gram

00:09:37

solution is that our

00:09:39

y-coordinates need to be calculated only

00:09:41

once at the very beginning and so we start

00:09:44

our game with you we found out that the

00:09:47

tree is 10 pixels down

00:09:50

10 pixels to the right that is we got the

00:09:52

coordinate 10 and 10, we can all

00:09:54

save this in some variable,

00:09:57

but here when we do the calculations, we

00:09:59

add

00:10:02

our speed toyz 3 to our ten, now our tree

00:10:05

is shifted 3 pixels down and we have

00:10:07

before that you should have a variable

00:10:09

that stored our coordinate, we

00:10:13

had the number 10 there, which you and

00:10:15

I initially received, now we

00:10:17

have shifted the tree, you and I must

00:10:19

rewrite this number to the current

00:10:22

value, that is, now 13 will lie here

00:10:23

and, in principle, that’s it now a

00:10:27

new call to our function 3 Sani Mishin begins,

00:10:29

we no longer need to get the coordinates of

00:10:31

our tree, we already know that it is

00:10:33

moved down 13 pixels, so

00:10:36

now we again substitute 13 our

00:10:38

speed here plus 3 of this 16 and now we

00:10:41

again overwrite our variable

00:10:43

now it will be here lie 16 again our

00:10:45

tree is shifted and so on, that is,

00:10:48

this function is called again, it does not need to

00:10:50

get the coordinates again in such a

00:10:52

complex way, it just takes them from

00:10:54

some variable again and this

00:10:56

variable is updated, the tree is lowered and

00:10:59

so on, let's now try this

00:11:01

implement now you and I will have a

00:11:03

variable called accords

00:11:06

31, that is, the coordinates of our first

00:11:09

tree, we get them using the

00:11:12

get cort functions, we say that we need

00:11:14

the coordinates of our first tree, let's

00:11:17

look at them anyway, why not,

00:11:19

feel free to write a console log just

00:11:22

for everything what do you do in this way you

00:11:24

will be sure that your variable is something that

00:11:27

is that is what you expect we are

00:11:29

now expecting that there are coordinates here

00:11:30

let's make sure and yes we got them that

00:11:33

is while you are learning try to

00:11:35

write the leg console as much as possible everything

00:11:38

we have our a variable that we

00:11:40

can now use, now we don’t

00:11:42

need to get the coordinates every time

00:11:45

we got 1 1 now all we need

00:11:47

to do is take the y coordinate from this

00:11:50

variable, so we calculated the new

00:11:52

y coordinate and now we

00:11:55

need to overwrite the values of this variable here,

00:11:56

so how we can overwrite the value

00:11:59

of the object, you may be

00:12:02

tempted to rename this

00:12:04

variable to years and then do something like this

00:12:06

to say that now we

00:12:09

will have y elements here with this

00:12:13

value and an x element with this

00:12:17

value, in principle this can be done

00:12:20

Well, this is not a very good option

00:12:22

because this way we

00:12:24

write our variable every time we write, we don’t need to

00:12:27

overwrite our entire variable, we only

00:12:29

need to overwrite just one

00:12:31

value, just the value of this X,

00:12:33

not the whole object, but just one specific

00:12:36

value, how can we do this, well

00:12:38

let's try to remember this one, we'll

00:12:40

erase it for now, by the way, we

00:12:44

must also take the x coordinate from this change, and

00:12:46

since we only need to overwrite one

00:12:48

value of our object, we must

00:12:51

say that we are accessing our

00:12:52

object,

00:12:53

accessing its property and cry, and

00:12:56

now we substitute any value,

00:12:58

well, under any value, our variable

00:13:01

new court y, well, now we can update

00:13:04

the page, just return this to

00:13:06

make sure that our game is working, everything

00:13:09

is fine, our tree is still descending,

00:13:11

but now it is much optimized

00:13:13

than before because we called this function

00:13:15

only once, which

00:13:18

you and I can verify by writing the

00:13:20

console log here, again, don’t hesitate to

00:13:23

write them, we all got

00:13:25

the coordinates of our tree once, which means we

00:13:27

got the optimization that we

00:13:30

wanted, but let’s briefly go through

00:13:32

this logic again, we got our the first

00:13:35

tree and immediately took out its coordinates,

00:13:37

launching our game, we animate our

00:13:40

trees, what happens here we take the

00:13:42

current coordinate from our storage,

00:13:45

add our speed to it, that is,

00:13:47

three, we have formed a new coordinate,

00:13:50

now we must throw this new coordinate

00:13:52

into our storage with coordinates

00:13:55

but since we are only changing the y

00:13:56

coordinate, so we are only rewriting the y coordinate,

00:13:59

that is, our y

00:14:01

coordinate was for example 10, here you and

00:14:04

I thought that now it will be 13,

00:14:06

now we are changing 10 to 13, well, and

00:14:09

using our new coordinate court y

00:14:12

then our animation starts again,

00:14:14

now 13 is already here,

00:14:16

we add 3, we have a new coordinate 16, we

00:14:19

again overwrite ours with storage and

00:14:22

change the value in the translate property, but

00:14:25

now let's work with the fact that

00:14:27

when our tree is hidden behind our

00:14:29

screen, it should be displayed here at

00:14:31

the top

00:14:35

[music]

Description:

Поддержать автора: https://www.donationalerts.com/r/kakeitoyroki Исходный код: https://github.com/R1ON/car-game/tree/main/3 ***** Таймкоды: 00:00 Введение 00:17 Смещаем дерево по оси X 07:30 Возобновление игры 08:15 Оптимизируем получение координат ***** Музыка: 1. chill. by sakura Hz https://soundcloud.com/sakurahertz Creative Commons — Attribution 3.0 Unported — CC BY 3.0 http://creativecommons.org/licenses/by/3.0/ Music promoted by Audio Library https://www.youtube.com/watch?v=pF2tXC1pXNo 2. https://www.youtube.com/playlist?list=PLsnJOHsVvrji_YI-PbuT-eYBQHOaapriV

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "#3.1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Исправляем ошибки)"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.