الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

Google Santa Tracker للويب

يحتوي هذا المستودع على الرمز إلى Google Santa Tracker ، وهو تقليد تعليمي ومسلي لفترة عطلة ديسمبر.

نأمل أن تجد هذا الكود المصدر مثيرًا للاهتمام. بشكل عام ، لا نقبل المساهمات الخارجية من الجمهور. يمكنك تقديم تقارير الأخطاء أو طلبات الميزات ، أو الاتصال بـ Engineering Lead Jez Swanson.

(هذا النص مكرر في المساهمة.

يدعم

يدعم Santa Tracker إصدارات دائمة الخضرة من Chrome و Firefox و Safari. كما يدعم المتصفحات الأخرى المستندة إلى الكروم (Edge ، Opera إلخ).

نقدم أيضًا "وضع احتياطي" للمتصفحات القديمة ، مثل IE11 ، والتي تتيح للمستخدمين لعب عدد صغير من الألعاب التاريخية.

هيكل الموقع

يتم تقسيم Santa Tracker إلى مشاهد مختلفة. تتوافق كل صفحة على Santa Tracker مع مشهد واحد ، بما في ذلك صفحة القرية الرئيسية ، Modvil. المشاهد موجودة في المشاهد/ المشاهد/ الدليل. يتم تحميل كل مشهد على أنه iFrame ، ويتم احتوائه ذاتيًا نسبيًا.

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

دليل التنمية

الجري محليا

ستحتاج إلى yarn أو npm . قد تحتاج أيضًا إلى Java إذا كنت تبني على Windows ، حيث أن الإصدار الثنائي من برنامج Closure Shows غير مدعوم على هذا النظام الأساسي.

استنساخ وتشغيل yarn أو npm install لتثبيت DEPS ، وتشغيل ./serve.js لتشغيل خادم تطوير. سيتم نسخ عنوان URL للتطوير إلى الحافظة.

سوف يستمع ./serve.js النصي. يخدم المنفذ 8000 الجزء المضيف من الموقع (وهذا يتوافق مع مجال الإنتاج https://santatracker.google.com) ، ويخدم المنفذ 8080 المحتوى الثابت ، بما في ذلك المشاهد.

لتحميل مشهد معين ، افتح على سبيل المثال ، http: // localhost: 8000/boatload.html. بمجرد تحميل الموقع ، يمكنك أيضًا تشغيل santaApp.route = 'sceneName' في وحدة التحكم لتبديل المشاهد برمجيًا.

إذا كنت ترغب في تحميل مشهد من المجال الثابت - دون رمز "المضيف" - يمكنك تحميله على سبيل المثال ، على سبيل المثال ، http://127.0.0.1:8080/st/scenes/elfmaker/. هذا لا يساوي عن قصد "المضيف المحلي" بحيث يتم تشغيل المجال المتقاطع الثابت. يوفر "المضيف" الدرجات والصوت وبعض واجهة المستخدم ، لذلك لا يتوفر كل السلوك في هذا الوضع.

اعتبارًا من عام 2020 ، يتطلب التطوير متصفحًا من الكروم أو المتصفح القائم على الكروم. ويرجع ذلك إلى الطريقة التي نحدد بها طلبات استيراد ESM ، حيث يحدد Chromium رؤوس إضافية. (هذا خطأ وليس ميزة.)

أضف مشهدًا جديدًا

المشاهد هي في الأساس مجرد صفحات محملة في <iframe> . يمكنك كتابتها بأي طريقة تريدها ، ولكن تأكد من الاتصال بـ "المضيف" لتشغيل الصوت أو التقارير أو طلب أشياء أخرى مثل عرض البرامج التعليمية.

لإضافة مشهد جديد ، ستحتاج إلى:

  • قم بإنشاء مجلد static/scenes/sceneName ، إضافة index.html ، والذي يقوم بتشغيل التعليمات البرمجية في وحدات ES فقط:

    1. تأكد من تضمين <script type="module"> التي تستورد src/scene/api.js ، والتي تقوم بإعداد الاتصال بـ prod "المضيف".
    2. استمع اختياريا إلى الأحداث من واجهة برمجة التطبيقات ، مثل "الإيقاف المؤقت" و "السيرة الذاتية" و "إعادة التشغيل" ؛ وتكوين api.ready(() => { ... }) رد الاتصال الذي يتم تشغيله عندما يتم تبديل المشهد
    3. استيراد عنوان URL js/ ./:closure.js
    4. لمزيد من المعلومات ، شاهد مشهدًا موجودًا مثل حمولة القوارب أو Santaselfie

  • إضافة PNGs المرتبطة:

    • static/img/scenes/sceneName_2x.png (950 × 564) و sceneName_1x.png (475x282)
    • prod/images/og/sceneName.png (1333x1000)

  • اسم المشهد داخل السلاسل.

  • إذا لم يتم إصدار المشهد الخاص بك للإنتاج ، فقم بتعطيله داخل الإصدار. js.

بيئة

يوفر نظام الإنشاء نظام ملفات افتراضية يقوم تلقائيًا بتجميع أنواع المصادر المختلفة تلقائيًا مفيدة للتطوير ويوفر عددًا من المساعدين. وهذا يشمل:

  • يتم إنشاء ملفات .css .scss
  • يتم إنشاء .json من أجل .json5
  • يمكن قراءة ملف static/scenes/sceneName/:closure.js لتجميع js/ مجلد مشهد أقدم مع برنامج التحويل البرمجي الإغلاق ، مما يوفر وحدة JS مع تصدير افتراضي.

هذه الملفات غير موجودة بالفعل ، ولكن يتم إنشاؤها تلقائيًا عند الاستخدام. على سبيل المثال ، في حالة وجود foo.scss ، يمكنك ببساطة تحميل foo.css لتجميعها تلقائيًا.

مساعدون ساس

عند كتابة SCSS ، يقوم المساعد _rel(path.png) بإنشاء url() الذي يشير إلى ملف بالنسبة إلى ملف مصدر .scss الحالي - حتى الواردات.

يعمل هذا بغض النظر عن كيفية استخدام SCSS أخيرًا ، سواء كان <link href="..." /> أو كجزء من مكون الويب.

جافا سكريبت

يوفر الملف المصدر static/src/magic.js العديد من مساعدي علامات القالب التي ، على الرغم من وظائفها الحقيقية ، في وقت الإصدار. وتشمل هذه:

  • _msg`msgid_here`​ يولد سلسلة i18n المقابلة
  • _static`path_name`​ يولد مرجعًا مطلقًا إلى ملف داخل static

أيضًا ، تم تصميم Santa Tracker باستخدام وحدات JS وسيعيد كتابة الواردات غير المرتبطة بـ node_modules . على سبيل المثال ، إذا قمت import {LitElement} from 'lit-element'; ، سيتم إعادة كتابة هذا إلى طريقه الكامل للتطوير أو الإصدار.

الواردات

بالإضافة إلى JavaScript نفسها ، تتيح بيئة تطوير Santa Tracker استيراد أنواع الوحدات المستقبلية: CSS و JSON و HTML.

مدخل

عند إمكانية دعم اللمس ولوحة المفاتيح وإدخال GamePad. لاحظ أنه يتم تقديم دعم GamePad الأساسي عبر أحداث لوحة المفاتيح الاصطناعية في Keys.js.

صوت

يستخدم Santa Tracker مكتبة صوتية معروفة موجودة في "مضيف" Prod فقط ، ولكن يمكن أن يتم تشغيلها بواسطة مكالمات API في المشاهد. هذا غير موثق إلى حد كبير ويقدمه بائع خارجي. إذا كنت مهتمًا بملفات مصدر الصوت ، فهي في حالة ريبو تحت static/audio (وهي مرخصة ، كما هو مذكور أدناه ، مثل CC-BY).

تلعب مكتبة الصوت مشغلات الصوت التي تلعب الأصوات المؤقتة (على سبيل المثال ، زر نقرة) أو حلقات (مسارات صوتية). يمكن تكوين المشاهد باستخدام مشغلات الصوت للبدء بـ (عبر api.config({sound: [...]}) ) والتي ستتسبب في توقف جميع الصوت السابق ، جيد لإغلاق الألعاب السابقة.

الترجمات

يحتوي Santa Tracker على ترجمات لمجموعة متنوعة من اللغات المختلفة. يتم الحصول على هذه الترجمات من أداة الترجمة الداخلية من Google.

إذا كنت تضيف سلسلة للتطوير ، فيرجى تعديل en_src_messages.json واطلب من موظف Google طلب تشغيل ترجمة. إذا كنت تقوم ببناء Santa Tracker للإنتاج ، فستحتاج إلى ترجمة السلسلة والمخرج النهائي الموجود في lang/ .

إنتاج

على الرغم من أن الرمز المصدر يتضمن برنامجًا نصًا للإصدار ، إلا أنه ليس من المقرر أن يعمل المستخدمون النهائيون ويستخدمونه Googlers لنشر الموقع.

الإصدارات التاريخية

الإصدار السابق من Santa Tracker ، المستخدم حتى 2018 ، متاح في فرع Archive-2018.

رخصة

يتم ترخيص جميع ملفات الصور والصوت (بما في ذلك *.png و *.jpg و *.svg و *.mp3 و *.wav و *. جميع الملفات الأخرى مرخصة بموجب ترخيص Apache 2. انظر ملف الترخيص للحصول على التفاصيل. 

 Copyright 2020 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل