Pálya és ütő elkészítése | Microsoft Innovation Center

Helló!

Nos, mostmár ideje elkezdeni a játék megvalósítását, elsőként rajzoljuk meg a pályát és csináljuk meg az ütőt ami az egérrel mozgatható(erről fog szólni ez a post).

Hát akkor vágjunk is bele, hozzunk létre egy új üres Javascript projektet a szokásos módon és hozzunk létre egy 800×600-as canvast(ekkora lesz a pályánk) ill. néhány segédváltozót.

html(default.html):

<body>
    <canvas class="court" id="court" style="background-color:darkcyan"></canvas>
</body>

javascript(default.js):

window.onload = initialize;
function initialize() {
    var x, y;  //segedvaltozok az eger x, y koordinatainak lekeresehez
    var racket = {x:350,y:250, widht:100, height:60}; // az uto
    var court = document.getElementById("court");
    var ctx = court.getContext("2d");
    court.width = 800;
    court.height = 600;
}

Igazítsuk középre a pályánkat(default.css):

.court {
    width:800px;
    height:600px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-300px 0 0 -400px;
}

Ezután rajzoljuk meg a pályánkat az initialize() függvényen belül ami a következőképp fog kinézni:

function Draw() {
    ctx.clearRect(0, 0, court.width, court.height);
    ctx.beginPath();
    ctx.rect(2, 2, 796, 596);
    ctx.rect(100, 100, 600, 400);
    ctx.rect(200, 200, 400, 200);
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.moveTo(800, 0);
    ctx.lineTo(600, 200);
    ctx.moveTo(800, 600);
    ctx.lineTo(600, 400);
    ctx.moveTo(0, 600);
    ctx.lineTo(200, 400);
    ctx.strokeStyle = 'lightgrey';
    ctx.lineWidth = 4;
    ctx.stroke();

    //uto kirajzolasa
    ctx.beginPath();
    ctx.rect(racket.x, racket.y, racket.widht, racket.height);
    ctx.strokeStyle = 'grey';
    ctx.lineWidth = 3;
    ctx.stroke();

    //ez lesz a labdank(a kovetkezo post-ban targyaljuk a mozgasat)
    ctx.beginPath();
    ctx.arc(400, 300, 15, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "white";
    ctx.lineWidth = 1;
    ctx.stroke();
}

Az ütő mozgásához további két függvényt kell megvalósítanunk eggyikkel az egér x, y koordinátáit kérhetjük le a mássikkal pedig beállítjuk az ütő koordinátáit az egér koordinátáira, lássuk hogyan is fog ez kinézni:

// az eger koordinatainak lekerese
function getMousePos(canvas, evt) {
    var rect = court.getBoundingClientRect();
    return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
    };
}

//uto koordinatainak beallitasa
court.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(court, evt);
    racket.x = mousePos.x-50;
    racket.y = mousePos.y-30;
}, false);

Ha mindennel megvagyunk már csak egy lépés van hátra, mégpedig a canvas ujrarajzolása, amit a setInterval(…) függvénnyel tehetünk meg. Adjuk hozzá az initialize() függvényhez a következő sort:

setInterval(function () { Draw() }, 30);

Ha kész vagyunk futtasuk a projektünket és próbáljuk ki.

A teljes projekt innen letölthető: PalyaDemo

Üdv.:
Balázs

Leave a Reply Cancel reply