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
