JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<script src="http://jeremyckahn.github.io/keydrown/dist/keydrown.js"></script>
<h3>Жмякаем клавиши D и A</h3>

JavaScript

var context;
var container; 
var currentAngle = 0;
var radius = 100;
var baseX = 200;
var baseY = 200;



container = document.createElement("canvas"); 
container.width = 400;
container.height = 400;

document.body.appendChild(container);

context = container.getContext('2d'); 
context.fillStyle = '#000';
context.fillRect(0, 0, container.width, container.height); 


context.fillStyle = '#000';
context.fillRect(0, 0, container.width, container.height);
var vx = Math.cos(currentAngle) * radius;
var vy = Math.sin(currentAngle) * radius;
context.fillStyle = '#fff';
context.fillRect(baseX + vx, baseY + vy, 20, 20);
currentAngle += 0.1;



kd.D.down(function () {
        context.fillStyle = '#000';
        context.fillRect(0, 0, container.width, container.height);
        var vx = Math.cos(currentAngle) * radius;
        var vy = Math.sin(currentAngle) * radius;
        context.fillStyle = '#fff';
        context.fillRect(baseX + vx, baseY + vy, 20, 20);
        currentAngle += 0.1;    
});

kd.A.down(function () {
        context.fillStyle = '#000';
        context.fillRect(0, 0, container.width, container.height);
        var vx = Math.cos(currentAngle) * radius;
        var vy = Math.sin(currentAngle) * radius;
        context.fillStyle = '#fff';
        context.fillRect(baseX + vx, baseY + vy, 20, 20);
        currentAngle -= 0.1;
});

kd.run(function () {
  kd.tick();
});