رسم شبكة في جافا سكريبت (لعبة الحياة، على سبيل المثال)

Question

في الأساس، كان لدي هذه الفكرة في رأسي لنوع من محاكاة التطور، وليس تماما مثل لعبة Conways Life، ولكن الجزء الذي يقوم به المباراة هو أن كلاهما سيعتمد على شبكة مربعة.

الآن، شخصيا، أحب العمل في HTML + JavaScript + للحصول على تطبيقات بسيطة، لأنها تسمح بإنشاء واجهة المستخدم السريع، وإذا كنت لا تفعل شيئا ثقيلا بحسب حسابي، فإن JS في متصفح هو منصة لائقة.

المشكلة التي أحاول حلها الآن تنطوي الآن على رسم وتحديث الشبكة. قد أكون في عداد المفقودين شيئا ما، لكن يبدو أنه لا توجد طريقة سهلة وسريعة الحسابية للقيام بذلك لشبكة 80x40. الطريقة السهلة ستكون لتوليد DIV مع وضع مطلق ولون خلفية محددة لأي مربع غير فارغ. ومع ذلك، يمكن أن تصبح بطيئا للغاية مع أي شيء أكثر من 60-70 مربعات ملونة.

أنا بالتأكيد على استعداد للتبديل إلى لغة مختلفة إذا استدعاء الموقف، ولكن أولا أريد أن أعرف أنني لست مفقودا بغباء بطريقة سهلة للقيام بذلك مع HTML + JS.

يجب أن تتضمن الإجابة أي ما يلي:

أ) طريقة معقولة لرسم وتحديث شبكة 80x40 (حيث تغير المربعات اللون و "نقل") في HTML + JS

ب) لغة أخرى يمكن أن تفعل هذا بسرعة معقولة. أفضل أن أتجنب الاضطرار إلى قضاء بعض الأيام في تعلم DirectDraw أو شيء من هذا النوع.

Answer 1

لماذا لا تبني الشبكة كجدول HTML؟ بعد كل هذا ما تريد؟

امنح كل خلية معرف محسوب وإنشاء بعض وظائف JavaScript لتحديثها. شودلنت يكون مشكلة على الإطلاق.

يمكنك إلقاء نظرة على علامة قماش جديدة في HTML 5 ولكن من ما قلته لا أعتقد أنك بحاجة إليها.

Answer 2

<canvas> يبدو أن الطريقة الصحيحة للقيام بذلك. مكتبة مثل رافائيل سوف تساعدك على تجنب القضايا عبر النظام الأساسي. خيارات أخرى هي baliting.js., ، لكنها لا تعمل في IE.

Answer 3

بالنسبة لشبكة صغيرة (<100x100)، استخدم طاولة وإعطاء كل خلية معرف للوصول السريع.

بالنسبة لشبكات أكبر، يجب عليك التفكير في استخدام كائن قماش أو تضمين تطبيق Java أو Flash.