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

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

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

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

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

ปกติแล้ว 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 แต้มเนี่ย นี่ทำไมผมเล่นไม่ได้ซักแถวเลย!?
= =

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

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

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

  • ใช้อัลกออะไรสุ่มตัว tetromino ครับ??? ผมได้ O (สี่เหลี่ยม) กับ I (แท่งยาว) บ่อยมากๆ จนตกใจ
  • ทำไมเล่นไปเล่นมาแล้วมีตัว U ด้วยครับ (มันไม่ใช่ tetromino อะ เป็น pentomino ไปซะหนิ - -")

ใช้อัลกออะไรสุ่มตัว tetromino ครับ???

  • random ล้วนๆครับ โดยให้มีโอกาศปล่อย สี่เหลี่ยมกับแท่งยาวมาเยอะกว่าอันอื่น สองเท่า

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

  • ไม่แน่เดี๋ยวเอาไปออก

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

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

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

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

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

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

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

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

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

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

Jai_Magical Wed, 12/01/2011 - 09:51

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 ทั่วๆไป

inkirby Wed, 12/01/2011 - 13:12

แวะมาแปะ 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 หรือเปล่า
อาจจะหน่วงไม่ได้ (ฮา)

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

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

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

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

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

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

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

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

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

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