เกมตัวต่อ (Tetris) เขียนโดย HTML5 Canvas ใช้ PHP upload เก็บและแสดง Top Score
ผมใช้เวลาเขียน 3 วัน (ประมาณ 12 ชั่วโมง)
เรื่อง graphic ก็อย่าไปซีเรียสนะครับ เพราะ Programmer ทำคนเดียวเิอง
เผื่อว่าใครยังไม่ได้เล่นนะครับ ลองดู
คลิก!!
Hiring! บริษัทที่น่าสนใจ
CP AXTRA Public Company Limited - Lotus's
CP AXTRA Lotus's is revolutionizing the retail industry as a Retail Tech company.
Token X
Blockchain, ICO, Tokenization, Digital Assets, and Financial Service
Carmen Software
Hotel Financial Solutions
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
United Information Highway Co., Ltd.
UIH is Thailand’s leading Digital Infrastructure and Solution Provider for Business
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
CDG GROUP
Provider of IT solutions to public, state, and private sectors in Thailand for over 56 years
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
Gofive
“We create world-class software experience”
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
LTMH TECH
LTMH TECH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand
Apple
public://topics-images/apple_webp.png
SCB10X
public://topics-images/347823389_774095087711602_515970870797767330_n_webp.png
Windows 11
public://topics-images/hero-bloom-logo.jpg
Huawei
public://topics-images/huawei_standard_logo.svg_.png
Google Keep
public://topics-images/google_keep_2020_logo.svg_.png
Instagram
public://topics-images/instagram_logo_2022.svg_.png
SCB
public://topics-images/9crhwyxv_400x400.jpg
Microsoft
public://topics-images/microsoft_logo.svg_.png
Basecamp
public://topics-images/bwpepdi0_400x400.jpg
Tinder
public://topics-images/hwizi8ny_400x400.jpg
FTC
public://topics-images/seal_of_the_united_states_federal_trade_commission.svg_.png
Pinterest
public://topics-images/pinterest.png
Palantir
public://topics-images/-nzsuc6w_400x400.png
AIS Business
public://topics-images/logo-business-2021-1.png
PostgreSQL
public://topics-images/images.png
JetBrains
public://topics-images/icx8y2ta_400x400.png
Krungthai
public://topics-images/aam1jxs6_400x400.jpg
Palworld
public://topics-images/mccyhcqf_400x400.jpg
Bill Gates
public://topics-images/bill_gates-september_2024.jpg
VMware
public://topics-images/1nj4i1gp_400x400.jpg
Take-Two Interactive
public://topics-images/0khle7nh_400x400.jpg
OpenAI
public://topics-images/ztsar0jw_400x400.jpg
Thailand
public://topics-images/flag_of_thailand.svg_.png
NVIDIA
public://topics-images/srvczsfq_400x400.jpg
ServiceNow
public://topics-images/ytnrfphe_400x400.png
Klarna
public://topics-images/urcllpjp_400x400.png
Google Play
public://topics-images/play.png
Drupal
public://topics-images/drupal.png
Virtua Fighter
public://topics-images/virtua_figther_2024_logo.png
Paradox Interactive
public://topics-images/paradox_interactive_logo.svg_.png
Europa Universalis
public://topics-images/europa-icon.png
Nintendo Switch 2
public://topics-images/mainvisual.png
Cloudflare
public://topics-images/cloudflare_logo.svg_.png
Samsung
public://topics-images/samsung.png
Google
public://topics-images/google_2015_logo.svg_.png
Uber
public://topics-images/uber.png
Microsoft 365
public://topics-images/m365.png
USA
public://topics-images/flag_of_the_united_states.svg_.png
GM
public://topics-images/0pe0po-z_400x400.jpg
Perplexity
public://topics-images/perplex.jpg
Xperia
public://topics-images/xperia.png
iOS 18
public://topics-images/ios-18-num-96x96_2x.png
True
public://topics-images/true_logo.png
SoftBank
public://topics-images/softbank.jpg
Pac-Man
public://topics-images/pacman.png
Harry Potter
public://topics-images/harry.png
Marvel
public://topics-images/marvel.png
Skydance
public://topics-images/skydance.png
SEA
public://topics-images/sealogo.png
Find My Device
public://topics-images/find.png
Gemini
public://topics-images/google_gemini_logo.svg__1.png
Accessibility
public://topics-images/accessibility-128x128_2x.png
Material Design
public://topics-images/m3-favicon-apple-touch.png
Android 16
public://topics-images/android16.png
Android
public://topics-images/android_0.png
Firefox
public://topics-images/firefox_logo-2019.svg_.png
Google Messages
public://topics-images/messages.png
Notepad
public://topics-images/notepad.png
Singapore
public://topics-images/flag_of_singapore.svg_.png
Airbnb
public://topics-images/airbnb.png
PS5
public://topics-images/ps5.png
Krafton
public://topics-images/krafton.png
Doom
public://topics-images/doom-game-s_logo.svg_.png
AMD
public://topics-images/amd_logo.svg_.png
GTA
public://topics-images/gta_0.png
DoorDash
public://topics-images/doordash.png
YouTube
public://topics-images/yt.png
YouTube Music
public://topics-images/yt-music.png
Facebook
public://topics-images/fb.png
iQiyi
public://topics-images/iqiyi_0.png
Viu
public://topics-images/viu.png
Amazon Prime Video
public://topics-images/prime-vid.png
Spotify
public://topics-images/spotify.jpg
Apple TV
public://topics-images/apple-tv.png
HBO Max
public://topics-images/max.png
Threads
public://topics-images/threads.png
Alexa
public://topics-images/alexa.png
Kindle App
public://topics-images/kindle.png
Shopee
public://topics-images/shopee.png
Waze
public://topics-images/waze.png
Bilibili
public://topics-images/bili.png
Google Maps
public://topics-images/maps.png
Apple Music
public://topics-images/apple-music.png
Claude
public://topics-images/claude.png
TikTok
public://topics-images/tiktok.png
Xbox
public://topics-images/xbox.png
Tesla
public://topics-images/tesla.png
Chrome
public://topics-images/chrome.png
Google Calendar
public://topics-images/gcal.png
Google Home
public://topics-images/ghome.png
Google Meet
public://topics-images/meet.png
NotebookLM
public://topics-images/notebooklm.png
Reddit
public://topics-images/reddit.png
Assassin’s Creed
public://topics-images/ac.png
Mark Zuckerberg
public://topics-images/zuck.jpg
Meta
public://topics-images/meta.png
Meta AI
public://topics-images/meta-ai.png
Epic Games
public://topics-images/epic_games_logo.svg_.png
Unreal
public://topics-images/unreal_engine_logo-new_typeface-svg.png
Fortnite
public://topics-images/fortnite.png
DeepMind
public://topics-images/deepmind.png
ลองเล่นแล้ว เจ๋งดี
manaeeee Tue, 01/11/2011 - 16:47
ลองเล่นแล้ว เจ๋งดี แต่เดี๋ยวไปข้างนอกก่อน เดี๋ยวกลับมาทำ high score
ลองเล่นแล้วดีครับ
EThaiZone Tue, 01/11/2011 - 17:22
ลองเล่นแล้วดีครับ ยังไม่เคยศึกษา html5 เลย ขอแกะดูเป็นวิทยาทานหน่อยนะครับ
เอาเลยครับ..
le-phather Tue, 01/11/2011 - 17:33
เอาเลยครับ.. แกะเลย..
หลักๆก็ไม่มีอะไรหรอก ซ้ำๆกัน เพราะผมเซ็ต เช็คทีละอัน
ขอบคุณที่แบ่งปันครับ :)
meawwat Wed, 01/12/2011 - 09:31
In reply to เอาเลยครับ.. by le-phather
ขอบคุณที่แบ่งปันครับ :)
แจ้งปัญหา ผมใช้ IE9
hisoft Tue, 01/11/2011 - 18:28
แจ้งปัญหา ผมใช้ IE9 เล่นไม่ได้ครับ
ผมไม่แน่ใจว่าทำไม่ถึงเล่นไม่ไ
le-phather Tue, 01/11/2011 - 21:44
In reply to แจ้งปัญหา ผมใช้ IE9 by hisoft
ผมไม่แน่ใจว่าทำไม่ถึงเล่นไม่ได้ และไม่เคยทดสอบด้วยครับ เป็นไปได้ว่ายังไม่ใช่เวอร์ชั่นเต็ม
ปกติแล้ว MS เค้าก็บอกว่า IE9 จะรองรับ HTML5 ด้วย แถมเทพกว่า แรงกว่า browser ตัวอื่น
ดูเค้าเทสให้ดู
เดี๋ยวยังไงว่างๆจะลองทดสอบดูครับ
ครับ มันรองรับ HTML5 จริง
hisoft Tue, 01/11/2011 - 23:13
In reply to ผมไม่แน่ใจว่าทำไม่ถึงเล่นไม่ไ by le-phather
ครับ มันรองรับ 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 แล้วไม่ปล่อยผ่านเฉยๆ น่ะครับ
ที่มันแจ้งแบบนี้
le-phather Wed, 01/12/2011 - 11:45
In reply to ครับ มันรองรับ HTML5 จริง by hisoft
ที่มันแจ้งแบบนี้ คือมันไม่รู้จัก tag < canvas > มันเลยแสดงออกมาแบบนี้ ถ้ามันรู้จักมันก็จะแสดง canvas screen ออกมา ผมยังไม่แน่ใจว่าเกิดอะไรขึ้น ยังไงผมจะลองตรวจสอบดูนะครับ
เวิร์คดีครับ
inkirby Tue, 01/11/2011 - 20:14
เวิร์คดีครับ แต่ว่า...
เล่นครั้งแรก ได้ 0 แต้มเนี่ย นี่ทำไมผมเล่นไม่ได้ซักแถวเลย!?
= =
แนะนำเกี่ยวกับเกมหน่อยนะครับ
neizod Tue, 01/11/2011 - 22:43
แนะนำเกี่ยวกับเกมหน่อยนะครับ
อันนี้สงสัย?
ใช้อัลกออะไรสุ่มตัว tetromino
le-phather Wed, 01/12/2011 - 00:13
In reply to แนะนำเกี่ยวกับเกมหน่อยนะครับ by neizod
ใช้อัลกออะไรสุ่มตัว tetromino ครับ???
ทำไมเล่นไปเล่นมาแล้วมีตัว U ด้วยครับ
-อันนี้ไม่ได้ดู ไม่ได้อ้างอิง wiki มาอะครับ ใส่เข้าไปตามที่ผมคิดว่ามันมี
ส่วนคำแนะนำผมจะเอาไปปรับปรุงนะครับ
งั้นผมว่า ให้สุ่มทุกตัวเท่าๆ
neizod Wed, 01/12/2011 - 02:55
In reply to ใช้อัลกออะไรสุ่มตัว tetromino by le-phather
งั้นผมว่า ให้สุ่มทุกตัวเท่าๆ กันให้หมดดีกว่านะ ได้แท่งยาวมาเยอะเกินมันง่ายไปหน่อยอะครับ ;)
อ๋อ ที่ด้านล่างบอกว่าหมุนยาก รู้สึกว่าน่าจะเกิดจากการจองพื้นที่กระดานสำหรับตัว tetromino ไว้แค่ 10x15 ช่อง ซึ่งเท่ากับกระดานที่ใช้แสดงผลพอดีครับ
ถ้าจะทำให้หมุนง่าย ต้องเผื่อขนาดพื้นที่กระดานที่จองไว้เบื้องหลังสูงกว่านี้ครับ (เช่น แสดงผลสูง 15 แต่ก็จองไว้ซัก 17) แล้วตอนที่ gen ตัว tetromino มาจะได้หมุดได้ตั้งแต่แรกเลย
และถ้าจะพัฒนาวิธีเล่นให้มากกว่านั้น ต้องเขียนแบบให้มันหมุนได้ในสถาณการณ์ที่อาจเกิดขึ้นแบบใดๆ ก็ได้ด้วยครับ
ลองอ่านเพิ่มได้ที่ T-spin ครับ
เรื่องความยากง่าย
le-phather Wed, 01/12/2011 - 11:42
In reply to งั้นผมว่า ให้สุ่มทุกตัวเท่าๆ by neizod
เรื่องความยากง่าย ต้องค่อยๆปรับกันไปหนะครับ ตอนแรกผมปรับให้ออกมากเท่าๆกัน แต่ประกฎว่ามันสุ่มไปออก U บ่อย จนคนเล่น (รวมผมเอง) บอกว่ามันยากเกินไป แต่บางที่ก็คิดว่าท้าทายดีกับการทำ top score แบบยากๆ
เรื่องกับปรับขนาดพื้นที่และการหมุนที่แนะนำมา น่าสนใจดีครับ ใว้ยังไงวันหยุดนี้ผมจะลองแก้ดู
กลับกันว่าผมชอบแบบตัว U นะ
RYUTAZA Fri, 01/14/2011 - 19:13
In reply to ใช้อัลกออะไรสุ่มตัว tetromino by le-phather
กลับกันว่าผมชอบแบบตัว U นะ คิดว่ามันแปลกดี *-* (และยากขึ้นด้วยมั่ง)
อึ่มมมม
neizod Fri, 01/14/2011 - 20:28
In reply to กลับกันว่าผมชอบแบบตัว U นะ by RYUTAZA
อึ่มมมม นานาจิตังครับ
แต่ตอนนี้ผมกำลังคิดว่า เกมนี้ใช้ชื่อเกมว่า Tetris ซึ่งมันอ้างอิงไปถึงเกมที่มีตัวตนอยู่แล้ว
ดังนั้น ความคาดหวังของผู้เล่นจึงน่าจะอยากเห็นเกมนี้ไม่แตกต่างไปจากเดิมมากนัก หรือถ้าแตกต่างก็ขอให้อยู่ในระดับที่รับได้ครับ
ส่วนตัวผมรับไม่ได้ครับ เพราะชื่อ Tertris มาจากคำว่า tetra (สี่) + tennis (กีฬาโปรดของต้นตำรับเจ้าของเกม)
แค่ชื่อก็บอกคอนเซปท์แล้ว ว่าต้องมีอะไรเกี่ยวข้องกับ 4 แน่ๆ (ซึ่งก็เป็นอย่างนั้นจริงๆ เพราะตัว tetromino ประกอบจากสี่เหลี่ยมเล็กๆ 4 อัน)
แต่จริงๆ มีตัว U ก็สนุกดีนะ เพียงแต่ถ้าจะใส่เข้าไปผมก็ไม่อยากเห็นเกมนี้ใช้ชื่อซ้ำกับของเก่า เพราะเราก็ดัดแปลงเกมไปตั้งเยอะแล้วหนิ
จะตั้งชื่อเป็น Pentris ก็ได้ แต่คำนี้น่ากลัวแฮะ อ่านออกเสียงผิดละยุ่งเลย ^^"
สุดยอดๆๆ
tg-thaigamer Tue, 01/11/2011 - 23:05
สุดยอดๆๆ
ผมว่ามันยังกดหมุนยากไปนิดนึงน
nut_457 Tue, 01/11/2011 - 23:14
ผมว่ามันยังกดหมุนยากไปนิดนึงนะครับ :)
Down key = inscreasse fail
Jai_Magical Wed, 01/12/2011 - 09:51
Down key = inscreasse fail speed ต้องแก้เป็น fall speed นะครับ
เกมมันกิน CPU เยอะเหมือนกันนะครับ พัดลมผมดังขึ้นมาอย่างได้ยินได้ชัด ถ้า set FPS ให้คงที่อาจจะกิน CPU น้องลงก็ได้
fail ซะงั้น มืนครับ
le-phather Wed, 01/12/2011 - 11:38
In reply to Down key = inscreasse fail by Jai_Magical
fail ซะงั้น มืนครับ เดี๋ยวไปแก้ก่อน
เรื่อง FPS ไม่สามารถ set ได้ครับ (FPS แค่นับเฉยๆว่าในหนึ่งวินาทีเนี่ย มัน render ไปแล้วกี่เฟรม)
จะมากหรือน้อย ขึ้นอยู่กับการจัดการของ browser และเครื่องแล้วหละครับ
ผมใช้เครื่อง(ที่ทำงาน) pentium 4 กับ firefox รันได้ 20 กว่าๆเอง
ส่วนอีกเครื่อง(ที่บ้าน) Athlon X2 กับ firefox รันได้ 150 กว่า
กับ chrome เฉียดๆ 200 เลย
ถ้าจะทำเกมออกมาจริงๆจังๆ คงต้องระบุ minimum กับ recommend spec required แหละครับ
เหมือนกับเกม pc ทั่วๆไป
แวะมาแปะ FPS
inkirby Wed, 01/12/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 นะ
EThaiZone Wed, 01/12/2011 - 13:50
ผมไม่รู้เรื่อง HTML5 นะ แต่ว่าเกมส์นี้ใช้ js ก็นึกถึงคำสั่ง settimeout
ถ้ามีใช้แล้วลองปรับให้ถี่น้อยลง คิดว่าจะลดการเขมือบหรือเปล่า? (ตอนนี้ผมยังไม่ได้แกะโค้ดดู)
แต่นึกอีกแง่ การเขมือบ CPU นี้มันเป็นการจัดสรรจากตัว browser หรือเปล่า
อาจจะหน่วงไม่ได้ (ฮา)
เกม Tetris
le-phather Fri, 01/14/2011 - 18:27
เกม Tetris นี้
ตอนนี้ผมได้ลองเอาลง Facebook แล้วครับ ก็พอเป็นแนวทางได้
http://apps.facebook.com/tetrisplus/
เล่นผ่านไอพอดได้
mapkung14 Fri, 01/14/2011 - 20:53
เล่นผ่านไอพอดได้ แต่มันกลับตัวต่อยังไงอ่ะ
เพิ่มปุ่มกดสำหรับ
le-phather Sat, 01/15/2011 - 18:08
In reply to เล่นผ่านไอพอดได้ by mapkung14
เพิ่มปุ่มกดสำหรับ iphone/ipod/ipad แล้วครับ
อ่า แจ่มอ่ะครับ อยากทำบ้าง
mehn Fri, 01/14/2011 - 21:57
อ่า แจ่มอ่ะครับ อยากทำบ้าง รอว่างก่อนจะลองทำดู
เเจ๋วเเ่มครับ ขอเเกะดูนะครับ
9rockky Sat, 01/15/2011 - 17:42
เเจ๋วเเ่มครับ ขอเเกะดูนะครับ
อยากรู้ครับว่าตัวเกมรันที่
bongikairu Sat, 01/15/2011 - 18:36
อยากรู้ครับว่าตัวเกมรันที่ client แล้วควบคุมเรื่อง high score ยังไงไม่ให้คนใส่ค่าลงไปมั่วๆ ครับ
บอกเป็นแนวทางละกันนะครับ (แต่
le-phather Sat, 01/15/2011 - 21:04
In reply to อยากรู้ครับว่าตัวเกมรันที่ by bongikairu
บอกเป็นแนวทางละกันนะครับ
(แต่ก็ไม่ใช่วิธีที่ดีที่สุดหรอก)
ผมใช้วิธีส่งค่าไปหลายๆอัน โดยฝั่ง server จะเอาไปตรวจสวบ(verify) ด้วย equation บางอย่าง ว่ามัน match กัน
ถ้าไม่ ก็ไม่ต้อง take action ใดๆครับ
ครับ รู้สึกเหมือนว่าพอโปรแกรม
bongikairu Sat, 01/15/2011 - 21:52
In reply to บอกเป็นแนวทางละกันนะครับ (แต่ by le-phather
ครับ รู้สึกเหมือนว่าพอโปรแกรม execute ที่ client แล้วคุมลำบากมากจริงๆ
just kidding the script
ผมก็เคยลองหาวิธีดีๆ อยู่ แต่ไม่พบเลยสักอัน
ก็นั่นแหละครับ ปัญหา 2
le-phather Sat, 01/15/2011 - 22:42
In reply to ครับ รู้สึกเหมือนว่าพอโปรแกรม by bongikairu
ก็นั่นแหละครับ
ปัญหา 2 อย่างที่มันต่อเนื่องกัน
ถ้าเจอวิธีดีๆแล้วก็มาบอกกันบ้างนะครับ
ทำนานมั้ยครับ?
tholapz Thu, 11/17/2011 - 16:42
ทำนานมั้ยครับ? ไอเดียดีครับสำหรับการลองเล่น canvas ของ html5
เล่นสนุกดีครับ ฮ่าๆ
เพิ่งเล่นเสร็จครับ
supatee Fri, 12/23/2011 - 20:24
เพิ่งเล่นเสร็จครับ ทิ้งคะแนนไว้แค่ 7000 เศษแล้วกดตายเลย เดี๋ยวสูงเกิน ที่สำคัญ เริ่มเมื่อย แต่รู้สึก Server Script มีบักนะครับ คะแนนที่โชว์มันเบิ้ลกัน (ของคนอื่น)