Tags:
Forums: 

เกมตัวต่อ (Tetris) เขียนโดย HTML5 Canvas ใช้ PHP upload เก็บและแสดง Top Score
ผมใช้เวลาเขียน 3 วัน (ประมาณ 12 ชั่วโมง)
เรื่อง graphic ก็อย่าไปซีเรียสนะครับ เพราะ Programmer ทำคนเดียวเิอง

เผื่อว่าใครยังไม่ได้เล่นนะครับ ลองดู
คลิก!!

Get latest news from Blognone
By: manaeeee on 11 January 2011 - 16:47 #249176

ลองเล่นแล้ว เจ๋งดี แต่เดี๋ยวไปข้างนอกก่อน เดี๋ยวกลับมาทำ high score

By: EThaiZone
ContributorAndroidUbuntuWindows
on 11 January 2011 - 17:22 #249192
EThaiZone's picture

ลองเล่นแล้วดีครับ ยังไม่เคยศึกษา html5 เลย ขอแกะดูเป็นวิทยาทานหน่อยนะครับ


มันไม่ง่ายเลยที่จะทำ GIF ให้มีขนาดน้อยกว่า 20kB

By: le-phather
iPhoneUbuntu
on 11 January 2011 - 17:33 #249197
le-phather's picture

เอาเลยครับ.. แกะเลย..
หลักๆก็ไม่มีอะไรหรอก ซ้ำๆกัน เพราะผมเซ็ต เช็คทีละอัน

By: meawwat
ContributoriPhoneAndroidSymbian
on 12 January 2011 - 09:31 #249417 Reply to:249197
meawwat's picture

ขอบคุณที่แบ่งปันครับ :)

By: hisoft
ContributorWindows PhoneWindows
on 11 January 2011 - 18:28 #249212
hisoft's picture

แจ้งปัญหา ผมใช้ IE9 เล่นไม่ได้ครับ

By: le-phather
iPhoneUbuntu
on 11 January 2011 - 21:44 #249279 Reply to:249212
le-phather's picture

ผมไม่แน่ใจว่าทำไม่ถึงเล่นไม่ได้ และไม่เคยทดสอบด้วยครับ เป็นไปได้ว่ายังไม่ใช่เวอร์ชั่นเต็ม

ปกติแล้ว MS เค้าก็บอกว่า IE9 จะรองรับ HTML5 ด้วย แถมเทพกว่า แรงกว่า browser ตัวอื่น

ดูเค้าเทสให้ดู

เดี๋ยวยังไงว่างๆจะลองทดสอบดูครับ

By: hisoft
ContributorWindows PhoneWindows
on 11 January 2011 - 23:13 #249312 Reply to:249279
hisoft's picture

ครับ มันรองรับ HTML5 จริง แต่กรณีของผมที่เล่นไม่ได้มันแจ้งว่าแบบนี้ครับ

  • Please note that, this game dosen't work on Internet Explorer 8 and older version.

  • To play the game, we suggest you to play it with Google Chrome, Firefox, Safari, and Opera.

  • เกมนี้ไม่รองรับ Internet Explorer 8 และเวอร์ชั่นเก่าๆ ในการเล่นเกมนี้ เราขอแนะนำให้ใช้ Google Chrome, Firefox, Safari และ Opera.

คาดว่าเกิดจากการเช็คว่าเป็น IE แล้วไม่ปล่อยผ่านเฉยๆ น่ะครับ

By: le-phather
iPhoneUbuntu
on 12 January 2011 - 11:45 #249480 Reply to:249312
le-phather's picture

ที่มันแจ้งแบบนี้ คือมันไม่รู้จัก tag < canvas > มันเลยแสดงออกมาแบบนี้ ถ้ามันรู้จักมันก็จะแสดง canvas screen ออกมา ผมยังไม่แน่ใจว่าเกิดอะไรขึ้น ยังไงผมจะลองตรวจสอบดูนะครับ

By: inkirby
ContributoriPhoneAndroidIn Love
on 11 January 2011 - 20:14 #249241
inkirby's picture

เวิร์คดีครับ แต่ว่า...
เล่นครั้งแรก ได้ 0 แต้มเนี่ย นี่ทำไมผมเล่นไม่ได้ซักแถวเลย!?
= =


Dream high, work hard.

By: neizod
ContributorTraineeIn Love
on 11 January 2011 - 22:43 #249290
neizod's picture

แนะนำเกี่ยวกับเกมหน่อยนะครับ

  • น่าจะมี hard drop ด้วย คือกดทีเดียวแล้วลงพื้นเลย
  • ระบายสีตัว tetromino คนละแบบให้มีสีต่างกัน จะได้มองง่าย
  • เวลา gen ตัว tetromino จากด้านบนจอ พยายามให้มันออกมาในรูปที่มีส่วนสูงน้อยที่สุดครับ ไม่งั้นคนเล่นตายเร็ว - -"
  • หมุน น่าจะเพิ่มวิธีหมุนได้ทั้งแบบทวนเข็ม-ตามเข็มด้วย
  • ทำเงาของตัว tetromino บนพื้นด้วย จะได้เล่นง่ายขึ้น (แต่ถ้าไม่ทำก็ท้าทายไปอีกแบบนะ)

อันนี้สงสัย?

  • ใช้อัลกออะไรสุ่มตัว tetromino ครับ??? ผมได้ O (สี่เหลี่ยม) กับ I (แท่งยาว) บ่อยมากๆ จนตกใจ
  • ทำไมเล่นไปเล่นมาแล้วมีตัว U ด้วยครับ (มันไม่ใช่ tetromino อะ เป็น pentomino ไปซะหนิ - -")
By: le-phather
iPhoneUbuntu
on 12 January 2011 - 00:13 #249341 Reply to:249290
le-phather's picture

ใช้อัลกออะไรสุ่มตัว tetromino ครับ???
- random ล้วนๆครับ โดยให้มีโอกาศปล่อย สี่เหลี่ยมกับแท่งยาวมาเยอะกว่าอันอื่น สองเท่า

ทำไมเล่นไปเล่นมาแล้วมีตัว U ด้วยครับ
-อันนี้ไม่ได้ดู ไม่ได้อ้างอิง wiki มาอะครับ ใส่เข้าไปตามที่ผมคิดว่ามันมี
- ไม่แน่เดี๋ยวเอาไปออก

ส่วนคำแนะนำผมจะเอาไปปรับปรุงนะครับ

By: neizod
ContributorTraineeIn Love
on 12 January 2011 - 02:55 #249368 Reply to:249341
neizod's picture

งั้นผมว่า ให้สุ่มทุกตัวเท่าๆ กันให้หมดดีกว่านะ ได้แท่งยาวมาเยอะเกินมันง่ายไปหน่อยอะครับ ;)

อ๋อ ที่ด้านล่างบอกว่าหมุนยาก รู้สึกว่าน่าจะเกิดจากการจองพื้นที่กระดานสำหรับตัว tetromino ไว้แค่ 10x15 ช่อง ซึ่งเท่ากับกระดานที่ใช้แสดงผลพอดีครับ
ถ้าจะทำให้หมุนง่าย ต้องเผื่อขนาดพื้นที่กระดานที่จองไว้เบื้องหลังสูงกว่านี้ครับ (เช่น แสดงผลสูง 15 แต่ก็จองไว้ซัก 17) แล้วตอนที่ gen ตัว tetromino มาจะได้หมุดได้ตั้งแต่แรกเลย

และถ้าจะพัฒนาวิธีเล่นให้มากกว่านั้น ต้องเขียนแบบให้มันหมุนได้ในสถาณการณ์ที่อาจเกิดขึ้นแบบใดๆ ก็ได้ด้วยครับ
ลองอ่านเพิ่มได้ที่ T-spin ครับ

By: le-phather
iPhoneUbuntu
on 12 January 2011 - 11:42 #249479 Reply to:249368
le-phather's picture

เรื่องความยากง่าย ต้องค่อยๆปรับกันไปหนะครับ ตอนแรกผมปรับให้ออกมากเท่าๆกัน แต่ประกฎว่ามันสุ่มไปออก U บ่อย จนคนเล่น (รวมผมเอง) บอกว่ามันยากเกินไป แต่บางที่ก็คิดว่าท้าทายดีกับการทำ top score แบบยากๆ

เรื่องกับปรับขนาดพื้นที่และการหมุนที่แนะนำมา น่าสนใจดีครับ ใว้ยังไงวันหยุดนี้ผมจะลองแก้ดู

By: RYUTAZA
Contributor
on 14 January 2011 - 19:13 #250351 Reply to:249341

กลับกันว่าผมชอบแบบตัว U นะ คิดว่ามันแปลกดี *-* (และยากขึ้นด้วยมั่ง)

By: neizod
ContributorTraineeIn Love
on 14 January 2011 - 20:28 #250361 Reply to:250351
neizod's picture

อึ่มมมม นานาจิตังครับ

แต่ตอนนี้ผมกำลังคิดว่า เกมนี้ใช้ชื่อเกมว่า Tetris ซึ่งมันอ้างอิงไปถึงเกมที่มีตัวตนอยู่แล้ว
ดังนั้น ความคาดหวังของผู้เล่นจึงน่าจะอยากเห็นเกมนี้ไม่แตกต่างไปจากเดิมมากนัก หรือถ้าแตกต่างก็ขอให้อยู่ในระดับที่รับได้ครับ

ส่วนตัวผมรับไม่ได้ครับ เพราะชื่อ Tertris มาจากคำว่า tetra (สี่) + tennis (กีฬาโปรดของต้นตำรับเจ้าของเกม)
แค่ชื่อก็บอกคอนเซปท์แล้ว ว่าต้องมีอะไรเกี่ยวข้องกับ 4 แน่ๆ (ซึ่งก็เป็นอย่างนั้นจริงๆ เพราะตัว tetromino ประกอบจากสี่เหลี่ยมเล็กๆ 4 อัน)

แต่จริงๆ มีตัว U ก็สนุกดีนะ เพียงแต่ถ้าจะใส่เข้าไปผมก็ไม่อยากเห็นเกมนี้ใช้ชื่อซ้ำกับของเก่า เพราะเราก็ดัดแปลงเกมไปตั้งเยอะแล้วหนิ
จะตั้งชื่อเป็น Pentris ก็ได้ แต่คำนี้น่ากลัวแฮะ อ่านออกเสียงผิดละยุ่งเลย ^^"

By: tg-thaigamer
ContributoriPhoneAndroidBlackberry
on 11 January 2011 - 23:05 #249306
tg-thaigamer's picture

สุดยอดๆๆ


มือใหม่!! ใหม่จริงๆนะ

By: nut_457
AndroidUbuntuWindows
on 11 January 2011 - 23:14 #249313

ผมว่ามันยังกดหมุนยากไปนิดนึงนะครับ :)

By: Jai_Magical
iPhoneWindows
on 12 January 2011 - 09:51 #249426
Jai_Magical's picture

Down key = inscreasse fail speed ต้องแก้เป็น fall speed นะครับ

เกมมันกิน CPU เยอะเหมือนกันนะครับ พัดลมผมดังขึ้นมาอย่างได้ยินได้ชัด ถ้า set FPS ให้คงที่อาจจะกิน CPU น้องลงก็ได้

By: le-phather
iPhoneUbuntu
on 12 January 2011 - 11:38 #249473 Reply to:249426
le-phather's picture

fail ซะงั้น มืนครับ เดี๋ยวไปแก้ก่อน

เรื่อง FPS ไม่สามารถ set ได้ครับ (FPS แค่นับเฉยๆว่าในหนึ่งวินาทีเนี่ย มัน render ไปแล้วกี่เฟรม)
จะมากหรือน้อย ขึ้นอยู่กับการจัดการของ browser และเครื่องแล้วหละครับ

ผมใช้เครื่อง(ที่ทำงาน) pentium 4 กับ firefox รันได้ 20 กว่าๆเอง
ส่วนอีกเครื่อง(ที่บ้าน) Athlon X2 กับ firefox รันได้ 150 กว่า
กับ chrome เฉียดๆ 200 เลย

ถ้าจะทำเกมออกมาจริงๆจังๆ คงต้องระบุ minimum กับ recommend spec required แหละครับ
เหมือนกับเกม pc ทั่วๆไป

By: inkirby
ContributoriPhoneAndroidIn Love
on 12 January 2011 - 13:12 #249507
inkirby's picture

แวะมาแปะ FPS ครับ
เครื่องผมเท่าที่เช็ค FPS ดูจาก MacOSX 10.6.6
Safari ได้ 60-80 fps
Opera ได้ 160-180 fps
Chrome ได้ 200-220 fps
สงสัยว่าทำไมทุกตัวแกว่งช่วงประมาณ 20 fps หมดเลยแฮะ

ถ้าล็อค fps ได้ก็คิดว่าน่าจะทำให้ลด "การเขมือบ CPU" ลงได้นะครับ?


Dream high, work hard.

By: EThaiZone
ContributorAndroidUbuntuWindows
on 12 January 2011 - 13:50 #249523
EThaiZone's picture

ผมไม่รู้เรื่อง HTML5 นะ แต่ว่าเกมส์นี้ใช้ js ก็นึกถึงคำสั่ง settimeout
ถ้ามีใช้แล้วลองปรับให้ถี่น้อยลง คิดว่าจะลดการเขมือบหรือเปล่า? (ตอนนี้ผมยังไม่ได้แกะโค้ดดู)

แต่นึกอีกแง่ การเขมือบ CPU นี้มันเป็นการจัดสรรจากตัว browser หรือเปล่า
อาจจะหน่วงไม่ได้ (ฮา)


มันไม่ง่ายเลยที่จะทำ GIF ให้มีขนาดน้อยกว่า 20kB

By: le-phather
iPhoneUbuntu
on 14 January 2011 - 18:27 #250349
le-phather's picture

เกม Tetris นี้
ตอนนี้ผมได้ลองเอาลง Facebook แล้วครับ ก็พอเป็นแนวทางได้

http://apps.facebook.com/tetrisplus/

By: mapkung14
Windows
on 14 January 2011 - 20:53 #250363

เล่นผ่านไอพอดได้ แต่มันกลับตัวต่อยังไงอ่ะ

By: le-phather
iPhoneUbuntu
on 15 January 2011 - 18:08 #250457 Reply to:250363
le-phather's picture

เพิ่มปุ่มกดสำหรับ iphone/ipod/ipad แล้วครับ

By: mehn
iPhone
on 14 January 2011 - 21:57 #250369
mehn's picture

อ่า แจ่มอ่ะครับ อยากทำบ้าง รอว่างก่อนจะลองทำดู

By: 9rockky
AndroidIn Love
on 15 January 2011 - 17:42 #250456

เเจ๋วเเ่มครับ ขอเเกะดูนะครับ

By: bongikairu
ContributoriPhone
on 15 January 2011 - 18:36 #250460

อยากรู้ครับว่าตัวเกมรันที่ client แล้วควบคุมเรื่อง high score ยังไงไม่ให้คนใส่ค่าลงไปมั่วๆ ครับ

By: le-phather
iPhoneUbuntu
on 15 January 2011 - 21:04 #250470 Reply to:250460
le-phather's picture

บอกเป็นแนวทางละกันนะครับ
(แต่ก็ไม่ใช่วิธีที่ดีที่สุดหรอก)

ผมใช้วิธีส่งค่าไปหลายๆอัน โดยฝั่ง server จะเอาไปตรวจสวบ(verify) ด้วย equation บางอย่าง ว่ามัน match กัน
ถ้าไม่ ก็ไม่ต้อง take action ใดๆครับ

By: bongikairu
ContributoriPhone
on 15 January 2011 - 21:52 #250488 Reply to:250470

ครับ รู้สึกเหมือนว่าพอโปรแกรม execute ที่ client แล้วคุมลำบากมากจริงๆ
just kidding the script

ผมก็เคยลองหาวิธีดีๆ อยู่ แต่ไม่พบเลยสักอัน

By: le-phather
iPhoneUbuntu
on 15 January 2011 - 22:42 #250499 Reply to:250488
le-phather's picture

ก็นั่นแหละครับ
ปัญหา 2 อย่างที่มันต่อเนื่องกัน

  1. ซ่อน code ไม่ได้ (ถึงจะทำให้อ่านยาก - แต่ก็แกะได้อยู่ดี)
  2. เป็นผลให้ user ปรับเปลี่ยนค่าได้ตามใจ

ถ้าเจอวิธีดีๆแล้วก็มาบอกกันบ้างนะครับ

By: tholapz
iPhoneWindows
on 17 November 2011 - 16:42 #354738
tholapz's picture

ทำนานมั้ยครับ? ไอเดียดีครับสำหรับการลองเล่น canvas ของ html5

เล่นสนุกดีครับ ฮ่าๆ

By: supatee
iPhoneWindows PhoneAndroidUbuntu
on 23 December 2011 - 20:24 #367568

เพิ่งเล่นเสร็จครับ ทิ้งคะแนนไว้แค่ 7000 เศษแล้วกดตายเลย เดี๋ยวสูงเกิน ที่สำคัญ เริ่มเมื่อย แต่รู้สึก Server Script มีบักนะครับ คะแนนที่โชว์มันเบิ้ลกัน (ของคนอื่น)