Tag: canvas

Mouse event бутон в canvas.

Mouse event бутон в canvas.

В този урок ще ви покажа как да намерите точните координати на бутон в canvas елемент, който е вложен в един или повече елементи така, че на каквато и резолюция да отворите вашия сайт да знаете къде се намира той. За целта ще ползваме следната HTML структура

click on canvas to view coordinates

а css кода ще запишем

 

Този код представлява два дива центрирани в браузъра спрямо резолюцията и канваса. В канваса ще изчертаем следната картинка

button

Сега е време да започнем с JavaScript кода.

1. Първо ще направим няколко променливи които ще ни трябват

2. Ще направим клас който ще взима координатите на нашия бутон – X left, X right, y Top и y Bottom. За да ги намерим можем да ползваме photoshop и да извадим 4 гайда и да намерим тези позиции. На картинката по долу се вижда какви са текущите X left, X right, y Top и y Bottom на бутона.

fotoshop

а самия клас ще представлява това

Класа Button има и един метод, който да проверява координатите къде е кликнато и ако е в полето на координатите на бутона да връща true.

3. Ще направим една функция която да чертае нашата картинка в канваса.

В предишния урок съм обяснил подробно как работи drawImage. Можете да го прочетете от тук

4. Следва да направим една функция, която да връща текущите ни координати на канваса независимо от резолюцията на екрана.

В случайя obj.offsetLeft ни връща текущата позиция на елемента спрямо неговия родител. Затова трябва да ползваме такава функция с цикъл който да събира в curleft и curtop офсета на всички родители на канваса.

5. Почти накрая остана да направим mouse event – а, който да проверява клика ни върху канваса на какви X и Y координати се намират

canvasPosition ще направи инстанция към функцията findPos, която ще ни върне масив с позициите. След това ще кажем, че mouseX e равно на кликнатото място в канваса минус offsetLeft на канваса. Същото важи и да mouseY. Така ще получим точните координати за да можем после да проверим метода на класа Button дали ще ни върне true и ако е така значи сме кликнали в координатите на бутона.

5. Сега остава само да сложим два addEventListener – а за да изчертаем първоначално картинката в канваса и за кликването с мишката върху канваса

Демо на урока можете да видите тук

Game Asteroid armagedon

Game Asteroid armagedon

asteroid_armagedon_big

Няма какво да се лъжем. Имам голямо влечение към игрите, а в момента особено към игри писани с HTML5. Напоследък доста се упражнявам точно в Game програмирането и най-накрая взе, че излезе нещо. Развих JavaScrip OOP до такова ниво, че да мога да направя обекти за всяка една част от сцената с, която трябва да се случи нещо. Може би претрупах малко нивата, защото бързах да я пусна, но за следващата игра ще отделя повече време и ще изпипам нещата още по добре. В крайна сметка направих 10 нива после се превърта. Астероидите са рандом идващи. Има и бонусчета за скорост на самолета, едно оръжие, точки, безсмъртие и живот. Ами това е накратко  надявам се да ви хареса 🙂

Пуснете играта от тук 

Как да направим движеща се background картинка в canvas?

Как да направим движеща се background картинка в canvas?

В този кратък урок ще ви покажа как да раздвижите картинка, която ползвате за заден фон в canvas и така да създадете усещане за движение. За този случай, аз ще ползвам следната картинка с размери 1920×350

tut1

Canvas елемента ще ми бъде с размери 650х350.

1. В HTML файла напишете canvas – а

2. Във вашия JavaScript файл направете променлива, която да вземе id-то на canvas – а и създайте обект за картинката, която ще ползвате. Задайте и пътя до картинката.

3. Следва да си направим една променлива, която да отговаря за нашите фреймове в анимациите.

window.requestAnimationFrame ще възпроизведе възможно най-плавната анимация за секунда време. Поддържа от повечето нови браузъри, но за всеки случай напишете за всеки браузър prefix – а.В случай, че някой браузър въобще не поддържа requestAnimationFrame, тогава анимацията ще се изпълни със setTimeout и 60 фрейма в секунда.

4. Следва да направим един клас, който да чертае картинката. Той ще има пропъртита за картинката като позиции в канваса и размери. Също така ще ни е нужен и един метод за изчертаването на картинката в канваса.

5. След това ще създадем 2 обекта, които ще са инстанция на класа LeyarBackground и ще ги позиционираме един след друг по дължина.

Може да ви се сторят малко объркващи всичките тези числа, но един път като схванете кое какво прави лесно ще се ориентирате.

Ето, всъщност накратко кое какво прави

За по-подробна информация прочетете тук – http://docs.webplatform.org/wiki/concepts/programming/drawing_images_onto_canvas

6. Сега ни трябват вече няколко функции, с които да задвижим всичко това

Ще обясня от долу на горе. Най-напред ще сложим един addEventListener на window обекта, с който да задвижим нещата и да почнем да изпълняваме функцията loop, която ще върти нашата анимация като се извиква непрекъснато с requestAnimFrame.
Преди всеки следващ фрейм трябва да чистим сцената, за да се показват единствено новите позиции на обектите.
Ако не ги чистим с всяка една нова итерация ще виждаме всичко, което е изчертано от предишния фрейм. За да направим това ни трябва следния код.

0, 0 са x и y координатите от къде да започва изчистването, 650 и 350 са width и height колко да е изчисти на сцената. в случая искаме цялата сцена.

След това идва частта, в която искаме да движим двата background обекта с функцията moveBackgound.
След като имаме следните стартови позиции на leyar_1Backgound1(dx = 0) и leyar_1Backgound2(dx = 1920) се получава следното. Двата се движат еднакво наляво със скорост 1px

и тук вече имаме 2 условия, в които казваме, че ако leyar_1Backgound1.dx стигне -1920 тръгвайки от 0 то нека се върне на dx позицията, която беше стартова за втория background която е 1920. И след това понеже вървят един след друг втория background ще стигне и той – 1920px и тогава и той да се върне на изходна позиция 1920.

И накрая викаме метода draw на класа LeyarBackground, за да изчертаем картинките.

По този начин можете да повтаряте движението постоянно и да създаде усещане за движение.

Демо на урока можете да видите тук