ก                        เกมรถถังออนไลน                        War Tank Online                             โดย        1. ...
ขบทคัดยอ                  เกมรถถังออนไลน                          (War Tank Online จํานวนหนา 62)โดย                    ...
ค                                       กิตติกรรมประกาศ         ทุกสิ่งทุกอยางจะสําเร็จลุลวงไปไดดวยตนเองนั้นเปนไปไดย...
ง                                             คํานํา             ปจจุบันเกมไดเขามามีอิทธิพลตอสังคมไทยเปนอยางมาก ไมว...
จ                                        สารบัญ                                                               หนาใบอนุมัต...
ฉ                                       สารบัญ(ตอ)                                                                       ...
ช                                        สารบัญรูปรูปที่                                                              หนา...
ซ                                     สารบัญรูป(ตอ)รูปที่                                                             หน...
ฌ                                       สารบัญรูป(ตอ)รูปที่                                                  หนา        ...
ญ                                         สารบัญตารางตารางที่                                                         หนา...
บทที่ 1                                             บทนํา1.1 ความเปนมา และความสําคัญของโครงงาน            ปจจุบันอินเทอร...
2        1.3.3 การควบคุมตัวละคร              1.3.3.1 กดปุมลูกศรขึ้น (Up Arrow) คือใหตัวละครเดินไปขางหนา              1...
31.5 แผนการดําเนินงานของโครงงาน         ในการดํ าเนิ นการของระบบงานการจั ดทําโครงงาน จะตองมีก ารศึกษาเทคโนโลยีที่นํามาใช...
41.6.2.5   โปรแกรม Macromedia Dreamweaver CS41.6.2.6   โปรแกรม Adobe Flash CS41.6.2.7   โปรแกรมฐานขอมูล (Oracle 10g)1.6.2...
5                                       บทที่ 2                                    ทฤษฎีที่เกี่ยวของ           เกมออนไลน...
6                        รูปที่ 2.1 ตัวอยางหนาโปรแกรม Adobe Flash CS4    2.1.1 ภาษาแอคชั่นสคริปต (ActionScript)        ...
7              รูปที่ 2.2 ตัวอยางหนาการแสดงโคดของโปรแกรม Adobe Flash CS42.2 เทคโนโลยีการเขียนภาษา PHP            ภาษาคอ...
8สคริปตพีเอชพี ทํางานผาน พีเอชพี พารเซอร (PHP parser) โดยไมตองผานเซิรฟเวอรหรือเบราวเซอร ซึ่งมีลักษณะเหมือนกับ C...
9                พีเอชพียังสามารถรองรับการสื่อสารกับการบริการในโปรโตคอลตางๆ เชน LDAPIMAP SNMP NNTP POP3 HTTP COM (บนวินโ...
10ไดหลายแบบ เชน สําหรับฐานขอมูลขนาดเล็กที่มีผูใชคนเดียว บอยครั้งที่หนาที่ทั้งหมดจะจัดการดว ยโปรแกรมเพี ย งโปรแกรมเ...
11แลกเปลี่ยนขอมูลระหวางเครื่องคอมพิวเตอรที่แตกตางกัน และเนนการแลกเปลี่ยนขอมูลผานอินเทอรเน็ต           คลาส XMLSock...
122.7 โปรแกรม Adobe Dreamweaver CS4          ถือไดวาเปนเครื่องมือสําหรับสรางเว็บเพจ และดูแลเว็บไซต ที่มีประสิทธิภาพสู...
13                                          บทที่ 3                                     การออกแบบระบบ          จากการที่ได...
14                     รูปที่ 3.2 แผนภาพ Flowchart แสดงการสมัครสมาชิก       จากรูปเปนภาพแสดงการทํางานของระบบสมัครสมาชิก ต...
15                      รูปที่ 3.3 แผนภาพ Flowchart แสดงการเขาใชระบบ         จากรูปเปนภาพแสดงการเขาสูระบบ ตองทําการป...
16                    รูปที่ 3.4 แผนภาพ Flowchart แสดงระบบการสรางหอง        จากรูปเปนภาพแสดงระบบการสรางหอง ตรวจสอบเงื...
17                  รูปที่ 3.5 แผนภาพ Flowchart แสดงระบบรวมเลนเกม      จากรูปแสดงระบบการรวมเลนเกม ถาจะทําการรวมเลนเ...
183.2 แผนผังแสดงความสัมพันธ (E-R Diagram)                    รูปที่ 3.7 แผนผังแสดงความสัมพันธ (E-R Diagram)3.3 ตารางฐานข...
19ตารางที่ 3.1 แสดงแฟมสมาชิก  ลําดับ     คุณสมบัติ        คําอธิบาย           ขนาด     ประเภท          คํา     ตรวจสอบควา...
20ชื่อตาราง                  Tank Dataวัตถุประสงค               เก็บรายละเอียดตัวละครที่มการเปลี่ยนแปลง                  ...
21ชื่อตาราง                  สินคา (Item)วัตถุประสงค               เก็บรายละเอียดของสินคาแฟมที่เกี่ยวของ          Sho...
223.4 การออกแบบสวนเชื่อมประสานกับผูใช (User Interface Design)                                                การออกแบบก...
23Code สมัครสมาชิกName สมัครสมาชิก_____________________________________________________________________                   ...
24Code หนาเขาสูระบบName เขาสูการเขาระบบ_____________________________________________________________________        ...
25Code หนาแนะนําตัวละครName เลือกตัวละคร_____________________________________________________________________            ...
26Code หนาสนทนาโตตอบ (Chat)Name Chat_____________________________________________________________________               ...
27Code หนารานคา ShopName Shop_____________________________________________________________________                     ...
28Code หนาสรางหองName สรางหอง_____________________________________________________________________                   ...
29Code หนา Join GameName Join Game_____________________________________________________________________                  ...
30Code หนาภายในฉากName ฉากภายในหองเกม_____________________________________________________________________              ...
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน
Upcoming SlideShare
Loading in …5
×

เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน

2,977 views

Published on

ผลงานนักศึกษาภาควิชาเทคโนโลยีสารสนเทศและการสื่อสาร

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,977
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

เกมส์รถถังออนไลน์ ผลงานนักศึกษามหาวิทยาลัยศรีปทุม บางเขน

  1. 1. ก เกมรถถังออนไลน War Tank Online โดย 1. นายธีระวิทย ชยเมธานนท รหัส 50064023 2. นางสาวสุรีรัตน สิงหชัย รหัส 51040969 โครงงานนี้เปนสวนหนึ่งของการศึกษาตามหลักสูตรวิทยาศาสตรบัณฑิตภาควิชาเทคโนโลยีสารสนเทศและการสื่อสาร คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรีปทุม พ.ศ. 2553
  2. 2. ขบทคัดยอ เกมรถถังออนไลน (War Tank Online จํานวนหนา 62)โดย นายธีระวิทย ชยเมธานนท รหัส 50064023 นางสาวสุรีรัตน สิงหชัย รหัส 51040969อาจารยที่ปรึกษา อาจารยจักรี ปาลกะวงศ ณ อยุธยา โครงงานเกมรถถังออนไลน (War Tank Online) เปนโครงงานที่จัดทําขึ้นเพื่อ จุดประสงคหลักๆ คือ เพื่อศึกษาการใชงานของโปรแกรม Adobe Flash CS4 เพื่อนํามาออกแบบรูปแบบของเกม และการศึกษาการทํางานของภาษาแอคชั่นสคริปต (Action Script) เพื่อควบคุมการทํางานรวมถึงศึกษาการทํางานการสื่อสารขอมูลระหวางคอมพิวเตอรผานทางระบบเครือขาย และระบบอินเทอรเน็ต เกมรถถังออนไลน จัดทําขึ้นเพื่อใหผูเลนเกิดความสนุกสนาน และใหความบันเทิงกับผูเลนรวมถึ ง เพื่ อ เป น กรณี ศึ ก ษาสํ า หรั บ ผู ที่ ต อ งการพั ฒ นาเกมออนไลน ภายในเกมรถถั ง ออนไลนประกอบไปดวยระบบตางๆ เชน ระบบสมัครสมาชิก, ระบบการสรางหองเพื่อจํากัดผูเลน, ระบบซื้ออุปกรณ (Item) และระบบโตตอบออนไลน (Chat) โปรแกรมหลักที่นํามาใชกับเกมรถถังออนไลน ไดแก Adobe Flash CS4 ซึ่งเปนโปรแกรมของบริษัท Adobe เดิมเปนของ Macromedia ซึ่งไดมีการพัฒนาปรับปรุงเครื่องมือตางๆ ใหมีความสามารถ และใชงานไดสะดวกมากขึ้น แฟลชสามารถนํามาใชงานไดหลายรูปแบบเชน ผลิตสื่อการสอนเชิงโตตอบ (Interactive), เกม (Game), งานกราฟฟก และรวมถึงมัลติมีเดียแทบทุกประเภทมาประยุกตใชงานรวมกันไดอยางมีประสิทธิภาพ
  3. 3. ค กิตติกรรมประกาศ ทุกสิ่งทุกอยางจะสําเร็จลุลวงไปไดดวยตนเองนั้นเปนไปไดยาก ดังนั้นจึงตองมีบุคลากรคอยชวยเหลือและแนะนําการดําเนินงาน ผูจัดทําโครงงานขอขอบพระคุณอาจารยจักรี ปาลกะวงศณ อยุธยา ที่ปรึกษาโครงงาน ที่ชวยแนะนําวิธีการดําเนินงานทั้งดานการออกแบบรูปแบบเกม การเขี ย นโปรแกรม และด า นเอกสาร และขอขอบพระคุ ณ อาจารย คณะเทคโนโลยี ส ารสนเทศมหาวิทยาลัยศรีปทุม ทุกทานที่ไดแนะนําโครงงานเกมรถถังออนไลน จึงขอขอบคุณมา ณ ที่นี้ดวย สุดทายนี้ตองขอขอบพระคุณผูที่อยูเบื้องหลัง ที่คอยชวยเหลือการทํางานดานตางๆ ไมวาจะเปนดานการออกแบบรูปแบบเกม การเขียนโปรแกรม และดานเอกสาร ตลอดจนโครงงานนี้สําเร็จลุลวงไปไดดวยดี และขอขอบคุณทุกคนที่ใหกําลังใจในการจัดทําโครงงานนี้ตลอดมา
  4. 4. ง คํานํา ปจจุบันเกมไดเขามามีอิทธิพลตอสังคมไทยเปนอยางมาก ไมวาจะเปนเกมออฟไลน(Offline) หรือออนไลน (Online) นั้นก็ไดรับความนิยมในทุกเพศทุกวัย เพราะฉนั้นสําหรับเกมตางประเทศจึงเกิดการแขงขันทางการตลาดกันมากขึ้นในประเทศไทย จากกระแสดังกลาวจึงไดเกิดนักพัฒนาเกมหนาใหมในประเทศไทยมากขึ้น เพื่อใหเกมสายเลือดไทยไดรับความนิยม และเขาไปแขงขันในตลาดเกมของโลกมากขึ้น ดังนั้นผูจัดทําโครงงานเกมรถถังออนไลน จึงไดจัดทําโครงงานขึ้นเพื่อศึกษาการออกแบบรูปแบบของเกม และโครงสรางการทํางานของเกมออนไลน ทั้งนี้ผูจัดทําโครงงานหวังเปนอยางยิ่งวาเกมรถถังออนไลน จะสามารถสรางความบันเทิงใหกับผูเลนไดบาง และเปนประโยชนตอผูที่มีความสนใจในการพัฒนาเกมออนไลน หรือผูที่สนใจในการสรางเกมดวยโปรแกรมแฟลช (Flash) ไดมาศึกษาเพิ่มเติมพรอมทั้งไดนําแนวทางไปพัฒนาตอยอดใหเกิดประโยชนยิ่งๆ ขึ้นไป หากโครงงานนี้เกิดขอบกพรอง หรือขอผิดพลาดประการใดก็ขอนอมรับสิ่งที่เกิดขึ้นไว ณ ที่น้ดวย ขอบพระคุณ ี นายธีระวิทย ชยเมธานนท นางสาวสุรีรัตน สิงหชัย 11 ตุลาคม 2553
  5. 5. จ สารบัญ หนาใบอนุมัติ กบทคัดยอ ขกิตติกรรมประกาศ คคํานํา งสารบัญ จสารบัญรูป ชสารบัญตาราง ญบทที่ 1 บทนํา 1.1 ความเปนมา และความสําคัญของโครงการ 1 1.2 วัตถุประสงคของโครงการ 1 1.3 ขอบเขตของโครงการ 1 1.4 ประโยชนที่คาดวาจะไดรับ 2 1.5 แผนการดําเนินงานของโครงงาน 3 1.6 อุปกรณ และโปรแกรมที่ใช 3บทที่ 2 ทฤษฎีที่เกี่ยวของ 2.1 แฟลช และภาษาแอคชั่นสคริป (Flash & ActionScript) 5 2.1.1 ภาษาแอคชั่นสคริป (ActionScript) 6 2.2 เทคโนโลยีการเขียนภาษา PHP 7 2.2.1 คุณสมบัติของภาษา PHP 7 2.2.2 การรองรับภาษา PHP 8 2.3 โปรแกรม Appserv 9 2.3.1 กําเนิดโปรแกรม Appserv 9 2.3.2 โครงสรางโปรแกรม Appserv 9 2.4 ระบบจัดการฐานขอมูล 9 2.5 โปรแกรม Adobe Photoshop CS4 10 2.6 โปรแกรม XML Socket 10 2.7 โปรแกรม Adobe Dreamweaver CS4 12 2.7.1 ความสามารถของ Dreamweaver 12
  6. 6. ฉ สารบัญ(ตอ) หนาบทที่ 3 การออกแบบระบบ 3.1 แผนการดําเนินงาน (Flowchart) 13 3.2 แผนผังแสดงความสัมพันธ (E-R Diagram) 18 3.3 ตารางฐานขอมูล (Data Table) 18 3.4 การออกแบบสวนเชื่อมประสานกับผูใช (User Interface Design)  22บทที่ 4 การพัฒนาโปรแกรม 4.1 อุปกรณ และโปรแกรมที่ใช 31 4.2 การทํางานทั้งหมดของโปรแกรม มีวิธการทั้งหมดดังนี้ ี 32 4.3 การใชงานภายในระบบ 34บทที่ 5 สรุปโครงการ 5.1 ปญหา และอุปสรรคในการดําเนินงาน 41 5.2 ขอเสนอแนะเกี่ยวกับโครงการ 41 5.3 สรุปการทําโครงงาน 42บทที่ 6 คูมอการใชงาน ื 6.1 โปรแกรมที่ตองใชในระบบ 43 6.2 วิธีการใชงาน 43บรรณานุกรม 50ภาคผนวก 51ประวัติผูจัดทําโครงงาน 62
  7. 7. ช สารบัญรูปรูปที่ หนา 2.1 ตัวอยางหนาโปรแกรม Adobe Flash CS4 6 2.2 ตัวอยางหนากรแสดงโคดของโปรแกรม Adobe Flash CS4 7 2.3 ตัวอยางการแสดงการทํางานแบบ Multi User โดยใช Socket 11 3.1 แผนภาพ Flowchart ของทั้งระบบ 13 3.2 แผนภาพ Flowchart แสดงการสมัครสมาชิก 14 3.3 แผนภาพ Flowchart แสดงการเขาใชระบบ 15 3.4 แผนภาพ Flowchart แสดงระบบการสรางหอง 16 3.5 แผนภาพ Flowchart แสดงระบบรวมเลนเกม 17 3.6 แผนภาพ Flowchart แสดงระบบรานคา 17 3.7 แผนผังแสดงความสัมพันธ (E-R Diagram) 18 3.8 แสดงตัวอยางหนาหลัก 22 3.9 แสดงตัวอยางหนาสมัครสมาชิก 23 3.10 แสดงตัวอยางหนาเขาระบบ 24 3.11 แสดงตัวอยางหนาเลือกตัวละคร 25 3.12 แสดงตัวอยางหนาสนทนาโตตอบ (Chat) 26 3.13 แสดงตัวอยางหนารานคา (Shop) 27 3.14 แสดงตัวอยางหนาสรางหอง 28 3.15 แสดงตัวอยางหนาขอรวมเลนเกม (Join Game) 29 3.16 แสดงตัวอยางหนาสวนประกอบภายในเกม 30 4.1 แสดงหนาหลัก 34 4.2 แสดงหนาสมัครสมาชิก 35 4.3 แสดงหนายืนยันการสมัครสมาชิก 35 4.4 แสดงหนาเขาใชงานระบบ (Login) 36 4.5 แสดงหนาการยืนยันชื่อผูเ ขาใชระบบ 36 4.6 แสดงหนาการเลือกตัวละคร 37 4.7 แสดงหนาการสนทนา (Chat) 37 4.8 แสดงหนารานคา (Shop) 38 4.9 แสดงหนาการสรางหอง 38 4.10 แสดงหนาขอรวมเลนเกม (Join Game) 39
  8. 8. ซ สารบัญรูป(ตอ)รูปที่ หนา 4.11 แสดงหนาการเลือกฉาก 39 4.12 แสดงหนาภายในเกม 40 6.1 หนาแรกของเกม 43 6.2 หนาสมัครสมาชิก 44 6.3 หนายืนยันการสมัครสมาชิก 44 6.4 หนาเขาใชงานระบบ 45 6.5 หนาการยืนยันชื่อผูเขาใชระบบ 45 6.6 หนาการเลือกตัวละคร 46 6.7 หนาการสนทนา (Chat) 46 6.8 หนารานคา (Shop) 47 6.9 หนาการสรางหอง 47 6.10 หนาขอรวมเลนเกม (Join Game) 48 6.11 หนาการเลือกฉาก (Map) 48 6.12 หนาเลนเกม 49 ก.1 หนาแรกของโปรแกรม Oracle10g 52 ก.2 หนาสาระสําคัญของโปรแกรม Oracle10g 53 ก.3 โปรแกรม Oracle10g ทําการติดตั้ง 53 ก.4 แสดงการตั้งคาโปรแกรม Oracle10g 54 ก.5 แสดงหนาจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม Oracle10g 54 ก.6 หนาการเขาใชโปรแกรม Oracle10g 55 ก.7 การเพิ่มผูใชงานในโปรแกรม Oracle10g 55 ก.8 คัดลอกเอกสารชื่อ Table 56 ก.9 สรางฐานขอมูล 56 ก.10 หนาการดาวนโหลดโปรแกรม Appserv 57 ก.11 ภาพคลิกปุม Next เพื่อไปหนาถัดไป 57 ก.12 หนายืนยันการติดตั้งระบบ 58 ก.13 หนาแสดงการติดตั้งเสร็จสิ้น 58 ก.14 ภาพการเลือกสวนประกอบของ AppServ 59 ก.15 ภาพการระบุรายละเอียดของโปรแกรม 59
  9. 9. ฌ สารบัญรูป(ตอ)รูปที่ หนา ก.16 หนากําหนดรหัสผานเพื่อทําการติดตัง ้ 60 ก.17 แสดงการสิ้นสุดการติดตั้ง 60 ก.18 การตรวจสอบการติดตั้ง 61
  10. 10. ญ สารบัญตารางตารางที่ หนา 1.1 ตารางแสดงแผนดําเนินงาน 3 3.1 แสดงแฟมสมาชิก 19 3.2 แสดงแฟมรายละเอียดตัวละครภายในเกม 19 3.3 แสดงแฟมรายละเอียดตัวละครที่มีการเปลี่ยนแปลง 20 3.4 แสดงแฟมเกี่ยวกับรานคา (Shop) 20 3.5 แสดงแฟมเกี่ยวกับสินคา (Item) 21 4.1 โปรแกรมที่ใชในการพัฒนาโครงงาน 31 4.2 แสดงวิธีการทํางาน 1.0 หนาหลัก 32 4.3 แสดงวิธีการทํางาน 2.0 การสมัครสมาชิก 33 4.4 แสดงวิธีการทํางาน 3.0 การสรางหอง 33 4.5 แสดงวิธการทํางาน 4.0 การรวมเลนเกม (Join Game) ี 33 4.6 แสดงวิธีการทํางาน 5.0 การเลือกฉาก 33 4.7 แสดงวิธีการทํางาน 6.0 รานคา (Shop) 34 4.8 แสดงวิธีการทํางาน 7.0 การสนทนา (Chat) 34
  11. 11. บทที่ 1 บทนํา1.1 ความเปนมา และความสําคัญของโครงงาน ปจจุบันอินเทอรเน็ต (Internet) นั้นไดเขามาเกี่ยวของกับชีวิตประจําวันของเราแทบจะทุกดานไมวาจะเปนในรูปแบบของ ขาวสาร การบันเทิง การติดตอสื่อสาร การประกอบธุรกิจ ดานการศึกษา และการสืบคนขอมูล เพราะในการเขาถึงเครือขายอินเทอรเน็ตในทุกวันนี้ไมใชเรื่องยากเหมือนเมื่อกอน ทําใหมีผูใชบริการอินเทอรเน็ตนั้นมีจํานวนเพิ่มมากขึ้นเรื่อยๆ โดยเฉพาะในกลุมนักเรียน นักศึกษา และในกลุมคนทํางาน โดยสวนใหญชอบที่จะพักผอนหรือใชเวลาวางกับการเลนเกมออนไลนซึ่งกําลังเปนที่นิยมอยางสูงในปจจุบัน เกมออนไลน (online game) หมายถึ ง วิ ดี โ อเกมที่ เ ล น บนเครื อ ข า ยคอมพิ ว เตอรโดยเฉพาะบนอินเทอรเน็ต เกมออนไลนสวนมากจะเปนเกมแบบ MMO (Massive MultiplayerOnline) หรือก็คือเกมหลายผูเลนที่รับจํานวนผูเลนไดมากในพื้นที่ๆ หนึ่ง เกมออนไลนในปจจุบันนี้มีหลายรูปแบบ เชน แบบ 2 มิติ, แบบ 3 มิติ หรือแมแตจะเปนเกมแฟลช (Flash Game) ธรรมดาก็มีใหผูใชบริการอินเทอรเน็ตไดเลือกเลนมากมาย ภายในเนื้อหาของละเกมก็ยอมมีขอแตกตาง และจุดเดนเพื่อที่จะดึงดูดความสนใจของผูเลน ดังนั้นผูจัดทําโครงงานจึงมีแนวคิดที่จะศึกษา และพัฒนาเกมออนไลนในรูปแบบของตนเองขึ้นในโครงงานนี้1.2 วัตถุประสงคของโครงงาน 1.2.1 เพื่อศึกษา และออกแบบการสรางเกมดวยโปรแกรม Adobe Flash CS4 1.2.2 เพื่อศึกษาการสรางเกมออนไลน 1.2.3 เพื่อศึกษาการทํางานของภาษา Action Script 1.2.4 เพื่อศึกษาการสรางเกมออนไลน ทําใหรองรับผูเลนไดจํานวนมาก 1.2.5 เพื่อใหความสนุกสนาน และความบันเทิงกับผูเลน1.3 ขอบเขตของโครงงาน 1.3.1 ผูเลนตองทําการสมัครสมาชิกกอน 1.3.2 มีหนาเขาสูระบบ (Login)
  12. 12. 2 1.3.3 การควบคุมตัวละคร 1.3.3.1 กดปุมลูกศรขึ้น (Up Arrow) คือใหตัวละครเดินไปขางหนา 1.3.3.2 กดปุมลูกศรลง (Down Arrow) คือใหตัวละครถอยหลัง 1.3.3.3 กดปุมลูกศรซาย (Left Arrow) คือใหตัวละครเดินไปทางซาย 1.3.3.4 กดปุมลูกศรขวา (Right Arrow) คือใหตัวละครเดินไปทางขวา 1.3.3.5 กดปุมตัวอักษร D คือใหตัวละครทําการยิง 1.3.3.6 กดปุมตัวเลข 1-9 คือทําการเปลี่ยนอาวุธ 1.3.4 มีตัวละครทั้งหมด 5 ตัวละคร 1.3.5 มีคาสถานะ (Status) 1.3.5.1 คาพลังชีวิต (Hit Point) 1.3.5.2 คาพลังโจมตี (Attack) 1.3.5.3 คาพลังปองกัน (Defend) 1.3.5.4 คาพลังความเร็ว (Speed) 1.3.6 มีระบบสรางหองเพื่อเงื่อนไขในการเขาหอง 1.3.6.1 สามารถจํากัดผูเลนในหองได 1.3.6.2 มียืนยันรหัสผานกอนเขาหอง 1.3.6.3 กําหนดชื่อหองเองได 1.3.7 สามารถเลือกหอง และฉากที่อยูภายในหองได 1.3.8 สามารถซื้ออุปกรณ (Item) เพื่อเพิ่มความสามารถของตัวละครได 1.3.9 มีการกําหนดระยะเวลาในการเลนเปน 180 วินาที ตอเกม 1.3.10 มีไอเท็มในฉากใหผูเลนเก็บเพื่อเพิ่มคุณสมบัติของตัวละคร 1.3.11 มีระบบสนทนาโตตอบ (Chat) ภายในเกม1.4 ประโยชนที่คาดวาจะไดรับ 1.4.1 มีความรูความเขาใจในหลักการสรางเกมขั้นพื้นฐานได 1.4.2 เขาใจหลักการทํางานของระบบเครือขาย (Network) สําหรับสรางเกมออนไลนได 1.4.3 มีความรูความเขาใจ และสามารถใชโปรแกรม Adobe Flash CS4 ในการสรางตัวละครและฉากตางๆได 1.4.4 สามารถเขาใจภาษา ActionScript และสามารถใชในการพัฒนาเกมได 1.4.5 มีความเขาใจ และสามารถเขียนโปรแกรมเพื่อใชสําหรับการติดตอกับฐานขอมูลได
  13. 13. 31.5 แผนการดําเนินงานของโครงงาน ในการดํ าเนิ นการของระบบงานการจั ดทําโครงงาน จะตองมีก ารศึกษาเทคโนโลยีที่นํามาใชในระบบ การเก็บรวบรวมขอมูล การวิเคราะหระบบงาน การออกแบบงาน พรอมทั้งการพัฒนา และทดสอบโปรแกรม รวมถึงการติดตั้งระบบ และการจัดทําเอกสารประกอบการใชงานโดยการดําเนินงานมี ดังตารางที่ 1.1ตารางที่ 1.1 แสดงระยะเวลาที่กําหนดในแผนการดําเนินงาน (Gantt chart) ระยะเวลา ดําเนินงาน พฤษภาคม 2553 กุมภาพันธ 2553 กรกฎาคม 2553 มิถุนายน 2553 สิงหาคม 2553 มีนาคม 25523 กันยายน 2553 มกราคม 2553 เมษายน 2553 กิจกรรม 1.ศึกษาทฤษฎี 2.รวบรวมขอมูล 3.วิเคราะหขอมูล 4.ออกแบบโปรแกรม 5.พัฒนาทดสอบ 5.1 การเขียนโปรแกรม 5.2 การทดสอบยอย 5.3 การทดสอบรวม 6.ทดสอบ และแกไขหมายเหตุ ใชแทนระยะเวลาในการปฏิบัติงาน1.6 อุปกรณ และโปรแกรมที่ใช 1.6.1 สวนของอุปกรณที่ใชในโครงงาน 1.6.1.1 เครื่องคอมพิวเตอร 1.6.1.2 เครื่องพิมพ 1.6.2 สวนของโปรแกรมที่ใชในโครงงาน 1.6.2.1 โปรแกรม Microsoft Window XP 1.6.2.2 โปรแกรม Microsoft Office word 2007 1.6.2.3 โปรแกรม Microsoft Office Visio 2007 1.6.2.4 โปรแกรม Adobe Photoshop CS4
  14. 14. 41.6.2.5 โปรแกรม Macromedia Dreamweaver CS41.6.2.6 โปรแกรม Adobe Flash CS41.6.2.7 โปรแกรมฐานขอมูล (Oracle 10g)1.6.2.8 โปรแกรม XML Socket
  15. 15. 5 บทที่ 2 ทฤษฎีที่เกี่ยวของ เกมออนไลนที่เลนบนเครือขายคอมพิวเตอรโดยเฉพาะบนอินเทอรเน็ตในปจจุบันนี้มีหลายรูปแบบ เชน แบบ 2 มิติ, แบบ 3 มิติ หรือแมแตจะเปนเกมแฟลช (Flash Game) ธรรมดาก็มีใหผูใชบริการอินเทอรเน็ตไดเลือกเลนมากมาย ภายในเนื้อหาของละเกมก็ยอมมีขอแตกตาง และจุดเดนเพื่อที่จะดึงดูดความสนใจของผูเลน โครงงานนี้นําเสนอเกมออนไลนในรูปแบบของเกมแฟลชที่สามารถรองรับหลายผูเลน โดยอาศัยเครื่องมือ และเทคโนโลยีดังตอไปนี้ 1. แฟลช และภาษาแอคชั่นสคริป (Flash & ActionScript) 2. เทคโนโลยีการเขียนภาษา PHP 3. โปรแกรม Appserv 4. ระบบการจัดการฐานขอมูล (Oracle 10g) 5. โปรแกรม Adobe Photoshop CS4 6. โปรแกรม XML Socket 7. โปรแกรม Adobe Dreamweaver CS42.1 แฟลช และภาษาแอคชั่นสคริป (Flash & ActionScript) แฟลช (Flash) เปนโปรแกรมที่มีความสามารถในด านการสรางภาพเคลื่อ นไหว(Animation) ที่ไดรับความนิยมมากที่สุดในปจจุบัน เปนผลิตภัณฑของบริษัท Adobe (เดิมคือMacromedia) ซึ่งไดพัฒนาปรับปรุงเครื่องมือตางๆ ใหมีความสามารถใชงานไดสะดวก สามารถใชผลิตสื่อการสอนเชิงโตตอบ (Interactive), สื่อ Presentation, เกม (Game), แบบทดสอบ, E-Book,Website, Streaming Video, ฐานขอมูล, งานกราฟก และสรางภาพเคลื่อนไหว หรือแมแตภาพยนตรการตูน Animation แฟลช สามารถนําสื่อตางๆ เชน ภาพนิ่ง กราฟก เสียง ภาพยนตร และมัลติมีเดียแทบทุกประเภทมาประยุกตใชงานรวมกันไดอยางมีประสิทธิภาพ โดยสามารถควบคุมการทํางานแบบพื้นฐานจนไปถึงการเขียนคําสั่งควบคุม (Action Script) ใหโปรแกรมแฟลช แสดงผลตามที่เราตองการ โดยเห็นไดชัดจากเว็บไซตในปจจุบันแทบทุกเว็บไซตจะนําแฟลชเขามาเปนสวนหนึ่งในการเพิ่มความนาสนใจ ดูทันสมัย รวมทั้งจัดการดานขอมูลมัลติมีเดีย
  16. 16. 6 รูปที่ 2.1 ตัวอยางหนาโปรแกรม Adobe Flash CS4 2.1.1 ภาษาแอคชั่นสคริปต (ActionScript) ภาษาแอคชั่นสคริปต เปนภาษาแบบ Script Language มีลักษณะในเชิงออบเจ็ค (Object-Oriented Programming language) เหมือนกับ Java Script ซึ่งจัดเปนมาตรฐานเดียวกันเรียกวาEuropean Computers Manufacturers Assocciantion (ECMA) ที่ใชในโปรแกรมแฟลชเปนภาษาในการเพิ่มความสามารถในเชิงโตตอบ (Interactive) ใชกับการแสดงผลสิ่งที่แอคชั่นสคริปตทําได เชนควบคุมหัวอานเฟรมของมูฟวี่, สรางเว็บไซตเชิงโตตอบกับผูใช, เกม, การเพิ่มเทคนิคพิเศษใหกับการเคลื่อนไหว, การติดตอฐานขอมูล, รวมไปถึงการสรางระบบ Chat แบบ Real-time หรือMiltiplayer Online Game ภาษาแอคชั่ น สคริ ป ต มี ลั ก ษณะภาษาเชิ ง ออบเจ็ค ที่ มีก ารจั ด แบ ง สว นของโปรแกรมออกเปนสวนๆ ทํางานอิสระจากกัน ซึ่งจะมีตนแบบที่เรียกวาคลาส (Class) สิ่งที่สรางจากตนแบบจะเรียกวาออบเจ็ค (Object หรือ Instance) ซึ่งในคลาสจะประกอบไปดวย พร็อพเพอรตี้ (Property)หรือคุณสมบัติ และเมธอด (Mathod) เปนความสามารถของการทํางาน ออบเจ็คที่ถูกสรางจากคลาสเดียวกัน ก็จะมีคุณสมบัติ และความสามารถในการทํางานทุกอยางเหมือนๆ กัน แตทํางานเปนอิสระตอกัน
  17. 17. 7 รูปที่ 2.2 ตัวอยางหนาการแสดงโคดของโปรแกรม Adobe Flash CS42.2 เทคโนโลยีการเขียนภาษา PHP ภาษาคอมพิวเตอรในลักษณะเซิรฟเวอร-ไซด สคริปต คือเปนเทคโนโลยีที่สคริปตทํางานฝงเครื่องแมขาย โดยลิขสิทธิ์อยูในลักษณะโอเพนซอรส ภาษาพีเอชพีใชสําหรับจัดทําเว็บไซต และแสดงผลออกมาในรูปแบบ HTML โดยมีรากฐานโครงสรางคําสั่งมาจากภาษา ภาษาซี ภาษาจาวาและ ภาษาเพิรล ซึ่ง ภาษาพีเอชพี นั้นงายตอการเรียนรู ซึ่งเปาหมายหลักของภาษานี้ คือใหนักพัฒนาเว็บไซตสามารถเขียน เว็บเพจ ที่มีความตอบโตไดอยางรวดเร็ว ภาษาพีเอชพี ในชื่อภาษาอังกฤษวา PHP ซึ่งใชเปนคํายอแบบกลาวซ้ํา จากคําวา PHPHypertext Preprocessor หรือชื่อเดิม Personal Home Page โครงสรางของภาษาพีเอชพี จะเปนสวนประกอบภายในเว็บเพจ โดยจะคําสั่งในรูปแบบ<?php ... ?> แทรกเขาไปในสวนที่ตองการของเว็บเพ็จและสกุลไฟลเปน .PHP 2.2.1 คุณสมบัติของภาษา PHP การแสดงผลของพีเอชพี จะปรากฏในลักษณะ HTML ซึ่งจะไมแสดงคําสั่งที่ผูใชเขียน ซึ่งเปนลักษณะเดนที่พีเอชพีแตกตางจากภาษาในลักษณะไคลเอนต-ไซด สคริปต เชน ภาษาจาวาสคริปต ที่ผูชมเว็บไซตสามารถอาน ดู และคัดลอกคําสั่งไปใชเองได นอกจากนี้พีเอชพียังเปนภาษาที่เรียนรูและเริ่มตนไดไมยาก โดยมีเครื่องมือชวยเหลือ และคูมือที่สามารถหาอานไดฟรีบนอินเทอรเน็ต ความสามารถการประมวลผลหลักของพีเอชพี ไดแก การสรางเนื้อหาอัตโนมัติจัดการคําสั่ง การอานขอมูลจากผูใช และประมวลผล การอานขอมูลจากดาตาเบส ความสามารถจัดการกับคุกกี้ ซึ่งทํางานเชนเดียวกับโปรแกรมในลักษณะ CGI (Common Gateway Interface) คุณสมบัติอื่นเชน การประมวลผลตามบรรทัดคําสั่ง (command line scripting) ทําใหผูเขียนโปรแกรมสราง
  18. 18. 8สคริปตพีเอชพี ทํางานผาน พีเอชพี พารเซอร (PHP parser) โดยไมตองผานเซิรฟเวอรหรือเบราวเซอร ซึ่งมีลักษณะเหมือนกับ Cron (ใน ยูนิกซหรือลีนุกซ) หรือ Task Scheduler (ในวินโดวส) สคริปตเหลานี้สามารถนําไปใชในแบบ Simple text processing tasks ได การแสดงผลของพีเอชพี ถึงแมวาจุดประสงคหลักใชในการแสดงผล HTML แตยังสามารถสราง XHTML หรือ XML ได นอกจากนี้สามารถทํางานรวมกับคําสั่งเสริมตางๆ ซึ่งสามารถแสดงผลขอมูลหลัก PDF แฟลช (โดยใช libswf และ Ming) พีเอชพีมีความสามารถอยางมากในการทํางานเปนประมวลผลขอความ จาก POSIX Extended หรือ รูปแบบ Perl ทั่วไป เพื่อแปลงเปนเอกสาร XML ในการแปลง และเขาสูเอกสาร XML เรารองรับมาตราฐาน SAX (SimpleAPI for XML) และ DOM (Document Object Model) สามารถใชรูปแบบ XSLT ของเราเพื่อแปลงเอกสาร XML เมื่อใชพีเอชพีในการทําอีคอมเมิรซ สามารถทํางานรวมกับโปรแกรมอื่น เชนCybercash payment, CyberMUT, VeriSign Payflow Pro และ CCVS functions เพื่อใชในการสรางโปรแกรมทําธุรกรรมทางการเงิน 2.2.2 การรองรับภาษาพีเอชพี คําสั่งของพีเอชพี สามารถสรางผานทางโปรแกรมแกไขขอความทั่วไป เชน โนตแพด หรือ vi ซึ่งทําใหการทํางานพีเอชพี สามารถทํางานไดในระบบปฏิบัติการหลักเกือบทั้งหมดโดยเมื่อเขียนคําสั่งแลวนํามาประมวลผล Apache, Microsoft Internet Information Services (IIS) ,Personal Web Server, Netscape และ iPlanet servers, Oreilly Website Pro server, Caudium,Xitami, OmniHTTPd และอื่นๆ อีกมากมาย สําหรับสวนหลักของ PHP ยังมีรูปแบบในการรองรับCGI มาตรฐาน ซึ่ง PHP สามารถทํางานเปนตัวประมวลผล CGI ดวย และดวย PHP คุณมีอิสรภาพในการเลือก ระบบปฏิบัติการ และเว็บเซิรฟเวอร นอกจากนี้คุณยังสามารถใชสรางโปรแกรมโครงสราง สรางโปรแกรมเชิงวัตถุ (OOP) หรือสรางโปรแกรมที่รวมทั้งสองอยางเขาดวยกัน แมวาความสามารถของคําสั่ง OOP มาตรฐานในเวอรชันนี้ยังไมสมบูรณ แตตัวไลบรารีทั้งหลายของโปรแกรม และตัวโปรแกรมประยุกต (รวมถึง PEAR library) ไดถูกเขียนขึ้นโดยใชรูปแบบการเขียนแบบ OOP เทานั้น พีเอชพีสามารถทํางานรวมกับฐานขอมูลไดหลายชนิด ซึ่งฐานขอมูลสวนหนึ่งที่รองรับไดแก Oracle, dBase, PostgreSQL, IBM DB2, MySQL, Informix ODBC โครงสรางของฐานขอมูลแบบ DBX ซึ่งทําใหพีเอชพีใชกับฐานขอมูลอะไรก็ไดที่รองรับรูปแบบนี้ และ PHP ยังรองรับ ODBC (Open Database Connection) ซึ่งเปนมาตรฐานการเชื่อมตอฐานขอมูลที่ใชกันแพรหลายอีกดวย คุณสามารถเชื่อมตอกับฐานขอมูลตางๆ ที่รองรับมาตรฐานโลกนี้ได
  19. 19. 9 พีเอชพียังสามารถรองรับการสื่อสารกับการบริการในโปรโตคอลตางๆ เชน LDAPIMAP SNMP NNTP POP3 HTTP COM (บนวินโดวส) และอื่นๆ อีกมากมาย คุณสามารถเปดSocket บนเครื่อขายโดยตรง และ ตอบโตโดยใช โปรโตคอลใดๆ ก็ได PHP มีการรองรับสําหรับการแลกเปลี่ยนขอมูลแบบ WDDX Complex กับ Web Programming อื่นๆ ทั่วไปได พูดถึงในสวนInterconnection, พีเอชพีมีการรองรับสําหรับ Java objects ใหเปลี่ยนมันเปน PHP Object แลวใชงาน คุณยังสามารถใชรูปแบบ CORBA เพื่อเขาสู Remote Object ไดเชนกัน2.3 โปรแกรม Appserv เปนโปรแกรมเพื่อจําลองเครื่องคอมพิวเตอรของผูใชใหเปน Server ชั่วคราว และเก็บขอมูลตางๆ เปนโปรแกรม รวม apache, mysql, php ไวดวยกัน โดยสงตอใหเครื่องในลูกขาย(Clients) ไดนาขอมูลไปใชตอไป ํ โปรแกรม Appserv มีโครงสรางที่ไมซับซอน ชวยใหผพัฒนา Webpage สามารถสราง ูและ กําหนดวิธีการควบคุมดูแลโปรแกรมนั้นไดอยางสะดวกสบาย 2.3.1 กําเนิดโปรแกรม AppServ สําหรับโปรแกรม Appserv ไมไดเกิดการสนับสนุนจากหนวยงานของรัฐบาล หรือหนวยงานองคกรใดๆ ทั้งสิ้น กําเนิดจาก แรงบันดาลใจจากเพื่อนของผูพัฒนาที่ไดเริ่มการศึกษาภาษา PHP และฐานขอมูล MYSQL และมีปญหาทุกครั้งในการติดตั้ง จึงทําใหผูพัฒนาไดสรางโปรแกรมที่ สะดวกในการติดตั้งเพื่อใหเพื่อนของผูพัฒนาสามารถนําไปใชไ ดทันที ชวงแรกที่แจกจายนั่น ผูพัฒนาไดแจกจายในเว็บไซตที่เปนภาษาอังกฤษ ผูใชงานตางประเทศจึงใหความสนใจ 2.3.2 โครงสรางโปรแกรม Appserv Appserv คือโปรแกรมที่รวบรวมเอา Open Source Software หลายอยางมารวมกันมี Package หลักดังนี้ Apache, PHP, MySQL, PHPMyadmin โปรแกรมตางๆที่นํามารวบรวมไวทั้งหมดนี้ ไดทําการดาวนโหลดจาก Official Release ทั้งสิ้น โดยตัว Appserv จึงใหความสําคัญวาทุกสิ่งทุกอยางจะตองใหเหมือนกับตนฉบับ จึงไมไดตัดทอนหรือเพิ่มเติมอะไรที่แปลกไปกวาOfficial Release แตอาจจะเพิ่มประสิทธิภาพการติดตั้งใหสอดคลองกับการทํางานแตละคน2.4 ระบบจัดการฐานขอมูล โปรแกรมสําหรับจัดการฐานขอมูลนั้น โดยทั่วไปเรียกวา ระบบจัดการฐานขอมูลหรือ ดีบีเอ็มเอส DBMS (Database Management System) สถาปตยกรรมซอฟตแวรของดีบีเอ็มเอสอาจมี
  20. 20. 10ไดหลายแบบ เชน สําหรับฐานขอมูลขนาดเล็กที่มีผูใชคนเดียว บอยครั้งที่หนาที่ทั้งหมดจะจัดการดว ยโปรแกรมเพี ย งโปรแกรมเดี ย ว ส ว นฐานขอมูล ขนาดใหญที่มีผูใ ชจํา นวนมากนั้น ปกติจ ะประกอบดวยโปรแกรมหลายโปรแกรมดวยกัน และโดยทั่วไปสวนใหญจะใชสถาปตยกรรมแบบรับ-ใหบริการ (client-server) โปรแกรมสวนหนา (front-end) ของดีบีเอ็มเอส (ไดแก โปรแกรมรับบริการ) จะเกี่ยวของเฉพาะการนําเขาขอมูล, การตรวจสอบ, และการรายงานผลเปนสําคัญ ในขณะที่โปรแกรมสวนหลัง(back-end) ซึ่งไดแก โปรแกรมใหบริการ จะเปนชุดของโปรแกรมที่ดําเนินการเกี่ยวกับการควบคุม,การเก็บขอมูล, และการตอบสนองการรองขอจากโปรแกรมสวนหนา โดยปกติแลวการคนหา และการเรียงลําดับ จะดําเนินการโดยโปรแกรมใหบริการ รูปแบบของระบบฐานขอมูล มีหลากหลายรู ป แบบด ว ยกั น นั บ ตั้ ง แต ก ารใช ต ารางอย า งง า ย ที่ เ ก็ บ ในแฟ ม ข อ มู ล แฟ ม เดี ย ว ไปจนกระทั่ งฐานขอมูลขนาดใหญมาก ที่มีระเบียนหลายลานระเบียน ซึ่งเก็บในหองที่เต็มไปดวยดิสกไดรฟ หรืออุปกรณหนวยเก็บขอมูลอิเล็กทรอนิกสรอบขาง (peripheral) อื่น ๆ2.5 โปรแกรม Adobe Photoshop CS4 Adobe Photoshop CS4 (Creative Suit 4) เปนเวอรชั่นเวอรชั่นลาสุดของโปรแกรมPhotoshop ซึ่งเปนโปรแกรมที่ใชสําหรับการจัดการเกี่ยวกับภาพหรืองานกราฟฟกที่ตองการความละเอียดสูง เปนผลิตภัณฑของบริษัท Adobe โปรแกรมนี้เปนโปรแกรมกราฟฟกที่มีความสามารถในการแกไขภาพ ตกแตงภาพ และอื่นๆ อีกมากมาย อีกทั้งสามารถมี Plug-in ที่สามารถไปหาDownload มาเสริมโปรแกรมของเราได เพื่อเพิ่มความสามารถของโปรมแกรมไดอีก Photoshopจัดระบบความละเอียดของงานเปนแบบ Rester Graphic ก็คือภาพที่อยูในโปรมแกรมนั้นจะแบงความละเอียดของภาพออกเปนตารางสี่เหลี่ยมลายหมากรุกซึ่งในแตละชองหรือแตละตารางนั้นจะเรียกวา Pixel ซึ่งความละเอียดของงานจะสัมพันธในเชิงผกผันกับขนาดของการแสดงผลทางหนาจอ2.6 โปรแกรม XML Socket XML ยอมาจาก Extensible Markup Language ซึ่งเปนภาษามารกอัปสําหรับการใชงานทั่วไป พัฒนาโดย W3C โดยมีจุดประสงคเพื่อเปนสิ่งที่เอาไวติดตอกันในระบบที่มีความแตกตางกัน(เชนใชคอมพิวเตอรม่มระบบปฏิบัติการคนละตัว หรืออาจจะเปนคนละโปรแกรมประยุกตที่มีความ ี ีตองการสื่อสารขอมูลถึงกัน) นอกจากนี้ยังเพื่อเปนพื้นฐานในการสรางภาษามารกอัปเฉพาะทางอีกขั้นหนึ่ง XML พัฒนามาจาก SGML โดยดัดแปลงใหมีความซับซอนลดนอยลง XML ใชใน
  21. 21. 11แลกเปลี่ยนขอมูลระหวางเครื่องคอมพิวเตอรที่แตกตางกัน และเนนการแลกเปลี่ยนขอมูลผานอินเทอรเน็ต คลาส XMLSocket เปนคลาสที่ทําใหเราสามารถใชแฟลช Flash สรางการติดตอสื่อสารผาน Socket ไดโดย Flash ไดกําหนดใหรูปแบบขอมูลที่สื่อสารผานกันระหวางเครื่องลูกขาย(Client) กับเครื่องแมขาย (Serve)r นี้อยูในรูปแบบ XML ขอมูลที่เราจะสงเขาหรือออก ก็ควรจะถูกจัดใหอยูในรูปแบบ XML กอน แลวสงผานชองทางแบบ TCP (Transmission Control Protocol) ซึ่งจะมีการสงขอมูลผานทางพอรต (Port) ที่กําหนดโดยตรง ซึ่งจะมีขอดีคือ มีการทํางานแบบ Real-time รูปที่ 2.3 ตัวอยางแสดงการทํางานแบบ Multi-user โดยใช Socket จากภาพที่แสดงจะเห็นวาการสื่อสารผานตําแหนงที่มีไวติดตั้งกับหนวยประมวลผลกลาง(Socket) นั้นเมื่อเครื่องลูกขาย หนึ่งสงขอมูลไปยังเครื่องแมขาย และตั้งเครื่องแมขายเองจะทําหนาที่กระจายขอมูลที่เพิ่งไดรับเขามาสงไปใหเครื่องลูกขายทุกตัวในระบบ ซึ่งรวมถึงเครื่องลูกขายที่เปนผูสงดวยเชนกัน ทําใหการทํางานเพื่อกระตุนใหไดขอมูลใหมไมไดเกิดจากเครื่องลูกขายเพียงตัวเดียว และยังทําใหเมื่อมีขอมูลใหมเขามาเครื่องลูกขายตัวอื่นๆ ก็จะไดขอมูลนั้นในเวลาเกือบพรอมๆกัน
  22. 22. 122.7 โปรแกรม Adobe Dreamweaver CS4 ถือไดวาเปนเครื่องมือสําหรับสรางเว็บเพจ และดูแลเว็บไซต ที่มีประสิทธิภาพสูงเปนที่นิยมของผูดูแลเว็บอยางกวางขวาง ซึ่งเปนโปรแกรมสําหรับเขียน HTML โดยเฉพาะพรอมทั้งสามารถแทรก Java Script และลูกเลนตางๆ ไดมากมาย โดยที่ผูใชไมจําเปนตองรูหลักภาษา HTMLมากนัก ซึ่งชวยประหยัดเวลา และการทํางานไดสะดวกยิ่งขึ้น 2.7.1 ความสามารถของ Dreamweaver 2.7.1.1 สนับสนุนการทํางานแบบ ( What you see is. What you get.) หมายความวา เว็บที่เราเขียนลงหนาจอ Dreamweaver ก็จะแสดงแบบเดียวกันกับเว็บเพจจริงๆ จึงชวยใหเราเขียนเว็บเพจงายขึ้น 2.7.1.2 มีเครื่องมือในการชวยสรางเว็บเพจที่มีความยืดหยุนสูง 2.7.1.3 สนับสนุนภาษาสคริปตตางๆ ทั้งฝงผูใชบริการ และผูใหบริการ เชน ASP,Java 2.7.1.4 มีเครื่องมือในการบรรจุลงหนาเว็บเพจไปที่เครื่องผูใหบริการ เพื่อทําการเผยแพรงานที่สรางไปยังระบบอินเทอรเน็ต โดยทําการสงผาน FTP (File Transfer Protocal)
  23. 23. 13 บทที่ 3 การออกแบบระบบ จากการที่ไดศึกษาระบบเกม โดยจะกลาวถึงในสวนออกแบบดวยระบบคอมพิวเตอรสําหรับการดําเนินการออกแบบเปนขั้นตอนหนึ่งที่สําคัญมากในการพัฒนาระบบ เพราะจะตองทราบถึงวัถตุประสงคของผูใชวา ตองการออกแบบรูปแบบใด มีปญหา และอุปสรรคอะไรที่ตองทําการแกไข และรวมถึงทําการปรับปรุงใหดีขึ้น เพื่อนําไปวิเคราะห และออกแบบใหมีประสิทธิภาพมากขึ้น โดยจะมีรายละเอียดตางๆ ที่เกี่ยวของกับการดําเนินงานดังนี้3.1 แผนการดําเนินงาน (Flowchart) รูปที่ 3.1 แผนภาพ Flowchart ของทั้งระบบ จากรูปเปนแผนภาพแสดงการทํางานทั้งระบบของเกม เมือเขาสูหนาแรกของเกมจะแสดง ่ตัวเลือกใหผูใชงานระบบเลือกวา จะทําการสมัครสมาชิกเพื่อเขาระบบ หรือผูที่เคยทําการสมัครสมาชิกแลวก็สามารถทําการเขาสูระบบ (Login) เขาใชงาตอไป ดังรูปที่ 3.1
  24. 24. 14 รูปที่ 3.2 แผนภาพ Flowchart แสดงการสมัครสมาชิก จากรูปเปนภาพแสดงการทํางานของระบบสมัครสมาชิก ตรวจสอบเงื่อนใขวาตองการสมัครสมาชิกหรือไม ถาตองการสมัครสมาชิกใหทําการกรอกขอมูลสวนตัว เชน ชื่อผูใช, รหัสผาน,จดหมายอิเล็กทรอนิกสเปนตน เพื่อทําการลงทะเบียนเขาใชงานระบบตอไป ดังรูปที่ 3.2
  25. 25. 15 รูปที่ 3.3 แผนภาพ Flowchart แสดงการเขาใชระบบ จากรูปเปนภาพแสดงการเขาสูระบบ ตองทําการปอนชื่อผูใช และรหัสผานที่ทําการลงทะเบียนสมัครสมาชิกไวแลว จากนั้นระบบจะทําการตรวจสอบชื่อผูใช และรหัสผานเพื่อทําการยืนยันเขาระบบ ถาชื่อผูใช และรหัสผานไมตองระบบจะทําการแจงเตือนเพื่อใหทําการปอนขอมูลใหมอีกครั้ง ดังรูปที่ 3.3
  26. 26. 16 รูปที่ 3.4 แผนภาพ Flowchart แสดงระบบการสรางหอง จากรูปเปนภาพแสดงระบบการสรางหอง ตรวจสอบเงื่อนใขการสรางหอง ถาตองการสรางใหมใหทําการ สรางชื่อหอง และกําหนดรหัสผานเสร็จแลวทําการเลือกฉากเพื่อทําการเริ่มเลนเกมตอไป แตถาไมตองจะสรางหองกอสามารถเขาสูระบบรวมเลนเกม (Join Game ) หรือถายังไมตองการเลือกฉาก ก็สามารถเขาสูระบบรานคา (Item) หรือ (Shop) ดังรูปที่ 3.4
  27. 27. 17 รูปที่ 3.5 แผนภาพ Flowchart แสดงระบบรวมเลนเกม จากรูปแสดงระบบการรวมเลนเกม ถาจะทําการรวมเลนเกมตองยืนรหัสผานกอน เพื่อตรวจสอบวา รหัสตรงกับชื่อหองที่ตองการรวมเลนหรือไม ดังรูปที่ 3.5 รูปที่ 3.6 แผนภาพ Flowchart แสดงระบบรานคา
  28. 28. 183.2 แผนผังแสดงความสัมพันธ (E-R Diagram) รูปที่ 3.7 แผนผังแสดงความสัมพันธ (E-R Diagram)3.3 ตารางฐานขอมูล (Data Table) ตารางฐานขอมูลของระบบเกม เปนตารางแสดงการรวมกลุมของ คุณสมบัติในฐานขอมูลหรือแฟมชื่อของตาราง ๆ ดังนี้ชื่อตาราง สมาชิกวัตถุประสงค เก็บรายละเอียดของสมาชิกแฟมที่เกี่ยวของ Tank Data
  29. 29. 19ตารางที่ 3.1 แสดงแฟมสมาชิก ลําดับ คุณสมบัติ คําอธิบาย ขนาด ประเภท คํา ตรวจสอบความถูก ประเภท(Sequence (Attribute) (Description) (Width) (Type) เบื้องตน ตอง(Validation คีย(Key No.) (Default) Check) Type) 1 ID_Member รหัสสมาชิก 10 number - ตัวเลขเทานั้น PK ,FK 2 Password รหัสผาน 10 varchar2 - ตัวลขเทานัน ้ - 3 Email อีเมล 20 varchar2 - - - 4 Money เงิน 10 number - - - 5 Firsttime วันที่เริ่มสมัคร 10 number - - - 6 Lasttime ครั้งสุดทายที่เขา 10 number - - - ระบบชื่อตาราง Characterวัตถุประสงค เก็บรายละเอียดตัวละครแฟมที่เกี่ยวของ Tank Dataตารางที่ 3.2 แสดงแฟมรายละเอียดตัวละครภายในเกม ลําดับ คุณสมบัติ คําอธิบาย ขนาด ประเภท คํา ตรวจสอบความถูก ประเภท(Sequence (Attribute) (Description) (Width) (Type) เบื้องตน ตอง(Validation คีย(Key No.) (Default) Check) Type) 1 ID_Charac รหัสตัวละคร 10 number - ตัวเลขเทานั้น PK ,FK 2 Characname ชื่อตัวละคร 10 varchar2 - - - 3 HP คาพลังชีวิต 20 number - - - 4 AT คาพลังโจมตี 10 number - - - 5 DF คาพลังปองกัน 10 number - - - 6 SF คาพลังความเร็ว 10 number - - - 7 Price ราคา 10 number - - -
  30. 30. 20ชื่อตาราง Tank Dataวัตถุประสงค เก็บรายละเอียดตัวละครที่มการเปลี่ยนแปลง ีแฟมที่เกี่ยวของ Member, Characterตารางที่ 3.3 แสดงแฟมรายละเอียดตัวละครที่มีการเปลี่ยนแปลง ลําดับ คุณสมบัติ คําอธิบาย ขนาด ประเภท คํา ตรวจสอบความถูก ประเภท(Sequence (Attribute) (Description) (Width) (Type) เบื้องตน ตอง(Validation คีย(Key No.) (Default) Check) Type) 1 ID_Tankda รหัสขอมูล 10 number - ตัวเลขเทานั้น PK 2 ID_Charac รหัสตัวละคร 10 varchar2 - - FK1 3 ID_Member ชื่อสมาชิก 10 number - - FK2 4 HP คาพลังชีวิต 10 number - - - 5 AT คาพลังโจมตี 10 number - - - 6 DF คาพลังปองกัน 10 number - - - 7 SF คาพลังความเร็ว 10 number - - - 8 EXP คาประสบการณ 10 number - - -ชื่อตาราง รานคา (shop)วัตถุประสงค เก็บรายละเอียดรานคาแฟมที่เกี่ยวของ Tank Dataตารางที่ 3.4 แสดงแฟมเกียวกับรานคา ่ ลําดับ คุณสมบัติ คําอธิบาย ขนาด ประเภท คํา ตรวจสอบความถูก ประเภท(Sequence (Attribute) (Description) (Width) (Type) เบื้องตน ตอง(Validation คีย(Key No.) (Default) Check) Type) 1 ID_Shop รหัสรานคา 10 number - ตัวเลขเทานั้น PK 2 ID_Member รหัสสมาชิก 10 number - ตัวเลขเทานั้น FK1 3 ID_Item รหัสสินคา 10 number - ตัวเลขเทานั้น FK2
  31. 31. 21ชื่อตาราง สินคา (Item)วัตถุประสงค เก็บรายละเอียดของสินคาแฟมที่เกี่ยวของ Shop, Memberตารางที่ 3.5 แสดงแฟมเกียวกับสินคา ่ ลําดับ คุณสมบัติ คําอธิบาย ขนาด ประเภท คํา ตรวจสอบความถูก ประเภท(Sequence (Attribute) (Description) (Width) (Type) เบื้องตน ตอง(Validation คีย(Key No.) (Default) Check) Type) 1 ID_Item รหัสสินคา 10 number - ตัวเลขเทานั้น PK 2 Itemname ชื่อสินคา 10 number - ตัวเลขเทานั้น 3 Price ราคาสินคา 10 number - ตัวเลขเทานั้น
  32. 32. 223.4 การออกแบบสวนเชื่อมประสานกับผูใช (User Interface Design)  การออกแบบการเชื่ อ มประสานกั บ ผู ใ ช ง าน คื อ การออกแบบส ว นของระบบเกมที่เกี่ยวของกับการมองเห็น การไดยิน หรือการสัมผัสกับผูใช โดยสวนนี้สรางขึ้นเพื่อแสดงขอมูลที่สามารถติดตอกับผูใช ดังรูปที่ 3.8Code HomeName หนาหลัก_____________________________________________________________________ War Tank Online รูปภาพ สมัครสมาชิก เริ่มเกมเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action ชึ้เมาสไปที่ปุมตัวเลือกแลวจะเปลี่ยนสีเชื่อมตอ ใชปุมเชื่อมตอไปยังหนาตางๆ รูปที่ 3.8 แสดงตัวอยางหนาหลัก
  33. 33. 23Code สมัครสมาชิกName สมัครสมาชิก_____________________________________________________________________ War Tank Online หนาสมัครสมาชิก ยืนยันเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุมยืนยันระบบจะทําการจัดเก็บขอมูลเชื่อมตอ ใชปุมเชื่อมตอไปยังหนาตางๆ รูปที่ 3.9 แสดงตัวอยางหนาสมัครสมาชิก
  34. 34. 24Code หนาเขาสูระบบName เขาสูการเขาระบบ_____________________________________________________________________ War Tank Online หนา Login เขาสูระบบ ยืนยันเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุมยืนยัน จะเปนการเขาระบบเชื่อมตอ ใชปุมเชื่อมตอไปยังหนาตางๆ รูปที่ 3.10 แสดงตัวอยางหนาเขาระบบ
  35. 35. 25Code หนาแนะนําตัวละครName เลือกตัวละคร_____________________________________________________________________ War Tank Online Selectเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อใชเมาสเลื่อนไปที่ปุมจะแสดง สถานะการเลือกตัวละครเชื่อมตอ ใชปุม Select เพื่อยืนยันการเลือก และเชื่อมไปยังหนาอืน ่ รูปที่ 3.11 แสดงตัวอยางหนาเลือกตัวละคร
  36. 36. 26Code หนาสนทนาโตตอบ (Chat)Name Chat_____________________________________________________________________ War Tank Online SHOP NEW EXIT แสดงชื่อผูที่อยูในระบบ Chat พื้นที่สําหรับพิมพขอความ Sendเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อกดปุม Send เพื่อสงขอความเชื่อมตอ ใชปุม Exit เพือออกจากหนานี้ ่ รูปที่ 3.12 แสดงตัวอยางหนา Chat
  37. 37. 27Code หนารานคา ShopName Shop_____________________________________________________________________ War Tank Online SHOP Item ที่ซื้อ Update HP + Update DF+ Update SP+ Update AT+ BOMR จํานวนเงินคงเหลือ Exitเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อคลิกที่ปุม Item จํานวนเงินจะลดลงเชื่อมตอ ใชปุม Exit เพือออกจากหนานี้ ่ รูปที่ 3.13 แสดงตัวอยางหนา Shop
  38. 38. 28Code หนาสรางหองName สรางหอง_____________________________________________________________________ War Tank Online SHOP NEW EXIT Game Name Password แสดงชื่อผูที่อยูในระบบ Chat CANCEL OK พื้นที่สําหรับพิมพขอความ Sendเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อคลิกปุม New เพื่อสรางหองเชื่อมตอ ใชปุม Exit เพือออกจากหนานี้ ่ รูปที่ 3.14 แสดงตัวอยางหนาสรางหอง
  39. 39. 29Code หนา Join GameName Join Game_____________________________________________________________________ War Tank Online SHOP NEW EXIT Password for Room แสดงชื่อผูที่อยูในระบบ Password Chat CANCEL OK ชื่อหอง พื้นที่สําหรับพิมพขอความ Sendเสียง ไมมีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action เมื่อคลิกที่ชื่อหองก็สามารถ Join Game ไดเชื่อมตอ ใชปุม Exit เพือออกจากหนานี้ ่ รูปที่ 3.15 แสดงตัวอยางหนา Join Game
  40. 40. 30Code หนาภายในฉากName ฉากภายในหองเกม_____________________________________________________________________ War Tank Onlineเสียง มีรูปภาพ มีวีดีโอ ไมมีภาพเคลื่อนไหว มีProcess / Action ใชคียบอรดในการควบคุมตัวละครเชื่อมตอ กดปุม Spacebar เพื่อเขาสูระบบ Chat รูปที่ 3.16 แสดงตัวอยางสวนประกอบภายในเกม

×