Skip to content

Instantly share code, notes, and snippets.

@andreuestanyalonso
Created May 25, 2020 18:42
Show Gist options
  • Save andreuestanyalonso/68c3cce666c6f59da9cf8916a493e734 to your computer and use it in GitHub Desktop.
Save andreuestanyalonso/68c3cce666c6f59da9cf8916a493e734 to your computer and use it in GitHub Desktop.
Codi Joc #1
// Dibuixar: rectangle, circunferència, polígon (triangle)
// Functions
const canvas = document.getElementById("tutorial");
const context = c anvas.getContext("2d");
// Rectangle de fons
function drawBackground() {
// width="640" height="480"
// context.rect(x, y, amplada, alçada);
context.beginPath();
context.fillStyle = "rgb(200, 200, 200)";
context.rect(0, 0, 640, 480);
context.fill();
context.closePath();
}
function drawCircle(radius, x, y) {
context.beginPath();
context.fillStyle = "rgb(0, 0, 200)";
// context.arc(x, y, radi, 0, 2 * Math.PI);
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
context.closePath();
}
var x = 50;
var y = 50;
var radius = 100;
// Funció s'executa 60 vegades per segon. pantalla -> frame. 60 frames per secons -> 60 fps
function draw(keys) {
drawBackground();
drawRectangle();
drawTriangle();
drawCircle(radius, x, y);
if (keys.ArrowRight) { x = x + 1; }
if (keys.ArrowLeft) { x = x - 1; }
if (keys.ArrowDown) { y = y + 1; }
if (keys.ArrowUp) { y = y - 1; }
//x = x + 1
// radius = radius + 1;
}
function loop(drawFn) {
let keys = {};
const drawRecursive = () => {
drawFn(keys);
window.requestAnimationFrame(drawRecursive);
};
window.addEventListener("keydown", (ev) => {
keys[ev.code] = true;
});
window.addEventListener("keyup", (ev) => {
keys[ev.code] = false;
});
window.requestAnimationFrame(drawRecursive);
}
loop(draw);
//segona rodona de color vermell
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment