Bu yazımda ise, HTML5 ve Js ile masa tenisi oyunu yazacağız.
Öncelikle HTML yapısını oluşturmakla başlayalım.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
*********
body { width: 600px; height: 400px; margin: 10px auto; border: 1px solid #eee; }
</style>
</head>
<body>
<div style="position: fixed; padding: 10px; font: 30px Arial;" id="skor"></div>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script src="javascript.js"></script>
</body>
</html>
Html dosyasında bulunan canvas etiketine, myCanvas idsini verdik. Eğer html5 canvas çizimleri ile ilgili bilgi sahibi değilseniz, HTML5 Canvas linkinden gerekli bilgileri alabilirsiniz.
Şimdi de JavaScript dosyasına geçelim. Oyunun animasyonlarını, objelerini burada oluşturacağız. Öncelikle Canvas etiketini tanımlayalım.
1
2
var canvas = ********.getElementById("myCanvas");
var c = canvas.getContext("2d");
Şimdi de kodlamalarda bize yardımcı olacak değişken ve fonksiyonları hazırlayalım.
1
2
3
var Width = canvas.width;
var Height = canvas.height;
var skor = 0;
Çizim Fonksiyonları
Canvas içerisine çizim yapabilmek için, fillRect ve arc fonksiyonlarını kullanacağız.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function kare() {
this.x = 0;
this.y = 0;
this.w = 0;
this.h = 0;
this.draw = function() {
c.fillRect(this.x, this.y, this.w, this.h);
}
}
function cember() {
this.x = 0;
this.y = 0;
this.r = 0;
this.vx = 0;
this.vy = 0;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
c.fill();
}
}
Objeleri oluşturalım ve konumlarını belirleyelim.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var oyuncu1 = new kare();
oyuncu1.x = 10;
oyuncu1.y = Height/2-40;
oyuncu1.w = 10;
oyuncu1.h = 80;
var oyuncu2 = new kare();
oyuncu2.x = Width-20;
oyuncu2.y = Height/2-40;
oyuncu2.w = 10;
oyuncu2.h = 80;
var ball = new cember();
ball.x = Width/2-5;
ball.y = Height/2-5;
ball.r = 10;
ball.vx = 5;
ball.vy = 5;
bloglug-html5-ping-pong-2
Şimdi de oyuna biraz hareket katalım. Mouse canvas içerisinde hareket ettirildiğinde, oyuncuların raketlerini mouseun Y eksenine göre yukarıya veya aşağıya hareket ettireceğiz.
1
2
3
4
5
6
$(********).ready(function() {
$("canvas").mousemove(function(e) {
oyuncu1.y = e.clientY - 50;
oyuncu2.y = e.clientY - 50;
});
});
Şuan ki haliyle top, tam ortada hareketsiz olarak durmaktadır. Topu, oyun başladığı anda her hangi bir yere hareket ettireceğiz. Ancak top canvasın dışına çıksa bile, hareket etmeye devam edecektir. Bunu engellemek için topun canvasın duvarlarına ve raketlere değdiğini algılayıp geri yansıtmalıyız.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function hareket() {
if(ball.y > Height-20) {
ball.vy = -5;
}else if(ball.y < 10) {
ball.vy = 5;
}
if(ball.x >= Width-30 && (ball.y >= oyuncu2.y && ball.y+ball.r <= oyuncu2.y+oyuncu2.h)) {
ball.vx = -5;
}else if(ball.x <= 30 && (ball.y >= oyuncu1.y && ball.y+ball.r <= oyuncu1.y+oyuncu1.h)) {
ball.vx = +5;
}else if(ball.x <= 0 && (ball.y < oyuncu1.y || ball.y+ball.r > oyuncu1.y+oyuncu1.h)) {
oyun_bitti();
}else if(ball.x >= Width && (ball.y < oyuncu2.y || ball.y+ball.r > oyuncu2.y+oyuncu2.h)) {
oyun_bitti();
}
ball.x += ball.vx;
ball.y += ball.vy;
}
Yukarıda oyuncu yandığında oyun_bitti() adında bir fonksiyon çalıştırıldı. Bu fonksiyonu tanımlayalım.
1
2
3
4
5
6
function oyun_bitti() {
ball.x = Width/2;
ball.y = Height/2;
alert("Oyun bitti Skorun: "+skor);
skor = 0;
}
Son olarak tüm fonksiyonları çalıştıralım ve oyunu başlatalım.
1
2
3
4
5
6
7
8
9
10
function oyna() {
c.clearRect(0,0,Width,Height);
oyuncu1.draw();
oyuncu2.draw();
ball.draw();
hareket();
skor++;
********.getElementById("skor").innerHTML = skor;
}
var init = setInterval(oyna ,10);
Oyunun son hali şu şekilde olacaktır.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var canvas = ********.getElementById("myCanvas");
var c = canvas.getContext("2d");
var Width = canvas.width;
var Height = canvas.height;
var skor = 0;
function kare() {
this.x = 0;
this.y = 0;
this.w = 0;
this.h = 0;
this.draw = function() {
c.fillRect(this.x, this.y, this.w, this.h);
}
}
function cember() {
this.x = 0;
this.y = 0;
this.r = 0;
this.vx = 0;
this.vy = 0;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
c.fill();
}
}
var oyuncu1 = new kare();
oyuncu1.x = 10;
oyuncu1.y = Height/2-40;
oyuncu1.w = 10;
oyuncu1.h = 80;
var oyuncu2 = new kare();
oyuncu2.x = Width-20;
oyuncu2.y = Height/2-40;
oyuncu2.w = 10;
oyuncu2.h = 80;
var ball = new cember();
ball.x = Width/2-5;
ball.y = Height/2-5;
ball.r = 10;
ball.vx = 5;
ball.vy = 5;
function oyun_bitti() {
ball.x = Width/2;
ball.y = Height/2;
alert("Oyun bitti Skorun: "+skor);
skor = 0;
}
function hareket() {
if(ball.y > Height-20) {
ball.vy = -5;
}else if(ball.y < 10) {
ball.vy = 5;
}
if(ball.x >= Width-30 && (ball.y >= oyuncu2.y && ball.y+ball.r <= oyuncu2.y+oyuncu2.h)) {
ball.vx = -5;
}else if(ball.x <= 30 && (ball.y >= oyuncu1.y && ball.y+ball.r <= oyuncu1.y+oyuncu1.h)) {
ball.vx = +5;
}else if(ball.x <= 0 && (ball.y < oyuncu1.y || ball.y+ball.r > oyuncu1.y+oyuncu1.h)) {
oyun_bitti();
}else if(ball.x >= Width && (ball.y < oyuncu2.y || ball.y+ball.r > oyuncu2.y+oyuncu2.h)) {
oyun_bitti();
}
ball.x += ball.vx;
ball.y += ball.vy;
}
$(********).ready(function() {
$("canvas").mousemove(function(e) {
oyuncu1.y = e.clientY - 50;
oyuncu2.y = e.clientY - 50;
});
});
function oyna() {
c.clearRect(0,0,Width,Height);
oyuncu1.draw();
oyuncu2.draw();
ball.draw();
hareket();
skor++;
********.getElementById("skor").innerHTML = skor;
}
var init = setInterval(oyna ,10);
