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



Побочка: 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

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

  • June 1, 2019 at 18:32
    Permalink

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

  • June 1, 2019 at 18:32
    Permalink

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

  • June 1, 2019 at 18:32
    Permalink

    Привет, 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>

  • June 1, 2019 at 18:32
    Permalink

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

  • June 1, 2019 at 18:32
    Permalink

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

  • June 1, 2019 at 18:32
    Permalink

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

  • June 1, 2019 at 18:32
    Permalink

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

  • June 1, 2019 at 18:32
    Permalink

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

Leave a Reply