Codi Joc #1

game.js

// 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