• Thursday , 28 May 2020

Вращение объектов на JavaScript в canvas. Основы создания игр на JavaScript

Code Canyon



Побочка: https://skanersoft.ru
– – – – – – – – –

Производится перенос материалов со старых ресурсов на сайте http://godot-engine.ru

Там же в файловом архиве вы можете скачать некоторые исходники из ранних уроков.

Производится перенос материалов со старых ресурсов на сайте http://godot-engine.ru

Там же в файловом архиве вы можете скачать некоторые исходники из ранних уроков.

Более подробная информация на сайте http://onjs.ru
Часть проектов и исходники: https://github.com/SkanerSoft
http://nwjs.ru
NW.js IDE – лучшая среда разработки JavaScript Desktop приложений!

https://base-64.ru – онлайн инструменты разработчика. Работа с текстом, онлайн озвучка с разными голосами, кодировка и раскодировка текста и файлов в формате Base64.

https://base-64.ru – онлайн инструменты разработчика. Работа с текстом, онлайн озвучка с разными голосами, кодировка и раскодировка текста и файлов в формате Base64.
Друзья, копипаст должен быть адекватным! #ЗаЗдоровыйКод

Так же, теперь видео можно искать по тегам: #GodotEngine #GodotLessons и #SkaneLikerGodot

Original source

3d Ocean

Related Posts

16 Comments

  1. Алена Коршунова
    June 1, 2019 at 18:32

    Очень круто! Спасибо! Могу я использовать на своем сайте https://it-schools.org/? У нас есть курс по JS для детей

  2. Сергей Заец
    June 1, 2019 at 18:32

    Это Dune2 with sega, аж захотелось поиграть

  3. Postelb I
    June 1, 2019 at 18:32

    привет, у меня как у тебя не вышло так что я удалил сэйв и рестор, но он вращается бесконечно

  4. Активный Спортсмен
    June 1, 2019 at 18:32

    Привет, Сканер! Подскажи, в каком уроке ты писал систему чтобы камера следила за игроком и держала его в центре?

  5. Marichka UA
    June 1, 2019 at 18:32

    Если бы ещё не было плямканья после каждого второго слова -_- Это невыносимо

  6. FarSet Channel
    June 1, 2019 at 18:32

    11:07
    В квадрат что-то вселилось!

  7. Danil Bayushev
    June 1, 2019 at 18:32

    Привет, Skaner!
    Смотрю твои видео и все очень нравится: и подача и разъяснения. Для практики после каждого просмотра пытаюсь использовать только что полученные знания, придумывая себе задачку или пытаюсь "прикрутить" к предыдущим урокам. Так сделал и в этот раз. Задача: поворот изображения нажатием стрелок клавиатуры.
    Все работает, НО есть косяк: при зажатии клавиши в лево или право картинка поворачивается на заданный в итерации градус, останавливается на пару миллисекунд, а затем продолжает плавный поворот. Никак не могу понять что это за пауза такая. Подскажи, если есть время. Код прилагаю.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Поворот</title>

    </head>
    <body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript">

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width = 1000, height = 1000;
    canvas.width = width;
    canvas.height = height;
    canvas.style.backgroundColor = "#ccc";
    var image = document.createElement("img");
    image.src = "image.png";

    var draw = function(i,x,y,a){
    var dx = x+i.width/2;
    var dy = y+i.height/2;
    if(a){
    a=a*(Math.PI/180);
    ctx.save();
    ctx.translate(dx, dy);
    ctx.rotate(a);
    ctx.translate(-dx, -dy);
    }
    ctx.drawImage(i, x, y);
    if(a){
    ctx.restore();
    }
    };

    var x=100, y=100, a=0;

    var nextGameStep = function(){
    ctx.clearRect(0,0,width,height);
    draw(image, x, y, a);
    requestAnimationFrame(nextGameStep);
    };

    addEventListener('keydown',function(e){
    switch(e.keyCode){
    case 39:
    a+=1;
    break;
    case 37:
    a-=1;
    break;
    }
    });

    nextGameStep();

    </script>
    </body>
    </html>

  8. Indie Devolep
    June 1, 2019 at 18:32

    Хз не понятно пробел там или минус

  9. Creative Studio
    June 1, 2019 at 18:32

    Skaner,подскажи ресурс,где можно более подробно узнать про каждый метод и функцию,а то не пойму что за "restore","drawRect";

  10. Иван Нефедов
    June 1, 2019 at 18:32

    мне потребовалось сделать поворот машины при том что машина это просто прямоугольник, выходит надо просто рисовать для нее спрайт поворота?

  11. Иван Нефедов
    June 1, 2019 at 18:32

    или надо создавать много канвасов для каждого объекта?

  12. Иван Нефедов
    June 1, 2019 at 18:32

    Вращать канву като странно, сам обьект вращать никак нельзя? Скажем в игре много обьектов и все они выходит будут крутиться…

  13. Mike Volv
    June 1, 2019 at 18:32

    Уроки втягивают, оторваться невозможно. Спасибо за труд! И одна просьба. Сканер, добавь в описание музыку из урока, если не сложно. Спасибо!

  14. Джон Константин
    June 1, 2019 at 18:32

    Блин тизеры это круто)

  15. ярослав чорний
    June 1, 2019 at 18:32

    в мене таке питання а якшо малювати якусь пароболу гіперболу чи ше шось потрібно використовувати радіани

  16. Кирилл Белов
    June 1, 2019 at 18:32

    спасибо. Отличный урок

Leave A Comment

You must be logged in to post a comment.