adfly

Senin, 09 Maret 2015

GARIS PELINDUNG

Pada tutorial kali ini kita akan membuat sebuah kerangka game. Cara bermainnya mudah, anda cukup menggambar garis dimana garis ini akan digunakan untuk melindungi bumi dari serangan meteor. Setiap garis yang tertabrak meteor, garis tersebut akan hilang. Gunakan ketrampilan anda dalam menggambar garis agar tidak ada meteor menabrak bumi.
1. Buatlah sebuah flash document dengan ukuran 550×40 dan frame rate 30fps.
2. Buatlah sebuah lingkaran berwarna biru seperti gambar dibawah ini :
bumi
3. Seleksi lingkaran biru yang dibuat kemudian tekan F8. Pada panel yang muncul ketikkan “bumi” tanpa tanda petik dikotak Name, pilih movie clip sebagai typenya, centang Export for ActionScript dan ketikkan “bumi” tanpa tanda petik dikotak identifier lalu tekan ok.
cts1
4. Hapus movie clip bumi yang berada distage.
5. Buatlah sebuah lingkaran berwarna kuning seperti gambar dibawah ini :
meteor
6. Seleksi lingkaran kuning yang dibuat kemudian tekan F8. Pada panel yang muncul ketikkan “meteor” tanpa tanda petik dikotak Name, pilih movie clip sebagai typenya, centang Export for ActionScript dan ketikkan “meteor” tanpa tanda petik dikotak identifier lalu tekan ok.
7. Hapus movie clip meteor yang berada distage.
8. Tekan Ctrl+F8. Pada panel yang muncul ketikkan ketikkan “penampungGaris” tanpa tanda petik dikotak Name, pilih movie clip sebagai typenya, centang Export for ActionScript dan ketikkan “penampungGaris” tanpa tanda petik dikotak identifier lalu tekan ok.
9. Buatlah sebuah dynamic text kosong. Seleksi dynamic text kemudian tekan Ctrl+F3. Pada panel propertiesyang muncul ketikkan “damageStatus” pada kotak instance name.
10. Letakkan dynamic text dipojok kiri atas.
11. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
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
92
93
94
95
96
97
98
99
100
101

//variable yang digunakan saat menggambar
var pointX1, pointY1;
var pointX2, pointY2;
//variable yang digunakan untuk mendeteksi kerusakan yang diterima
var kerusakan:Number = 0;
//variable yang digunakan untuk mendeteksi apakah player boleh menggambar garis atau tidak
var menggambar:Boolean = false;
//variable yang digunakan saat mengubah garis sementara menjadi garis nyata
var ubahGaris:Boolean = false;
//variable yang digunakan sebagai waktu jeda yang dibutukan untuk membuat meteor
var waktuMeteor:Number = 0;
//variable untuk kecepatan gerak meteor
var kecepatanMeteor:Number = 2;
//movie clip kosong untuk menampung garis sementara
_root.createEmptyMovieClip("garisSementara",_root.getNextHighestDepth());
//movie clip kosong untuk menampung meteor
_root.createEmptyMovieClip("penampungMeteor",_root.getNextHighestDepth());
 
 
//fungsi untuk menggambar garis
onMouseDown = function () {
	pointX1 = _xmouse;
	pointY1 = _ymouse;
	menggambar = true;
};
onMouseMove = function () {
	if (menggambar) {
		ubahGaris = true;
		pointX2 = _xmouse;
		pointY2 = _ymouse;
		garisSementara.clear();
		garisSementara.lineStyle(3,0xCCCCCC);
		garisSementara.moveTo(pointX1,pointY1);
		garisSementara.lineTo(pointX2,pointY2);
	}
};
onMouseUp = function () {
	if (ubahGaris) {
		garisSementara.clear();
		garisNyata = attachMovie("penampungGaris", "penampungGaris"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:0, _y:0});
		garisNyata.lineStyle(3,0x000000);
		garisNyata.moveTo(pointX1,pointY1);
		garisNyata.lineTo(pointX2,pointY2);
		garisNyata.onEnterFrame = function() {
			//hapus meteor jika menyentuh garis
			for (var ID in penampungMeteor) {
				if (this.hitTest(penampungMeteor[ID]._x, penampungMeteor[ID]._y, true)) {
					penampungMeteor[ID].removeMovieClip();
					this.removeMovieClip();
				}
			}
		};
		ubahGaris = false;
	}
	menggambar = false;
};
 
 
//fungsi untuk membuat meteor
function buatMeteor(dir) {
	var ID:Number = Math.random();
	//letakan meteor berdasarkan nilai dari variable dir
	if (dir == 1) {
		penampungMeteor.attachMovie("meteor","meteor"+ID,penampungMeteor.getNextHighestDepth(),{_x:Math.floor(Math.random()*Stage.width), _y:-50});
	}
	if (dir == 2) {
		penampungMeteor.attachMovie("meteor","meteor"+ID,penampungMeteor.getNextHighestDepth(),{_x:Stage.width+50, _y:Math.floor(Math.random()*Stage.height)});
	}
	if (dir == 3) {
		penampungMeteor.attachMovie("meteor","meteor"+ID,penampungMeteor.getNextHighestDepth(),{_x:Math.floor(Math.random()*Stage.width), _y:Stage.height+50});
	}
	if (dir == 4) {
		penampungMeteor.attachMovie("meteor","meteor"+ID,penampungMeteor.getNextHighestDepth(),{_x:-50, _y:Math.floor(Math.random()*Stage.height)});
	}
	penampungMeteor["meteor"+ID].onEnterFrame = function() {
		//buat meteor mengarah ke bumi
		this._rotation = Math.atan2(bumi._y-this._y, bumi._x-this._x)*180/Math.PI;
		//buat meteor bergerak ke bumi
		this._x += Math.cos(this._rotation*Math.PI/180)*kecepatanMeteor;
		this._y += Math.sin(this._rotation*Math.PI/180)*kecepatanMeteor;
	};
}
//buat dan letakan bumi ditengah stage
bumi = attachMovie("bumi", "bumi", _root.getNextHighestDepth(), {_x:Stage.width/2, _y:Stage.height/2});
bumi.onEnterFrame = function() {
	//tampilkan total kerusakan pada dynamic text damageStatus
	damageStatus.text = "Damage : "+kerusakan+"%";
	//jalankan fungsi buatMeteor jika waktuMeteor bernilai 40
	waktuMeteor++;
	if (waktuMeteor == 40) {
		buatMeteor(Math.floor(Math.random()*4)+1);
		waktuMeteor = 0;
	}
	//jika meteor menyentuh bumi, tambahkan keruskan dan hapus meteor
	for (var ID in penampungMeteor) {
		if (this.hitTest(penampungMeteor[ID]._x, penampungMeteor[ID]._y, true)) {
			kerusakan++;
			penampungMeteor[ID].removeMovieClip();
		}
	}
};
12. Tekan Ctrl+Enter untuk melihat hasilnya

Klik dan drag mouse untuk menggambar garis.
Lepaskan drag untuk membuat garis menjadi nyata.
Lindungi bumi dari serangan meteor!
Sourcenya dapat di download di sini
Apakah tutorial di atas menarik atau bermanfaat bagi anda? Bantulah Warung Flash agar tetap ada dan memberikan tutorial-tutorial yang lebih bagus dan bermanfaat lagi. Silahkan klik link berikut ini untuk lebih jelasnya : Bantu Warung Flash 
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)