Pálya és ütő elkészítése

Posted on January 26, 2013 by Balazs

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

Javascript és az osztályok

Posted on January 25, 2013 by Balazs

Helló!

Javascript-ben háromféleképpen hozhatunk létre osztályokat, ezeket foglyuk most végignézni. Fontos azonban megjegyezni, hogy osztályok nincsenek javascriptben, függvényekkel tudjuk szimulálni azokat.

1. Függvényt használva

Létrehozunk egy egyszerű függvényt majd létrehozunk belőle egy objektumot a new kulcsszóval. Példa:

 function Teglalap(a,b){
     this.a = a;
     this.b = b;
     this.kerulet = getKerulet;
}

//a getKerulet lehet a Teglalap fuggvenyen belul is
function getKerulet(){
     return (a + b)*2;
}

Példányosítás(és kiírás konsolra):

var t = new Teglalap(2,3);
consol.log(t.kerulet);

2. Osztályok definiálása Objektumváltózókkal

Ez egy gyorsabb megoldás, kihagyhatjuk az objektum példányosítását és egyből definiáljuk azt:

var teglalap{
   a: 0,
   b: 0,
   kerulet: (a+b)*2
}

teglalap.a = 2;
teglalap.b = 2;

conslo.log(teglalap.kerulet);

3. A kettő keveréke

A Harmadik módszer gyakorlatilag a fenti kettő kombinációja:

var teglalap = new function(){
    this.a = 2;
    this.b = 3;
    this.kerulet = function getKerulet(){ // a getKerulet lehet a fuggvenyen kivul is
        return (a + b)*2; }
}

//valtozok elerese
teglalap.a = 5;
consol.log(teglelep.kerulet);

Röviden ennyit a Js osztályokról.

Üdv.:
Balázs

Mozgás (Javascript)

Posted on January 24, 2013 by Balazs

Helló!

Lássuk hogyan is tudunk mozgásra bírni dolgokat a képernyőn html5-öt és js-et használva.

Hozzunk létre egy új Javascript blank app projektet és nyissuk meg a default.html fájlt, majd hozzunk létre benne két gombot “Move” (ennek hatására elindul az animációnk) és “Stop” (ez pedig megállítja) névvel és hozzuk létre a canvasunkat is.

<button onclick="m.m1()">Move</button>
<button onclick="m.m2()">Stop</button>
<canvas id="canvas"></canvas>

(az onclickről később)

Ha ezzel megvagyunk jöhet is a default.js. Nyissuk meg a fájlt majd hozzunk létre néhány szükséges változót

var canvas, context;    // canvas inicializalasahoz kell
var a = 250;    // a kor kozeppontjanak y koordinataja
var b = 1;      // jobbra vagy balra mozogjon a kor
var x = false;  // van mozgas vagy nincs

Ezután hozzuk létre az “initialize()” függvényünket amiben létrehozzuk a canvas-t és az animációkat amit a következő képpen tudunk megtenni:

window.onload = initialize;
function initialize() {
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;    //canvas szelessege kepernyo szeles
canvas.height = window.innerHeight;  //canvas szelessege kepernyo magas
context = canvas.getContext("2d");

//ketfele keppen hozhatunk letre animaciot
requestAnimationFrame(move);  // canvas ujrarajzolasa 1
setInterval(function () { redraw()}, 6); // canvas ujrarajzolasa 2
}

Akkor most irjuk meg a move() es a redraw() fuggvenyeket, hogy működjön is.

function redraw() {
context.beginPath();
context.fillStyle = "blue";
if (a > 500)     //ha a kor y koordinátája nagyobb mint 500 akkor irányváltás 
b *= -1;
if (a < 250)     //ha a kor y koordinátája kisebb mint 250 akkor irányváltás
b *= -1;
context.arc(a, 350, 20, 0, Math.PI * 2, true);  // kezdo kor kirajzolasa
//ha rákattintunk a Move gombra x=true
if(x)
//mozgatás jobbra balra y koord. szerint 250 és 500 kozott
context.arc(a += b, 350, 20, 0, Math.PI * 2, true);
context.fill();
}

Most nézzük a move() függvényt(kis különbséggel ugyan az mint az előbb):

function move() {
canvas.width = canvas.width; // képernyő törlése

context.beginPath();
context.fillStyle = "blue";
if (a > 500)
b *= -1;
if (a < 250)
b *= -1;
context.arc(a, 250, 20, 0, Math.PI * 2, true);  // kezdo kor kirajzolasa
if (x)
context.arc(a += b, 250, 20, 0, Math.PI * 2, true);  // mozgatas
context.fill();

requestAnimationFrame(move);
}

Már csak a gombok kezelése van hátra. Elöszőr is írjuk meg a két (on(), off()) fügvényünket ami nem lesz túl bonyolult mindössze az “x” változót állítja “true”-ra vagy “false”-ra

function on() {
x = true;

function off() {
x = false;
}

Ha ez is megvan már csak egy aprócska lépés van hátra mégpedig, hogy létrehozzunk egy névteret amin keresztül elérjük ezeket a függvényeket a html fájlunkból:

WinJS.Namespace.define("m", { m1: on, m2:off}); // namespace a gombokhoz

Ezután az ‘az oncllick’-nek már átadható m1() ill. m2() függvény ahogy ezt az elején csináltuk.

A gombok középre helyezéséhez a default.css-be írjuk be a következőket:

body {
text-align:center;
background-color:coral;
}

Ha mindennel megvagyunk futtasuk a projektet és próbáljuk ki.
A forrás innen letölthető: CanvasDemo2

Üdv: Balázs

Microsoft Innovation Center

Monthly Archives: January 2013

Pálya és ütő elkészítése

Javascript és az osztályok

1. Függvényt használva

2. Osztályok definiálása Objektumváltózókkal

3. A kettő keveréke

Mozgás (Javascript)