ﺑﺮﻧﺎﻣﻪﺳﺎزی وب
ﻧﯿﻢﺳﺎل اول ٩٣-٩٢
ﻣﺪرس :ﺣﻤﯿﺪ ﺿﺮاﺑ زاده
داﻧﺸ ﺪهی ﻣﻬﻨﺪﺳ ﮐﺎﻣﭙﯿﻮﺗﺮ
ﺗﻤﺮﯾﻦ ﺳﻮم
ﻣﻬﻠﺖ ارﺳﺎل ١٠ :آذرﻣﺎه
ﺑﺎزی ﻓ ﺮ ﺑ ﺮ
در اﯾﻦ ﺗﻤﺮﯾﻦ ﻗﺼﺪ دارﯾﻢ ﺑﺎزی ﻓ ﺮ ﺑ ﺮ را ﺑﺎ ﮐﻤ ﻣﻌﻤﺎری ﻣﺸﺘﺮی-ﮐﺎرﮔﺰار ﭘﯿﺎدهﺳﺎزی ﮐﻨﯿﻢ .در اﯾﻦ ﻧﺴﺨﻪ از
ﺑﺎزی ،ﮐﺎرﮔﺰار ﯾ ﮐﻠﻤﻪ را اﻧﺘﺨﺎب ﻣ ﮐﻨﺪ و ﮐﺎرﺑﺮ ﺑﺎﯾﺪ آن ﮐﻠﻤﻪ را ﺣﺪس ﺑﺰﻧﺪ.
ﻣﻌﻤﺎری
ﮐﺪ ﺷﻤﺎ ﺷﺎﻣﻞ دو ﺑﺨﺶ ﺳﻤﺖ ﮐﺎرﺑﺮ و ﺳﻤﺖ ﮐﺎرﮔﺰار اﺳﺖ .ﺳﻤﺖ ﮐﺎرﺑﺮ ﺑﺎ اﺟﺮای درﺧﻮاﺳﺖﻫﺎی AJAXﺑﺎ
ﮐﺎرﮔﺰار ارﺗﺒﺎط ﺑﺮﻗﺮار ﻣ ﮐﻨﺪ .ﻣﺮاﺣﻞ ﮐﻠ ارﺗﺒﺎط ﮐﺎرﺑﺮ ﺑﺎ ﮐﺎرﮔﺰار در ﻃﻮل ﺑﺎزی در ﺷ ﻞ ١ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪه اﺳﺖ.
AJAX
Connect
Response
ID and Word Length
Client
HTML page
Server
Python code
Try #n
ID and Guess
Response #n
Game State
ﺷ ﻞ :١ﺷﻤﺎی ﮐﻠ ارﺗﺒﺎط ﮐﺎرﺑﺮ و ﮐﺎرﮔﺰار
ﮐﺎرﮔﺰار ﺑﺮای ذﺧﯿﺮهی اﻃﻼﻋﺎت از ﯾ ﭘﺎﯾ ﺎه داده اﺳﺘﻔﺎده ﻣ ﮐﻨﺪ .اﯾﻦ ﭘﺎﯾ ﺎه داده ﺑﺮای ذﺧﯿﺮهی اﻃﻼﻋﺎت ﺑﺎزی
ﮐﻪ ﺷﺎﻣﻞ ﯾ ﺷﻨﺎﺳﻪ و ﯾ ﮐﻠﻤﻪ اﺳﺖ ،اﺳﺘﻔﺎده ﻣ ﺷﻮد.
)Insert (ID,Word
Server
Python code
DB
Retrieve with ID
ﺷ ﻞ :٢ﺷﻤﺎی ﮐﻠ ارﺗﺒﺎط ﮐﺎرﮔﺰار ﺑﺎ ﭘﺎﯾ ﺎه داده
١
ﺑﺮﻧﺎﻣﻪی ﺳﻤﺖ ﮐﺎرﮔﺰار
ﺑﺮای اﺟﺮای ﺑﺎزی ،ﮐﺎرﮔﺰار و ﮐﺎرﺑﺮ ﺑﺎ ﺗﻌﺪادی ﭘﯿﻐﺎم ﺑﺎ ﻫﻢ ارﺗﺒﺎط ﺑﺮﻗﺮار ﻣ ﮐﻨﻨﺪ .ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺷ ﻞ ١دﯾﺪه
ﻣ ﺷﻮد ،اﯾﻦ ارﺗﺒﺎط از ﻃﺮﯾﻖ درﺧﻮاﺳﺖﻫﺎی AJAXاز ﺳﻤﺖ ﮐﺎرﺑﺮ اﻧﺠﺎم ﻣ ﭘﺬﯾﺮد .ﺗﻮﺿﯿﺢ اﯾﻦ ارﺗﺒﺎط در اداﻣﻪ
آﻣﺪه اﺳﺖ:
.١ﮐﺎرﺑﺮ ﺑﺎ ارﺳﺎل ﯾ درﺧﻮاﺳﺖ ﺑﻪ ﮐﺎرﮔﺰار ،درﺧﻮاﺳﺖ ﺷﺮوع ﯾ ﺑﺎزی ﺟﺪﯾﺪ ﻣ ﮐﻨﺪ .اﯾﻦ درﺧﻮاﺳﺖ ﺑﻪ
ﺻﻮرت درﺧﻮاﺳﺖ AJAXاز آدرس ﮐﺎرﮔﺰار اﻧﺠﺎم ﻣ ﮔﯿﺮد .ﺑﺮای ﻣﺜﺎل اﮔﺮ ﺳﺮور ﺑﺮ روی ﭘﻮرت ٨٠از
آدرس localhostدر دﺳﺘﺮس ﺑﺎﺷﺪ ،ﮐﺎرﺑﺮ ﯾ درﺧﻮاﺳﺖ HTTPاز ﻧﻮع GETرا از اﯾﻦ آدرس اﺟﺮا
ﻣ ﮐﻨﺪ.
GET localhost
.٢ﮐﺎرﮔﺰار ﭘﺲ از درﯾﺎﻓﺖ ﭼﻨﯿﻦ درﺧﻮاﺳﺘ ،ﯾ ﺷﻨﺎﺳﻪی ﯾ ﺘﺎ ﺑﺮای ﺑﺎزی ﺗﺨﺼﯿﺺ ﻣ دﻫﺪ و ﺳﭙﺲ ﯾ
را ﺑﻪ ﻃﻮر ﺗﺼﺎدﻓ ﺑﺮای اﯾﻦ ﺑﺎزی اﻧﺘﺨﺎب ﻣ ﮐﻨﺪ.
ﮐﻠﻤﻪ
• ﺷﻨﺎﺳﻪی ﯾ ﺘﺎ را ﺑﺎﯾﺪ ﺑﺎ اﺳﺘﺎﻧﺪارد UUIDﻧﺴﺨﻪی ۴ﺗﻮﻟﯿﺪ ﮐﻨﯿﺪ ﮐﻪ اﺣﺘﻤﺎل ﺗ ﺮاری ﺑﻮدن آن ﺗﻘﺮﯾﺒﺎً
ﻣﻌﺎدل ﺻﻔﺮ اﺳﺖ .١
• ﮐﻠﻤﻪی ﺗﺼﺎدﻓ را ﺑﺎﯾﺪ از ﻟﯿﺴﺖ ﮐﻠﻤﺎﺗ ﮐﻪ در اﺧﺘﯿﺎرﺗﺎن ﻗﺮار داده ﺷﺪه اﺳﺖ ،اﻧﺘﺨﺎب ﮐﻨﯿﺪ.
.٣ﮐﺎرﮔﺰار اﻃﻼﻋﺎت ﺑﺎزی ﺟﺪﯾﺪ را اﺑﺘﺪا در ﯾ
ﺷﺮوع ﺑﺎزی را ارﺳﺎل ﻣ ﮐﻨﺪ.
ﭘﺎﯾ ﺎه داده ذﺧﯿﺮه ﻣ ﮐﻨﺪ ،ﺳﭙﺲ ﺑﻪ ﮐﺎرﺑﺮ اﻃﻼﻋﺎت ﻻزم ﺑﺮای
• ﺑﺮای ذﺧﯿﺮهﺳﺎزی اﻃﻼﻋﺎت از ﭘﺎﯾ ﺎه داده SQLiteاﺳﺘﻔﺎده ﮐﻨﯿﺪ .زﺑﺎن ﭘﺎﯾﺘﻮن ﺑﺎ ﮐﻤ
sqlite3اﻣ ﺎن ﮐﺎر ﺑﺎ اﯾﻦ ﭘﺎﯾ ﺎه داده را ﻓﺮاﻫﻢ ﻣ ﮐﻨﺪ.
ﻣﺎژول
• ﮐﺎرﮔﺰار در ﭘﺎﺳﺦ ﺑﻪ درﺧﻮاﺳﺖ ﮐﺎرﺑﺮ ،ﻃﻮل ﮐﻠﻤﻪ ﺑﻪ ﻫﻤﺮاه ﺷﻨﺎﺳﻪی ﺑﺎزی را در ﻗﺎﻟﺐ JSONارﺳﺎل
ﻣ ﮐﻨﺪ.
}{'id ':'66 D0FF96 -89D7 -4ABB -8C02 -9 E5FF139450A ','length ':4
.۴ﭘﺎﺳﺦ درﯾﺎﻓﺖ ﺷﺪه در ﺳﻤﺖ ﮐﺎرﺑﺮ ﭘﺮدازش ﺷﺪه و ﺑﻪ ﻃﻮل ﮐﻠﻤﻪ ،ﻓﻀﺎ ﺑﺮای وارد ﮐﺮدن ﺣﺮوف ﺳﺎﺧﺘﻪ
ﻣ ﺷﻮد .ﮐﺎرﺑﺮ ﭘﺲ از وارد ﮐﺮدن ﺣﺪس ﺧﻮد ،اﻃﻼﻋﺎت را ﺑﺮای ﮐﺎرﮔﺰار ارﺳﺎل ﻣ ﮐﻨﺪ .ﺑﺮﻧﺎﻣﻪی ﺳﻤﺖ
ﮐﺎرﺑﺮ ﺑﺎ ﯾ درﺧﻮاﺳﺖ از ﻧﻮع GETو ارﺳﺎل ﺷﻨﺎﺳﻪ و ﮐﻠﻤﻪ ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮﻫﺎی آن ،ﺣﺪس ﮐﺎرﺑﺮ را ﺑﺮای
ﮐﺎرﮔﺰار ارﺳﺎل ﻣ ﮐﻨﺪ.
GET localhost /? guess=pain&id =66 D0FF96 -89D7 -4ABB -8C02 -9 E5FF139450A
.۵ﺑﺮﻧﺎﻣﻪی ﺳﻤﺖ ﮐﺎرﮔﺰار ﺑﺎ درﯾﺎﻓﺖ درﺧﻮاﺳﺖ و ﻣﺸﺎﻫﺪهی ﺷﻨﺎﺳﻪ در ﭘﺎراﻣﺘﺮﻫﺎی آن ،اﺑﺘﺪا ﮐﻠﻤﻪی ﻣﺮﺗﺒﻂ ﺑﺎ
ﺑﺎزی را از ﭘﺎﯾ ﺎه داده درﯾﺎﻓﺖ ﻣ ﮐﻨﺪ ،ﺳﭙﺲ ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﻪ ﮐﺎرﺑﺮ ﭘﺎﺳﺦ ﻣ دﻫﺪ:
١اﺳﺘﻔﺎده از اﻃﻼﻋﺎت ﮐﺎرﺑﺮ ﻣﺎﻧﻨﺪ IPﺑﺮای ﺳﺎﺧﺘﻦ ﺷﻨﺎﺳﻪ ،اﻣ ﺎنﭘﺬﯾﺮ ﻧﯿﺴﺖ ،ﭼﻮن ﯾ ﮐﺎرﺑﺮ ﺑﺎﯾﺪ ﺑﺘﻮاﻧﺪ ﭼﻨﺪ ﺑﺎر ﺑﺎزی را اﻧﺠﺎم دﻫﺪ و
ﻗﺼﺪ ﻧﺪارﯾﻢ ﮐﻪ اﻃﻼﻋﺎت ﺑﺎزیﻫﺎی ﻗﺒﻞ را ﺣﺬف ﮐﻨﯿﻢ .در ﺻﻮرﺗ ﻫﻢ ﮐﻪ ﭼﻨﺪ ﮐﺎرﺑﺮ ﭘﺸﺖ ﺷﺒ ﻪ NATﺑﺎﺷﻨﺪ ،اﻣ ﺎن اﺳﺘﻔﺎده ﻫﻤﺰﻣﺎن از
ﺑﺎزی ﺑﺮای آنﻫﺎ وﺟﻮد ﻧﺨﻮاﻫﺪ داﺷﺖ .راه دﯾ ﺮ اﺳﺘﻔﺎده از ﯾ ﺷﻨﺎﺳﻪی ﻫﻤ ﺎﻧ اﺳﺖ ،ﮐﻪ در ﺻﻮرت اﺳﺘﻔﺎده از اﯾﻦ روش ﺑﺎﯾﺪ از ﻫﻤﺰﻣﺎﻧ
ﺗﺨﺼﯿﺺ ﺷﻨﺎﺳﻪﻫﺎ ﺟﻠﻮﮔﯿﺮی ﮐﻨﯿﺪ.
٢
• ﺣﺪس ﮐﺎرﺑﺮ را ﺣﺮف ﺑﻪ ﺣﺮف ﺑﺎ ﮐﻠﻤﻪی اﺻﻠ ﻣﻘﺎﯾﺴﻪ ﻣ ﮐﻨﺪ و ﯾ
آراﯾﻪ ﺑﻪ ﺷ ﻞ زﯾﺮ ﻣ ﺳﺎزد:
ﻣﻘﺪار
وﺿﻌﯿﺖ
١
در ﺻﻮرﺗ ﮐﻪ ﺟﺎی ﺣﺮف ﻏﻠﻂ ﺑﺎﺷﺪ
٢
٠
در ﺻﻮرﺗ ﮐﻪ ﺟﺎی ﺣﺮف درﺳﺖ ﺑﺎﺷﺪ
در ﺻﻮرﺗ ﮐﻪ ﺣﺮف در ﮐﻠﻤﻪ اﺻﻠ وﺟﻮد ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ
در ﻧﻬﺎﯾﺖ آراﯾﻪی ﺳﺎﺧﺘﻪ ﺷﺪه را در ﻗﺎﻟﺐ JSONو ﺑﻪ ﺷ ﻞ زﯾﺮ در ﭘﺎﺳﺦ درﺧﻮاﺳﺖ ﮐﺎرﺑﺮ ارﺳﺎل
ﻣ ﮐﻨﺪ:
}]{'status ':'success ','won ':false ,'state ':[2 ,1 ,0 ,0
• در ﺻﻮرﺗ ﮐﻪ ﭘﺎﺳﺦ ﮐﺎﻣﻼ درﺳﺖ ﺑﻮد ،ﺑﻪ ﺷ ﻞ زﯾﺮ ﭘﺎﺳﺦ ﻣ دﻫﺪ:
}{'status ':'success ','won ':true
• در ﺻﻮرﺗ ﮐﻪ ﺷﻨﺎﺳﻪ ﯾﺎﻓﺖ ﻧﺸﺪ ،ﺑﺎ ﺧﻄﺎی زﯾﺮ ﭘﺎﺳﺦ ﻣ دﻫﺪ:
}' {'status ':'error ','reason ':'ID not found
٣
ﺑﺮﻧﺎﻣﻪی ﺳﻤﺖ ﮐﺎرﺑﺮ
ﮐﺎرﺑﺮ ﺑﺎﯾﺪ ﺑﻪ ﺷ ﻞ زﯾﺮ ﺑﺘﻮاﻧﺪ ﺑﺎ ﮐﻤ
راﺑﻂ ﮐﺎرﺑﺮی ﺑﺎزی را اﻧﺠﺎم دﻫﺪ:
.١ﺑﺎ ﺑﺎرﮔﺬاری ﺻﻔﺤﻪ ،درﺧﻮاﺳﺘ ﺑﻪ ﮐﺎرﮔﺰار ﺑﺮای ﯾ ﺑﺎزی ﺟﺪﯾﺪ ﻓﺮﺳﺘﺎده ﺷﻮد .ﻫﻤﭽﻨﯿﻦ ﻣ ﺗﻮاﻧﯿﺪ دﮐﻤﻪای
ﺑﺮای ارﺳﺎل اﯾﻦ درﺧﻮاﺳﺖ ﭘﺲ از ﺑﺎرﮔﺬاری ﺻﻔﺤﻪ ،ﻗﺮار دﻫﯿﺪ.
.٢ﺑﺎ درﯾﺎﻓﺖ اﻃﻼﻋﺎت ﺑﺎزی ﺟﺪﯾﺪ ،ﺑﺎﯾﺪ ﺷﻨﺎﺳﻪ ﺑﺮای درﺧﻮاﺳﺖﻫﺎی ﺑﻌﺪی ﻧ ﻪداری ﺷﻮد و ﺑﻪ ﻃﻮل ﻣﺸﺨﺺ
ﺷﺪه ،ﻓﻀﺎ ﺑﺮای وارد ﮐﺮدن ﺣﺪس اﯾﺠﺎد ﺷﻮد.
• ﻫﺮ ﮐﺎراﮐﺘﺮ ﺑﺎﯾﺪ ﺟﺪا از ورودی ﮔﺮﻓﺘﻪ ﺷﻮد و ﻧﺒﺎﯾﺪ ﮐﺎرﺑﺮ ﮐﻞ ﮐﻠﻤﻪ را ﯾ ﺠﺎ وارد ﮐﻨﺪ.
• ﺑﺮای راﺣﺘ در ﻃﺮاﺣ ﺻﻔﺤﻪ ،ﻧﯿﺎزی ﺑﻪ اﺳﺘﻔﺎده از ﺗ > <inputﻧﺪارﯾﺪ و ﻣ ﺗﻮاﻧﯿﺪ از ﺻﻔﺖ
contenteditableﺑﺮای ﻫﺮ ﻋﻨﺼﺮی ﮐﻪ ﻣ ﺧﻮاﻫﯿﺪ ،اﺳﺘﻔﺎده ﮐﻨﯿﺪ.
.٣ﮐﺎرﺑﺮ ﭘﺲ از وارد ﮐﺮدن ﺣﺪس ﺧﻮد ،ﺑﺎﯾﺪ ﺑﺎ ﻓﺸﺮدن ﯾ
دﮐﻤﻪ ،درﺧﻮاﺳﺖ ﺧﻮد را ﺑﺮای ﮐﺎرﮔﺰار ارﺳﺎل ﮐﻨﺪ.
• ﭘﺲ از ارﺳﺎل ﺣﺪس ﺑﻪ ﮐﺎرﮔﺰار ،ﺑﺎﯾﺪ اﻣ ﺎن ﺗﻐﯿﯿﺮ ﺣﺪس از ﺑﯿﻦ ﺑﺮود.
.۴ﭘﺲ از درﯾﺎﻓﺖ ﭘﺎﺳﺦ ،ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ وﺿﻌﯿﺖ آن ﺑﺎﯾﺪ ﯾ
از ﮐﺎرﻫﺎی زﯾﺮ اﻧﺠﺎم ﺷﻮد:
• در ﺻﻮرﺗ ﮐﻪ ﺧﻄﺎﯾ رخ داده ﺑﻮد ،ﺑﺎﯾﺪ ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن داده ﺷﻮد.
• در ﺻﻮرﺗ ﮐﻪ ﺑﺎزی ﺗﻤﺎم ﺷﺪه ﺑﻮد ،ﺑﺎﯾﺪ ﮐﻞ ﻣﺤﺘﻮای ﺻﻔﺤﻪ ﺣﺬف ﺷﺪه و ﭘﯿﻐﺎﻣ ﻣﺒﻨ ﺑﺮ ﺑﺮﻧﺪه ﺷﺪن
ﮐﺎرﺑﺮ ﺑﻪ ﺟﺎی آن ﻧﻮﺷﺘﻪ ﺷﺪ.
• در ﺻﻮرﺗ ﮐﻪ ﭘﺎﺳﺦ ﺷﺎﻣﻞ آراﯾﻪای از وﺿﻌﯿﺖ ﺣﺪس ﻗﺒﻠ ﺑﻮد ،ﺳﻄﺮ ﺟﺪﯾﺪی ﺑﺎﯾﺪ ﺑﺮای وارد ﮐﺮدن ﯾ
ﺣﺪس ﺟﺪﯾﺪ اﯾﺠﺎد ﺷﻮد و ﺣﺮوف ﺳﻄﺮ ﻗﺒﻞ ،ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﻣﻘﺎدﯾﺮ ﻣﻮﺟﻮد در آراﯾﻪ ،ﺑﻪ رﻧ ﻫﺎی ﺟﺪول
زﯾﺮ ﺗﻐﯿﯿﺮ ﮐﻨﻨﺪ:
رﻧ
ﻣﻘﺪار
ﺳﺒﺰ
٢
ﻗﺮﻣﺰ
٠
زرد
١
ﻧﻤﻮﻧﻪای از اﯾﻦ راﺑﻂ ﮐﺎرﺑﺮی را در ﺷ ﻞ ٣ﻣ ﺗﻮاﻧﯿﺪ ﺑﺒﯿﻨﯿﺪ.
ﺷ ﻞ :٣ﻧﻤﻮﻧﻪای از راﺑﻂ ﮐﺎرﺑﺮی
۴
ﻧ ﺎت ﻧﻬﺎﯾ
• ﺻﻔﺤﻪای ﮐﻪ ﻃﺮاﺣ ﻣ ﮐﻨﯿﺪ ﺑﺎﯾﺪ ﺑﻪ درﺳﺘ در ﻣﺮورﮔﺮ ﮐﺮوم ﻗﺎﺑﻞ ﻧﻤﺎﯾﺶ ﺑﺎﺷﺪ .ﭘﺸﺘﯿﺒﺎﻧ از ﻣﺮورﮔﺮﻫﺎی
دﯾ ﺮ اﺧﺘﯿﺎری اﺳﺖ.
• ﮐﺪ ﺳﻤﺖ ﮐﺎرﮔﺰار را ﺑﺎﯾﺪ ﺑﺎ زﺑﺎن ﭘﺎﯾﺘﻮن ﭘﯿﺎدهﺳﺎزی ﮐﻨﯿﺪ .در اﯾﻦ ﺑﺨﺶ ﻓﻘﻂ از ﮐﺘﺎﺑﺨﺎﻧﻪﻫﺎی ﺗﻮﮐﺎر ﭘﺎﯾﺘﻮن
ﻣ ﺗﻮاﻧﯿﺪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ .ﺑﺮای ﺑﺮﻧﺎﻣﻪی ﺳﻤﺖ ﮐﺎرﺑﺮ ﻣﺠﺎز ﺑﻪ اﺳﺘﻔﺎده از ﮐﺘﺎﺑﺨﺎﻧﻪﻫﺎی ﺟﺎﻧﺒ ﻫﺴﺘﯿﺪ.
• از ﺑﺎﻻ آوردن ﺳﺎﯾﺖ ﺧﻮد ﺑﺮ روی ﻫﺮ ﮔﻮﻧﻪ آدرس ﻋﻤﻮﻣ ﺗﺎ ﻗﺒﻞ از ﻣﻮﻋﺪ ﺗﺤﻮﯾﻞ ﺗﻤﺮﯾﻦ ﺧﻮدداری ﮐﻨﯿﺪ.
• ﺳﻮاﻻت ﺧﻮد را در ﺳﺎﯾﺖ ﭘﯿﺎﺗﺰا ﻣﻄﺮح ﮐﻨﯿﺪ.
۵
© Copyright 2026 Paperzz