D4mations.com

Вращение объектов на 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

d4mer

, , , , , , , , ,

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

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

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

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

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

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

Leave a Reply