Windows 8 és C++

Sziasztok,

A C++-os kliens írása közben belefutottam egy érdekes jelenségbe, amely Windows 8-on jön elő és habár elég egyszerű a megoldása gondoltam megosztom mással is hátha jól jön.

A C++ fejlesztéshez én Code:Blocks-ot használtam. A telepítés után az első hello word program futtatásánál a következő hibaüzenetet kaptam:

“HelloWorld – Debug: The compiler’s setup (GNU GCC Compiler) is invalid, so Code::Blocks cannot find/run the compiler.
Probably the toolchain path within the compiler options is not setup correctly?!
Goto “Settings->Compiler and debugger…->Global compiler settings->GNU GCC Compiler->Toolchain executables” and fix the compiler’s setup.
Skipping…
Nothing to be done (all items are up-to-date).”

A probléma megoldása a következő:

Meg kell nyitni a settings-ben található “Compiler settings…” menüpontot.

compilerMajd ezek után a “Toolchain executables” tabra navigálva meg kell nyomnunk az “Auto-Detect” gombot.

compilerSettingsEzek után már rendben fodult a kód.

 

 

CSV importálása MS SQL -be

Sziasztok,

CSV file-ok importálásával foglalkoztam MSSQL adatbázisba. Ez egy több féle képpen megközelíthető dolog. Az első amire én is rátaltam a BULK INSERTE-es megoldás ami a következő képpen néz ki:

CREATE TABLE Test
(ID INT,
FirstName VARCHAR(40),
LastName VARCHAR(40),
BirthDate SMALLDATETIME)

BULK INSERT Test
FROM ‘C:\test.csv’
WITH
(
FIRSTROW = 2,
FIELDTERMINATOR=’,’,
ROWTERMINATOR = ‘\n’
)

A “FIRSTROW” azt a célt hivatott betölteni, hogy amennyiben a csv file-unk első pár sora tartalmazza a fejlécet úgy azt ki tudjuk hagyni, különben érvénytelen adat miatt hibát kapunk. Többi megadott paraméter éretelemszerűen a separáló karaktert, valamint a sor végén használt karaktert jelezi.

Ezzel a módszerrel sajnos nekem nem sikerült, (és a fórumok alapján még sok másnak sem) megoldani az exportot.

Az általam használt és működő megoldás az volt, hogy a csv file-t lementettem .xlsx-be majd ezt importáltam a már meglévő adatbázisomba. A feltétel csupán csak annyi, hogy a fejlécnek tartalmaznia kell, az adott oszlopok neveit, tehát header + csv data. Valamint le kell tölteni és installálni az Office System Driver-t. Erről a link-ről érhető el.

Ezek után a Microsoft SQL Server Management Studio-ban az adatbázison jobb klikk majd Tasks – Import Data:
import

Majd ezek után ki kell választanunk az adatforrást ami az adott esetben Microsoft Excel valamint a file elérését.
excelDataSourceKi kell választanunk az adatbázist, hogy hova szeretnénk importálni az adatokat.

dataBaseChoose

Amennyiben a file-unk érvényes, így a következő ablakokkal találkozunk, ahol lehetőségünk van változtatni a tábla nevén és az oszlopainak beállításain.

mappingAmennyiben az adatok megfelelőek úgy lehetőségünk van rá, hogy azonnal elkezdjük a folyamatot. Ha minden rendben zajlott akkor egy hasonló ablakkal kell, hogy találkozzunk:

finish

Az adatbázis táblánk elkészült az általunk módosított/jóváhagyott paraméterek mentén.

A kész táblában viszont nincsen elsődleges azonosító, amit a következő kódrészlettel pótoltam:

addKey

Végül az adatbázis tábla kész és még elsődleges kulcsot is tartalmaz.

Visual Studio 2012 és WCF Data Service

Sziasztok!

Ebben az írásban a WCF Data Service használatáról fogok írni Visual Studio 2012-őt használva.

Amikor Visual Studio 2012-őt használva elhatároztam, hogy csinálok egy Data Service-t nagy meglepődésemre sehol nem találtam a project template-k között. Jelenleg a 2012-es verzió esetén a Data Service template még csak RTM verzióban érhető el.

A következő linkről érhető el az installer:

http://www.microsoft.com/en-us/download/details.aspx?id=35840

A célom egy OData service létrehozása volt azonban a template installálása nem oldotta meg a problémámat.

Elösször is ehhez installálnom kellet pár NuGet package-t:

  • EdmLib
  • ODataLib
  • WCF Data Services Client
  • WCF Data Services Server
  • EntityFramework

Ezek után ha létrehozunk egy Data Service-t majd megadjuk a kért ObjectContext-et elméletben az alkalmazásunk működik. Sajnos csak elméletben.

A probléma az EntityFramework új verziója amely másképp kezeli az ObjectContext-et, azonban a WCF Data Service-t erre még nem készítették fel, így nem kompatibilisek.

A megoldás:

Installálni kell egy újabb NuGet package-et:
Install-Package Microsoft.OData.EntityFrameworkProvider -Pre

Majd ezek után a Data Service osztályunk nem a DataService osztályból kell, hogy öröklődjön hanem az EntityFrameworkDataService osztályból.

Ezek után már az service képes ellátni a tényleges feladatát.

Team Foundation Service (TFS)

Az alábbi cikkben egy TFS repository elkészítését fogom röviden ismertetni.
Amennyiben szeretnénk saját repository-t készíteni csak annyi a dolgunk, hogy ellátogatunk a következő honlapra: https://tfs.app.visualstudio.com/_account/Signup ahol csupán egy repository név szükséges és egy klikkelés a “Create Account” gombra.

 

01

 

Majd ezek után az általunk megadott Account URL -re kell navigálnunk, ahol lehetőségünk nyílik készíteni egy új Team Projecte-et, illetve egy GIT projectet.

03A “New Team Project” -re kattintás után egy dialog formájában tudjuk megadni a kezdeti adatokat a projektünkhöz.

02

Majd ezek után create project és készen is van repository, és már csak meg kell nyitni a Visual Studio-t és összekapcsolni a repository-val.

A Visual Studio megnyitása után a Team – Connect to Team Foundation Server menüpontal tudjuk elkezdeni az összekötési folyamatot.

05

Utána meg kell adnunk az általunk készített repository URL-t.

07

Végül map-elnünk kell a repository-t a saját lokális gépünkre.

08

Ezek után már csak a kívánt porjekteket kell hozzáadni a solution-höz és check-in-elni a repositoryba. A TFS – t Visual Studio-ból a Team Explorer-ből tudjuk kezelni.

Póker Menedzser – Az adatbázis

Sziasztok!

Ebben a részben a programhoz szükséges adatbázisról fogok beszélni.

Microsoft SQL Server Management Studio:

A Microsoft által biztosított segédszoftver az adatbázisaink kezeléséhez és menedzseléséhez. Alapjában véve localhoston történnek az akciók, de tud kapcsolódni természetesen Azure-ban lévő adatbázishoz is, rendkívül megkönnyítve az ott elhelyezett adatbázisokkal történő munkánkat.

Az adatbázis:

A projektemhez egy 11 táblából álló adatbázist használok, melynek szerkezetét a mellékelt képen láthatjátok.

adatbazis_blogba

Amikor a játékos elindítja a programot és leül játszani, egy új Sessiont indít, amely eltárolja, hogy Kicsoda, milyen oldalon, milyen típusú játékot játszott és hogy mettől meddig tartott az adott Session.

Sessionök kezelése a végső programban lesz megoldva, addig egyetlen Session van, debug célokra.

Players, Gametypes és Pokersites táblák tartalma automatikusan töltődik fel a szöveges handhistory-ból, amennyiben az adatbázis még nem tartalmazza a bejegyzéseket.

A rendszer “lelke” a Handinfo tábla, ez tárolja a minden kör elején a szöveges fájlokból kinyert információkat. A gamenumber a játék egyedi azonosítója, amit kap az oldaltól, a session_id megmondja, hogy éppen melyik Sessionben játszottuk az adott leosztást, a site_id értelemszerűen azonosítja az oldalt amin játszottunk, a többi sor pedig az éppen játékban lévő játékosokról szolgáltat információt:

  • seatx_player: Az “x” pozíción helyet foglaló játékos ID-je.
  • seatx_chipcount: Az “x” pozíción helyet foglaló játékos aktuális, kör eleji zsetonmennyisége.
  • seatx_sitout: Az “x” pozíción helyet foglaló játékosról mondja meg, hogy jelenleg aktív játékos-e, avagy távol van az asztaltól.

A következő érdekes pont a Dealt_hands gyűjtőtábla, amelyben eltároljuk, hogy egy adott játékos egy adott körben milyen lapokat kapott.

Ha a fenti információkat összegyűjtöttük, kezdődhet a játék!

preflop, flop, turn, river során történt akciókat egy közös, Actions gyűjtőtáblában kezelem, amelyhez tartozik minden fázishoz egy-egy tábla.

Az egyes fázisokat reprezentáló táblákban eltárolom, hogy melyik játékban, melyik játékos, milyen azonosítóval, mit cselekedett, valamint amennyiben szükséges rögzítem az akció során felhasznált zsetonmennyiséget. 

Tehát ha egy preflop emelés történik 1000-ig, akkor a Preflop actions tábla tartalma: (31625908466, 1, 1, raise, 1000).

Pro és kontra:

Az SQL server 2012 hatalmas előnye (ami egyébként joggal várható el tőle), hogy teljes mértékben, pár kattintás hatására együttműködik a Visual Studio 2012-vel, így szinte azonnal generálhatunk Entity Framework modellt a projektünkhöz, de ha még nincs meg az adatbázis, akkor a Visual Studioban létrehozott modellből is generálhatunk adatbázist az SQL serverbe.

Kontraként megemlíthető, hogy rengeteg helyet felemészt a merevlemezen, és egy részét mindenképpen a C:\ partícióra kell telepíteni, más választásunk nincs. Egyéni probléma, de a C:\-m jelenleg nem bővelkedik sok szabad helyben, ezért voltak gondjaim a telepítés során, amelyek fel sem merültek volna, ha másik partícióra is telepíthető 100%-ban.

További picit zavaró funkciója az SQL Server Management Studionak, hogy alapértelmezés szerint egy olyan tábla, amely kapcsolatban áll egy másik táblával, már nem módosítható, csak a tábla droppolásával és újrakreálásával. Szerencsére ez az opció kikapcsolható, így egy warning üzenet “leokézása” után megcsinálja ezen lépéseket helyettünk a program, ami felettébb kényelmes a manuális megoldáshoz képest.

A következő rész tartalmából:

A következő részben az Entity Framework és a LINQ használatáról fogok beszélni, pár példával és kódrészlettel kiegészítve a projektemből.

Póker Menedzser – a kezdetek

Sziasztok!

Idén februárban kezdtem el dolgozni a szakdolgozatomon, ami egy egyéves projekt gyümölcse lesz remélhetőleg. Mivel megfordulok néhanapján pár online póker teremben (természetesen csak játékpénzben játszom 🙂 ) és szeretem egy-egy átkártyázott éjszaka után átnézni a játékom, elemezni, megtudni, hogy hogy zártam, mik a főbb mutatóim, innen jött az ötlet, hogy csinálok egy Windows 8-as alkalmazást ami minden ilyesmire képes lesz.

Alkalmazott technológiák:

  • Microsoft SQL Server 2012 az adatbázishoz
  • Entity Framework az adatbázis és a kód kapcsolatához
  • WCF szolgáltatás az adatok feldolgozásához
  • Windows 8 alkalmazás az adatok megjelenítéséhez

Célok:

Félév végéig szeretném elérni, hogy az elmentett leosztásokat feldolgozzam teljes egészében és eltároljam az adatbázisban.

Jelenlegi állapot:

Jelenleg már képes a program feldolgozni a leosztásokban szereplő alapvető adatokat, és a játékosok nevét, zsetonmennyiségét, valamint a pozícióját. A kezdeti verzióban ADO.NET-tel dolgoztam, de átálltam a sokkal egyszerűbb és jobb átláthatóságot biztosító Entity Framework + LINQ kombinációra, így dinamikusabban tudok haladni a feldolgozással.

A következő rész tartalmából:

A következő részben az MSSQL kezeléséről, és a programhoz szükséges adatbázisom felépítéséről fogok írni.

Negyedik – all in one

Harmadik feladatok – all_in_one

GridView, ListView példa képek megjelenítése, URL megadási módok
2 féle url megadási módot használtam. Ha a neten kerestem képeket, és annak a linkjét másoltam be,akkor azt elfogadta, és megjelenítette az alkalmazásban.Ez volt a gyorsabb verzió, amire később jöttem rá. Elsőnek letöltöttem a netről képeket, és a projekten belül hozzáadtam az assets mappához, és ezzel az url-ellel raktam bele a projektbe, pl: Assets/gyumolcsok.jpg
Alkalmazások?

Mivel a blognak 2MB-nyi feltöltési korlátja van, így a demó ezen az url-en érhető el: itt.
FlipView beállítási lehetőségek
ActualHeight: a keretelem aktuális magasságát adja meg (csak olvasható).
ActualWidth: a keretelem aktuális szélességét adja meg (csak olvasható).
AllowDrop: megad vagy beállít egy értéket, amely meghatározza, hogy az UIElement lehet a drag-and-drop műveletek egy vidd célja (olvasható-írható).
Background: megad vagy beállít egy ecsetet, amely biztosítja a control hátterét (olvasható-írható).
BaseUri: megad egy egységes erőforrás-azonosítót (egy rövid karaktersorozat, amelyet egy webes erőforrás azonosítására használunk. Közismert példái a webcímek, más néven URL-ek.), ami reprezentálja az alap egységes erőforrás-azonosítót XAML-épített objektum számára, az XAML betöltési ideje alatt (csak olvasható).
BorderBrush: megad vagy beállít egy ecsetet, ami “leírja” a keret control hátterét (olvasható-írható).
BorderThickness: megadja vagy beállítja a control keret vastagságát (olvasható-írható).
CacheMode: megad vagy beállít egy értéket, amely jelzi, hogy a megadott tartalom cache-be kell, hogy legyen, ha ez lehetséges (olvasható-írható).
CharacterSpacing: megadja vagy beállítja a karakterek közötti távolságot (1 és 1000 között) (olvasható-írható).
Clip:
DataContext:
DefaultStyleKey: megadja vagy beállítja a kulcsot, ami a kontrol alapértelmezett stílusára hivatkozik (olvasható-írható).
DesiredSize: megadja azt a méretet, ami (csak olvasható).
Dispatcher: megadja a CoreDispatcher-t, ami ezzel az objektummal áll kapcsolatban (csak olvasható).
DisplayMemberPath: megadja vagy beállítja a tulajdonság nevét vagy elérési útját, amivel megjelenhet minden adat (olvasható-írható).
FlowDirection: (olvasható-írható).
FocusState: megadja az értéket, ami megadja, hogy az ellenőrzés középpontjában áll-e, és a módot, amit a középpontban kapunk (csak olvasható).
FontFamily: megadja vagy beállítja a controlban használt szöveg betűtípusát (olvasható-írható).
FontSize: megadja vagy beállítja a controlban használt szöveg méretét (olvasható-írható).
FontStretch: megadja vagy beállítja a fokozatot, amely a betűtípust kondenzálja és bővíti a képernyőt (olvasható-írható).
FontStyle: megadja vagy beállítja a stílust, ami a szöveghez van rendelve (olvasható-írható).
FontWeight: megadja vagy beállítja a megadott betűtípus vastagságát (írható-olvasható).
Foreground: megadja vagy beállítja azt az ecsetet, ami leírja az előtér színét (olvasható-írható).
GroupStyle: a GroupStyle objektumok gyűjteményét adja meg, amik meghatározzák a csoportok minden szinten való megjelenítését (csak olvasható).
GroupStyleSelector: (olvasható-írható).
Height: megadja vagy beállítja a FrameWorkElement ajánlott magasságát (olvasható-írható).
HorizontalAlignment: megadja vagy beállítja a control tartalmának vízszintes igazítását (olvasható-írható).
HorizontalContentAlignment: (olvasható-írható).
IsDoubleTapEnabled: megadja vagy beállítja azt az értéket, ami meghatározza, hogy a DoubleTapped esemény származhat-e abból az elemből (olvasható-írható).
IsEnabled: megadja vagy beállítja azt az értéket, ami jelzi, hogy a DoubleTapped felhasználó kölcsönhatásba léphet-e a controllal (olvasható-írható).
IsGrouping: megadja azt az értéket, ami jelzi, hogy a vezerlő egyesítést használ-e (csak olvasható).
IsHitTestVisible: megadja vagy beállítja, hogy az UIElement foglalt területe visszatérhet-e valódi értékekkel hit teszt miatt (olvasható-írható).
IsHoldingEnabled: megad vagy beállít egy értéket, ami meghatározza, hogy a Holding esemény származhat-e ebből az elemből (olvasható-írható).
IsRightTapEnabled: megad vagy beállít egy értéket, ami meghatározza, hogy a RightTapped esemény származhat-e ebből az elemből (olvasható-írható).
IsSynchronizedWithCurrentItem: megad vagy beállít egy értéket, ami megmutatja, hogy egy Selectornak a SelectedItem-et szinkronban kell-e tartania az aktuális elemmel az Items tulajdonságban (olvasható-írható).
IsSynchronizedWithCurrentItemProperty: azonosítja a IsSynchronizedWithCurrentItem függőség tulajdonságot (csak olvasható).
IsTabStop: megad vagy beállít egy értéket, ami jelző, hogy a control szerepel el a fül navigációban (írható-olvasható).
IsTapEnabled: megad vagy beállít egy értket, ami meghatározza, hogy a Tapped esemény származhat-e ebből az elemből (írható-olvasható).
ItemContainerGenerator: megadja, hogy az ItemContainerGenerator társul-e az ItemsControlhoz (csak olvasható).
ItemContainerStyle: megadja vagy beállítja a stílust, amely akkor használható, amikor az elemet konténerré teszik (írható-olvasható).
ItemContainerStyleSelector: (írható-olvasható).
ItemContainerTransitions: megadja vagy beállítja a Transition stílus elemek gyűjteményét, ami egy ItemsControl elemeikre alkalmazható (írható-olvasható).
Items: megadja azt a gyűjteményt, ami a kontrol tartalmának létrehozásakor használt (csak olvasható).
ItemsPanel: megadja vagy beállítja azt a sablont, ami meghatározza a panelt, ami ellenőrzi az elemek elrendezését (írható-olvasható).
ItemsSource: megad vagy beállít egy objektumforrást, amit az ItemsControl tartalmának létrehozásakor használt (olvasható-írható).
ItemTemplate: megad vagy beállít egy DataTemplate-t, amit minden elem megjelenítésére használ (írható-olvasható).
ItemTemplateSelector: (írható-olvasható).
Language: megad vagy beállít egy globális nyelvi információ, ami érvényes egy FrameWorkElement-re (írható-olvasható).
ManipulationMode: (írható-olvasható).
Margin: megadja vagy beállítja a FrameworkElement külső margóját (írható-olvasható).
MaxHeight: megadja vagy beállítja egy FrameworkElement maximális magasságát (írható-olvasható).
MaxWidth: megadja vagy beállítja egy FrameworkElement maximális szélességét (írható-olvasható).
MinHeight: megadja vagy beállítja egy FrameworkElement minimális magasságát (írható-olvasható).
MinWidth: megadja vagy beállítja egy FrameworkElement minimális szélességét (írható-olvasható).
Name: megadja vagy beállítja az objektumazonosító nevét (írható-olvasható).
Opacity: megadja vagy beállítja az objektum átlátszóságának mértékét (írható-olvasható).
Padding: megadja vagy beállítja a kontrolon belüli ellenőrzést (írható-olvasható).
Parent: megadja a FrameworkElement szülő objektumát az objektumfában (csak olvasható).
PointerCaptures: (csak olvasható).
Projection: megadja vagy beállítja a perspektivikus vetítést, amit akkor kell alkalmazni, amikor az elemhez van rendelve (írható-olvasható).
RenderSize: (csak olvasható).
RenderTransform: (írható-olvasható).
RenderTransformOrigin: (írható-olvasható).
Resources: (írható-olvasható).
SelectedIndex: megadja vagy beállítja a kiválasztott elem indexét (írható-olvasható).
SelectedIndexProperty: azonosítja a SelectedIndex függőség tulajdonságát (csak olvasható).
SelectedItem: megadja vagy beállítja a kiválasztott elemet (írható-olvasható).
SelectedItemProperty: azonosítja a SelectedItem függőség tulajdonságát (csak olvasható).
SelectedValue: megadja vagy beállítja a kiválasztott elem értékét, amelyet a SelectedValuePath használatával érhetjük el (írható-olvasható).
SelectedValuePath: (írható-olvasható).
SelectedValuePathProperty: (csak olvasható).
SelectedValueProperty: (csak olvasható).
Style: megad vagy beállít egy stílus példányt, ami az objektum rendezése során használnak (írható-olvasható).
TabIndex: (írható-olvasható).
TabNavigation: (írható-olvasható).
Tag: megadja vagy beállítja egy tetszőleges objektum értékét, amit arra lehet használni, hogy eltárolja az információkat az objektumról (írható-olvasható).
Template: megad vagy beállít egy control templatet (írható-olvasható).
Transitions: megad vagy beállítja az UIElementhez alkalmazandó átmeneti stílust elemeinek gyűjteményét (írható-olvasható).
Triggers: (csak olvasható).
UseLayoutRounding: (írható-olvasható).
VerticalAlignment: (írható-olvasható).
VerticalContentAlignment: (írható-olvasható).
Visibility: megadja vagy beállítja az UIElement láthatóságát (írható-olvasható).
Width: megadja vagy beállítja egy FrameworkElement szélességét (írható-olvasható).
Flipview template készítés

 

Template-hez még sose volt szerencsém, így ez még hátra van.
Exif írás, olvasás

 

Ezzel kapcsolatban az interneten találtam egy programkódot, aminek működése során hozzá lehet adni egy képet a saját gépünkről, majd kiírja az exif információkat. Íme egy képernyőkép ezzel kapcsolatban:

Ezzel a programmal csak annyi a gond, hogy webszerveren keresztül működik.
Képernyő tervek

 

Képernyőtervek itt.

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

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