เกมตัวต่อ (Tetris) เขียนโดย HTML5 Canvas ใช้ PHP upload เก็บและแสดง Top Score ผมใช้เวลาเขียน 3 วัน (ประมาณ 12 ชั่วโมง) เรื่อง graphic ก็อย่าไปซีเรียสนะครับ เพราะ Programmer ทำคนเดียวเิอง
เผื่อว่าใครยังไม่ได้เล่นนะครับ ลองดู คลิก!!
ลองเล่นแล้ว เจ๋งดี แต่เดี๋ยวไปข้างนอกก่อน เดี๋ยวกลับมาทำ high score
ลองเล่นแล้วดีครับ ยังไม่เคยศึกษา html5 เลย ขอแกะดูเป็นวิทยาทานหน่อยนะครับ
มันไม่ง่ายเลยที่จะทำ GIF ให้มีขนาดน้อยกว่า 20kB
เอาเลยครับ.. แกะเลย.. หลักๆก็ไม่มีอะไรหรอก ซ้ำๆกัน เพราะผมเซ็ต เช็คทีละอัน
ขอบคุณที่แบ่งปันครับ :)
แจ้งปัญหา ผมใช้ IE9 เล่นไม่ได้ครับ
ผมไม่แน่ใจว่าทำไม่ถึงเล่นไม่ได้ และไม่เคยทดสอบด้วยครับ เป็นไปได้ว่ายังไม่ใช่เวอร์ชั่นเต็ม
ปกติแล้ว MS เค้าก็บอกว่า IE9 จะรองรับ HTML5 ด้วย แถมเทพกว่า แรงกว่า browser ตัวอื่น
ดูเค้าเทสให้ดู
เดี๋ยวยังไงว่างๆจะลองทดสอบดูครับ
ครับ มันรองรับ 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 แล้วไม่ปล่อยผ่านเฉยๆ น่ะครับ
ที่มันแจ้งแบบนี้ คือมันไม่รู้จัก tag < canvas > มันเลยแสดงออกมาแบบนี้ ถ้ามันรู้จักมันก็จะแสดง canvas screen ออกมา ผมยังไม่แน่ใจว่าเกิดอะไรขึ้น ยังไงผมจะลองตรวจสอบดูนะครับ
เวิร์คดีครับ แต่ว่า... เล่นครั้งแรก ได้ 0 แต้มเนี่ย นี่ทำไมผมเล่นไม่ได้ซักแถวเลย!? = =
Dream high, work hard.
แนะนำเกี่ยวกับเกมหน่อยนะครับ
อันนี้สงสัย?
ใช้อัลกออะไรสุ่มตัว tetromino ครับ??? - random ล้วนๆครับ โดยให้มีโอกาศปล่อย สี่เหลี่ยมกับแท่งยาวมาเยอะกว่าอันอื่น สองเท่า
ทำไมเล่นไปเล่นมาแล้วมีตัว U ด้วยครับ -อันนี้ไม่ได้ดู ไม่ได้อ้างอิง wiki มาอะครับ ใส่เข้าไปตามที่ผมคิดว่ามันมี - ไม่แน่เดี๋ยวเอาไปออก
ส่วนคำแนะนำผมจะเอาไปปรับปรุงนะครับ
งั้นผมว่า ให้สุ่มทุกตัวเท่าๆ กันให้หมดดีกว่านะ ได้แท่งยาวมาเยอะเกินมันง่ายไปหน่อยอะครับ ;)
อ๋อ ที่ด้านล่างบอกว่าหมุนยาก รู้สึกว่าน่าจะเกิดจากการจองพื้นที่กระดานสำหรับตัว tetromino ไว้แค่ 10x15 ช่อง ซึ่งเท่ากับกระดานที่ใช้แสดงผลพอดีครับ ถ้าจะทำให้หมุนง่าย ต้องเผื่อขนาดพื้นที่กระดานที่จองไว้เบื้องหลังสูงกว่านี้ครับ (เช่น แสดงผลสูง 15 แต่ก็จองไว้ซัก 17) แล้วตอนที่ gen ตัว tetromino มาจะได้หมุดได้ตั้งแต่แรกเลย
และถ้าจะพัฒนาวิธีเล่นให้มากกว่านั้น ต้องเขียนแบบให้มันหมุนได้ในสถาณการณ์ที่อาจเกิดขึ้นแบบใดๆ ก็ได้ด้วยครับ ลองอ่านเพิ่มได้ที่ T-spin ครับ
เรื่องความยากง่าย ต้องค่อยๆปรับกันไปหนะครับ ตอนแรกผมปรับให้ออกมากเท่าๆกัน แต่ประกฎว่ามันสุ่มไปออก U บ่อย จนคนเล่น (รวมผมเอง) บอกว่ามันยากเกินไป แต่บางที่ก็คิดว่าท้าทายดีกับการทำ top score แบบยากๆ
เรื่องกับปรับขนาดพื้นที่และการหมุนที่แนะนำมา น่าสนใจดีครับ ใว้ยังไงวันหยุดนี้ผมจะลองแก้ดู
กลับกันว่าผมชอบแบบตัว U นะ คิดว่ามันแปลกดี *-* (และยากขึ้นด้วยมั่ง)
อึ่มมมม นานาจิตังครับ
แต่ตอนนี้ผมกำลังคิดว่า เกมนี้ใช้ชื่อเกมว่า Tetris ซึ่งมันอ้างอิงไปถึงเกมที่มีตัวตนอยู่แล้ว ดังนั้น ความคาดหวังของผู้เล่นจึงน่าจะอยากเห็นเกมนี้ไม่แตกต่างไปจากเดิมมากนัก หรือถ้าแตกต่างก็ขอให้อยู่ในระดับที่รับได้ครับ
ส่วนตัวผมรับไม่ได้ครับ เพราะชื่อ Tertris มาจากคำว่า tetra (สี่) + tennis (กีฬาโปรดของต้นตำรับเจ้าของเกม) แค่ชื่อก็บอกคอนเซปท์แล้ว ว่าต้องมีอะไรเกี่ยวข้องกับ 4 แน่ๆ (ซึ่งก็เป็นอย่างนั้นจริงๆ เพราะตัว tetromino ประกอบจากสี่เหลี่ยมเล็กๆ 4 อัน)
แต่จริงๆ มีตัว U ก็สนุกดีนะ เพียงแต่ถ้าจะใส่เข้าไปผมก็ไม่อยากเห็นเกมนี้ใช้ชื่อซ้ำกับของเก่า เพราะเราก็ดัดแปลงเกมไปตั้งเยอะแล้วหนิ จะตั้งชื่อเป็น Pentris ก็ได้ แต่คำนี้น่ากลัวแฮะ อ่านออกเสียงผิดละยุ่งเลย ^^"
สุดยอดๆๆ
มือใหม่!! ใหม่จริงๆนะ
ผมว่ามันยังกดหมุนยากไปนิดนึงนะครับ :)
Down key = inscreasse fail speed ต้องแก้เป็น fall speed นะครับ
เกมมันกิน CPU เยอะเหมือนกันนะครับ พัดลมผมดังขึ้นมาอย่างได้ยินได้ชัด ถ้า set FPS ให้คงที่อาจจะกิน CPU น้องลงก็ได้
fail ซะงั้น มืนครับ เดี๋ยวไปแก้ก่อน
เรื่อง FPS ไม่สามารถ set ได้ครับ (FPS แค่นับเฉยๆว่าในหนึ่งวินาทีเนี่ย มัน render ไปแล้วกี่เฟรม) จะมากหรือน้อย ขึ้นอยู่กับการจัดการของ browser และเครื่องแล้วหละครับ
ผมใช้เครื่อง(ที่ทำงาน) pentium 4 กับ firefox รันได้ 20 กว่าๆเอง ส่วนอีกเครื่อง(ที่บ้าน) Athlon X2 กับ firefox รันได้ 150 กว่า กับ chrome เฉียดๆ 200 เลย
ถ้าจะทำเกมออกมาจริงๆจังๆ คงต้องระบุ minimum กับ recommend spec required แหละครับ เหมือนกับเกม pc ทั่วๆไป
แวะมาแปะ FPS ครับ เครื่องผมเท่าที่เช็ค FPS ดูจาก MacOSX 10.6.6 Safari ได้ 60-80 fps Opera ได้ 160-180 fps Chrome ได้ 200-220 fps สงสัยว่าทำไมทุกตัวแกว่งช่วงประมาณ 20 fps หมดเลยแฮะ
ถ้าล็อค fps ได้ก็คิดว่าน่าจะทำให้ลด "การเขมือบ CPU" ลงได้นะครับ?
ผมไม่รู้เรื่อง HTML5 นะ แต่ว่าเกมส์นี้ใช้ js ก็นึกถึงคำสั่ง settimeout ถ้ามีใช้แล้วลองปรับให้ถี่น้อยลง คิดว่าจะลดการเขมือบหรือเปล่า? (ตอนนี้ผมยังไม่ได้แกะโค้ดดู)
แต่นึกอีกแง่ การเขมือบ CPU นี้มันเป็นการจัดสรรจากตัว browser หรือเปล่า อาจจะหน่วงไม่ได้ (ฮา)
เกม Tetris นี้ ตอนนี้ผมได้ลองเอาลง Facebook แล้วครับ ก็พอเป็นแนวทางได้
http://apps.facebook.com/tetrisplus/
เล่นผ่านไอพอดได้ แต่มันกลับตัวต่อยังไงอ่ะ
เพิ่มปุ่มกดสำหรับ iphone/ipod/ipad แล้วครับ
อ่า แจ่มอ่ะครับ อยากทำบ้าง รอว่างก่อนจะลองทำดู
เเจ๋วเเ่มครับ ขอเเกะดูนะครับ
อยากรู้ครับว่าตัวเกมรันที่ client แล้วควบคุมเรื่อง high score ยังไงไม่ให้คนใส่ค่าลงไปมั่วๆ ครับ
บอกเป็นแนวทางละกันนะครับ (แต่ก็ไม่ใช่วิธีที่ดีที่สุดหรอก)
ผมใช้วิธีส่งค่าไปหลายๆอัน โดยฝั่ง server จะเอาไปตรวจสวบ(verify) ด้วย equation บางอย่าง ว่ามัน match กัน ถ้าไม่ ก็ไม่ต้อง take action ใดๆครับ
ครับ รู้สึกเหมือนว่าพอโปรแกรม execute ที่ client แล้วคุมลำบากมากจริงๆ just kidding the script
ผมก็เคยลองหาวิธีดีๆ อยู่ แต่ไม่พบเลยสักอัน
ก็นั่นแหละครับ ปัญหา 2 อย่างที่มันต่อเนื่องกัน
ถ้าเจอวิธีดีๆแล้วก็มาบอกกันบ้างนะครับ
ทำนานมั้ยครับ? ไอเดียดีครับสำหรับการลองเล่น canvas ของ html5
เล่นสนุกดีครับ ฮ่าๆ
เพิ่งเล่นเสร็จครับ ทิ้งคะแนนไว้แค่ 7000 เศษแล้วกดตายเลย เดี๋ยวสูงเกิน ที่สำคัญ เริ่มเมื่อย แต่รู้สึก Server Script มีบักนะครับ คะแนนที่โชว์มันเบิ้ลกัน (ของคนอื่น)
ลองเล่นแล้ว เจ๋งดี แต่เดี๋ยวไปข้างนอกก่อน เดี๋ยวกลับมาทำ high score
ลองเล่นแล้วดีครับ ยังไม่เคยศึกษา html5 เลย ขอแกะดูเป็นวิทยาทานหน่อยนะครับ
มันไม่ง่ายเลยที่จะทำ GIF ให้มีขนาดน้อยกว่า 20kB
เอาเลยครับ.. แกะเลย..
หลักๆก็ไม่มีอะไรหรอก ซ้ำๆกัน เพราะผมเซ็ต เช็คทีละอัน
ขอบคุณที่แบ่งปันครับ :)
แจ้งปัญหา ผมใช้ IE9 เล่นไม่ได้ครับ
ผมไม่แน่ใจว่าทำไม่ถึงเล่นไม่ได้ และไม่เคยทดสอบด้วยครับ เป็นไปได้ว่ายังไม่ใช่เวอร์ชั่นเต็ม
ปกติแล้ว MS เค้าก็บอกว่า IE9 จะรองรับ HTML5 ด้วย แถมเทพกว่า แรงกว่า browser ตัวอื่น
ดูเค้าเทสให้ดู
เดี๋ยวยังไงว่างๆจะลองทดสอบดูครับ
ครับ มันรองรับ 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 แล้วไม่ปล่อยผ่านเฉยๆ น่ะครับ
ที่มันแจ้งแบบนี้ คือมันไม่รู้จัก tag < canvas > มันเลยแสดงออกมาแบบนี้ ถ้ามันรู้จักมันก็จะแสดง canvas screen ออกมา ผมยังไม่แน่ใจว่าเกิดอะไรขึ้น ยังไงผมจะลองตรวจสอบดูนะครับ
เวิร์คดีครับ แต่ว่า...
เล่นครั้งแรก ได้ 0 แต้มเนี่ย นี่ทำไมผมเล่นไม่ได้ซักแถวเลย!?
= =
Dream high, work hard.
แนะนำเกี่ยวกับเกมหน่อยนะครับ
อันนี้สงสัย?
ใช้อัลกออะไรสุ่มตัว tetromino ครับ???
- random ล้วนๆครับ โดยให้มีโอกาศปล่อย สี่เหลี่ยมกับแท่งยาวมาเยอะกว่าอันอื่น สองเท่า
ทำไมเล่นไปเล่นมาแล้วมีตัว U ด้วยครับ
-อันนี้ไม่ได้ดู ไม่ได้อ้างอิง wiki มาอะครับ ใส่เข้าไปตามที่ผมคิดว่ามันมี
- ไม่แน่เดี๋ยวเอาไปออก
ส่วนคำแนะนำผมจะเอาไปปรับปรุงนะครับ
งั้นผมว่า ให้สุ่มทุกตัวเท่าๆ กันให้หมดดีกว่านะ ได้แท่งยาวมาเยอะเกินมันง่ายไปหน่อยอะครับ ;)
อ๋อ ที่ด้านล่างบอกว่าหมุนยาก รู้สึกว่าน่าจะเกิดจากการจองพื้นที่กระดานสำหรับตัว tetromino ไว้แค่ 10x15 ช่อง ซึ่งเท่ากับกระดานที่ใช้แสดงผลพอดีครับ
ถ้าจะทำให้หมุนง่าย ต้องเผื่อขนาดพื้นที่กระดานที่จองไว้เบื้องหลังสูงกว่านี้ครับ (เช่น แสดงผลสูง 15 แต่ก็จองไว้ซัก 17) แล้วตอนที่ gen ตัว tetromino มาจะได้หมุดได้ตั้งแต่แรกเลย
และถ้าจะพัฒนาวิธีเล่นให้มากกว่านั้น ต้องเขียนแบบให้มันหมุนได้ในสถาณการณ์ที่อาจเกิดขึ้นแบบใดๆ ก็ได้ด้วยครับ
ลองอ่านเพิ่มได้ที่ T-spin ครับ
เรื่องความยากง่าย ต้องค่อยๆปรับกันไปหนะครับ ตอนแรกผมปรับให้ออกมากเท่าๆกัน แต่ประกฎว่ามันสุ่มไปออก U บ่อย จนคนเล่น (รวมผมเอง) บอกว่ามันยากเกินไป แต่บางที่ก็คิดว่าท้าทายดีกับการทำ top score แบบยากๆ
เรื่องกับปรับขนาดพื้นที่และการหมุนที่แนะนำมา น่าสนใจดีครับ ใว้ยังไงวันหยุดนี้ผมจะลองแก้ดู
กลับกันว่าผมชอบแบบตัว U นะ คิดว่ามันแปลกดี *-* (และยากขึ้นด้วยมั่ง)
อึ่มมมม นานาจิตังครับ
แต่ตอนนี้ผมกำลังคิดว่า เกมนี้ใช้ชื่อเกมว่า Tetris ซึ่งมันอ้างอิงไปถึงเกมที่มีตัวตนอยู่แล้ว
ดังนั้น ความคาดหวังของผู้เล่นจึงน่าจะอยากเห็นเกมนี้ไม่แตกต่างไปจากเดิมมากนัก หรือถ้าแตกต่างก็ขอให้อยู่ในระดับที่รับได้ครับ
ส่วนตัวผมรับไม่ได้ครับ เพราะชื่อ Tertris มาจากคำว่า tetra (สี่) + tennis (กีฬาโปรดของต้นตำรับเจ้าของเกม)
แค่ชื่อก็บอกคอนเซปท์แล้ว ว่าต้องมีอะไรเกี่ยวข้องกับ 4 แน่ๆ (ซึ่งก็เป็นอย่างนั้นจริงๆ เพราะตัว tetromino ประกอบจากสี่เหลี่ยมเล็กๆ 4 อัน)
แต่จริงๆ มีตัว U ก็สนุกดีนะ เพียงแต่ถ้าจะใส่เข้าไปผมก็ไม่อยากเห็นเกมนี้ใช้ชื่อซ้ำกับของเก่า เพราะเราก็ดัดแปลงเกมไปตั้งเยอะแล้วหนิ
จะตั้งชื่อเป็น Pentris ก็ได้ แต่คำนี้น่ากลัวแฮะ อ่านออกเสียงผิดละยุ่งเลย ^^"
สุดยอดๆๆ
มือใหม่!! ใหม่จริงๆนะ
ผมว่ามันยังกดหมุนยากไปนิดนึงนะครับ :)
Down key = inscreasse fail speed ต้องแก้เป็น fall speed นะครับ
เกมมันกิน CPU เยอะเหมือนกันนะครับ พัดลมผมดังขึ้นมาอย่างได้ยินได้ชัด ถ้า set FPS ให้คงที่อาจจะกิน CPU น้องลงก็ได้
fail ซะงั้น มืนครับ เดี๋ยวไปแก้ก่อน
เรื่อง FPS ไม่สามารถ set ได้ครับ (FPS แค่นับเฉยๆว่าในหนึ่งวินาทีเนี่ย มัน render ไปแล้วกี่เฟรม)
จะมากหรือน้อย ขึ้นอยู่กับการจัดการของ browser และเครื่องแล้วหละครับ
ผมใช้เครื่อง(ที่ทำงาน) pentium 4 กับ firefox รันได้ 20 กว่าๆเอง
ส่วนอีกเครื่อง(ที่บ้าน) Athlon X2 กับ firefox รันได้ 150 กว่า
กับ chrome เฉียดๆ 200 เลย
ถ้าจะทำเกมออกมาจริงๆจังๆ คงต้องระบุ minimum กับ recommend spec required แหละครับ
เหมือนกับเกม pc ทั่วๆไป
แวะมาแปะ 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.
ผมไม่รู้เรื่อง HTML5 นะ แต่ว่าเกมส์นี้ใช้ js ก็นึกถึงคำสั่ง settimeout
ถ้ามีใช้แล้วลองปรับให้ถี่น้อยลง คิดว่าจะลดการเขมือบหรือเปล่า? (ตอนนี้ผมยังไม่ได้แกะโค้ดดู)
แต่นึกอีกแง่ การเขมือบ CPU นี้มันเป็นการจัดสรรจากตัว browser หรือเปล่า
อาจจะหน่วงไม่ได้ (ฮา)
มันไม่ง่ายเลยที่จะทำ GIF ให้มีขนาดน้อยกว่า 20kB
เกม Tetris นี้
ตอนนี้ผมได้ลองเอาลง Facebook แล้วครับ ก็พอเป็นแนวทางได้
http://apps.facebook.com/tetrisplus/
เล่นผ่านไอพอดได้ แต่มันกลับตัวต่อยังไงอ่ะ
เพิ่มปุ่มกดสำหรับ iphone/ipod/ipad แล้วครับ
อ่า แจ่มอ่ะครับ อยากทำบ้าง รอว่างก่อนจะลองทำดู
เเจ๋วเเ่มครับ ขอเเกะดูนะครับ
อยากรู้ครับว่าตัวเกมรันที่ client แล้วควบคุมเรื่อง high score ยังไงไม่ให้คนใส่ค่าลงไปมั่วๆ ครับ
บอกเป็นแนวทางละกันนะครับ
(แต่ก็ไม่ใช่วิธีที่ดีที่สุดหรอก)
ผมใช้วิธีส่งค่าไปหลายๆอัน โดยฝั่ง server จะเอาไปตรวจสวบ(verify) ด้วย equation บางอย่าง ว่ามัน match กัน
ถ้าไม่ ก็ไม่ต้อง take action ใดๆครับ
ครับ รู้สึกเหมือนว่าพอโปรแกรม execute ที่ client แล้วคุมลำบากมากจริงๆ
just kidding the script
ผมก็เคยลองหาวิธีดีๆ อยู่ แต่ไม่พบเลยสักอัน
ก็นั่นแหละครับ
ปัญหา 2 อย่างที่มันต่อเนื่องกัน
ถ้าเจอวิธีดีๆแล้วก็มาบอกกันบ้างนะครับ
ทำนานมั้ยครับ? ไอเดียดีครับสำหรับการลองเล่น canvas ของ html5
เล่นสนุกดีครับ ฮ่าๆ
เพิ่งเล่นเสร็จครับ ทิ้งคะแนนไว้แค่ 7000 เศษแล้วกดตายเลย เดี๋ยวสูงเกิน ที่สำคัญ เริ่มเมื่อย แต่รู้สึก Server Script มีบักนะครับ คะแนนที่โชว์มันเบิ้ลกัน (ของคนอื่น)