หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Google Santa Tracker สำหรับเว็บ

ที่เก็บนี้มีรหัสไปยัง Google Santa Tracker ซึ่งเป็นประเพณีการศึกษาและความบันเทิงสำหรับช่วงวันหยุดเดือนธันวาคม

เราหวังว่าคุณจะพบว่าซอร์สโค้ดนี้น่าสนใจ โดยทั่วไปเราไม่ยอมรับการมีส่วนร่วมภายนอกจากสาธารณะ คุณสามารถยื่นรายงานข้อผิดพลาดหรือคำขอคุณสมบัติหรือติดต่อ Jez Swanson นำวิศวกรรม

(ข้อความนี้ซ้ำกันในการสนับสนุน. md)

การสนับสนุน

Santa Tracker รองรับ Chrome, Firefox และ Safari เวอร์ชันเอเวอร์กรีน นอกจากนี้ยังรองรับเบราว์เซอร์ที่ใช้โครเมียมอื่น ๆ (Edge, Opera ฯลฯ )

นอกจากนี้เรายังนำเสนอ "โหมดทางเลือก" สำหรับเบราว์เซอร์รุ่นเก่าเช่น IE11 ซึ่งอนุญาตให้ผู้ใช้เล่นเกมประวัติศาสตร์จำนวนน้อย

โครงสร้างไซต์

Santa Tracker แบ่งออกเป็นฉากต่าง ๆ แต่ละหน้าบน Santa Tracker สอดคล้องกับฉากเดียวรวมถึงหน้าหมู่บ้านหลัก Modvil ฉากอยู่ในฉาก/ ฉาก/ ไดเรกทอรี แต่ละฉากจะถูกโหลดเป็น iFrame และมีอยู่ค่อนข้างตัวเอง

ส่วนโฮสต์ของเว็บไซต์จัดการกับการโหลดของแต่ละฉากรวมถึงดนตรีและ UI ทั่วไปเช่นคะแนนเกมหรือการสอน มี API ระหว่างโฮสต์และฉากซึ่งอนุญาตให้โฮสต์แจ้งฉากเมื่อเหตุการณ์เช่นการโหลดฉากเกิดขึ้นและอนุญาตให้ฉากบอกให้โฮสต์ทำสิ่งต่าง ๆ เช่นเล่นเพลงหรืออัปเดตคะแนน

คู่มือการพัฒนา

ทำงานในพื้นที่

คุณจะต้องมี yarn หรือ npm คุณอาจต้องใช้ Java หากคุณกำลังสร้าง Windows เนื่องจากคอมไพเลอร์ปิดรุ่นไบนารีไม่ได้รับการสนับสนุนบนแพลตฟอร์มนั้น

โคลนและเรียกใช้ yarn หรือ npm install เพื่อติดตั้ง deps และเรียกใช้ ./serve.js เพื่อเรียกใช้เซิร์ฟเวอร์การพัฒนา URL การพัฒนาจะถูกคัดลอกไปยังคลิปบอร์ดของคุณ

สคริปต์ที่ให้บริการ ./serve.js จะฟังทั้งสองพอร์ต 8000 และ 8080 โดยค่าเริ่มต้น พอร์ต 8000 ทำหน้าที่เป็นส่วนหนึ่งของโฮสต์ของเว็บไซต์ (ซึ่งสอดคล้องกับโดเมนการผลิต https://santatracker.google.com) และพอร์ต 8080 ให้บริการเนื้อหาคงที่รวมถึงฉาก

หากต้องการโหลดฉากเฉพาะให้เปิดเช่น http: // localhost: 8000/boatload.html เมื่อโหลดไซต์แล้วคุณยังสามารถเรียกใช้ santaApp.route = 'sceneName' ในคอนโซลเพื่อสลับฉากโดยทางโปรแกรม

หากคุณต้องการโหลดฉากจากโดเมนคงที่ - โดยไม่ต้องใช้รหัส "โฮสต์" - คุณสามารถโหลดได้ที่เช่น http://127.0.0.1:8080/st/scenes/elfmaker/ นี่คือจงใจไม่เท่ากับ "localhost" เพื่อให้ prod และ run cross-domain "โฮสต์" ให้คะแนนเสียงและ UI บางอย่างดังนั้นพฤติกรรมทั้งหมดจึงไม่มีอยู่ในโหมดนี้

ณ ปี 2020 การพัฒนาต้องการโครเมี่ยมหรือเบราว์เซอร์ที่ใช้โครเมียม นี่เป็นเพราะวิธีที่เราระบุคำขอนำเข้า ESM โดยที่โครเมียมระบุส่วนหัวเพิ่มเติม (นี่คือข้อผิดพลาดไม่ใช่คุณสมบัติ)

เพิ่มฉากใหม่

ฉากเป็นเพียงแค่หน้าเว็บที่โหลดใน <iframe> คุณสามารถเขียนได้ในทุกวิถีทางที่คุณต้องการ แต่อย่าลืมโทรหา "โฮสต์" เพื่อเล่นเสียงรายงานคะแนนหรือขอสิ่งอื่น ๆ เช่นการแสดงบทเรียน

ในการเพิ่มฉากใหม่คุณจะต้อง:

  • สร้างโฟลเดอร์ static/scenes/sceneName เพิ่ม index.html ซึ่งเรียกใช้รหัสในโมดูล ES เท่านั้น:

    1. ตรวจสอบให้แน่ใจว่าคุณรวม <script type="module"> ที่นำเข้า src/scene/api.js ซึ่งตั้งค่าการเชื่อมต่อกับ prod "โฮสต์"
    2. เลือกฟังเหตุการณ์จาก API เช่น 'หยุดชั่วคราว', 'กลับมา' และ 'รีสตาร์ท'; และกำหนดค่า api.ready(() => { ... }) การโทรกลับที่ถูกเรียกใช้เมื่อฉากจะถูกเปลี่ยนใน
    3. นำเข้า Url Magic ./:closure.js หากคุณกำลังเขียนรหัสสไตล์ปิด-จะรวบรวมทุกอย่างภายใต้ js/
    4. สำหรับข้อมูลเพิ่มเติมดูฉากที่มีอยู่เช่น Boatload หรือ Santaselfie

  • เพิ่ม PNGs ที่เกี่ยวข้อง:

    • static/img/scenes/sceneName_2x.png (950x564) และ sceneName_1x.png (475x282)
    • prod/images/og/sceneName.png (1333x1000)

  • ตั้งชื่อฉากภายในสตริง

  • หากฉากของคุณไม่ควรถูกปล่อยออกสู่การผลิตให้ปิดการใช้งานภายใน Release.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 ให้ผู้ช่วยแท็กเทมเพลตต่าง ๆ ซึ่งในขณะที่ฟังก์ชั่นจริงจะถูก inlined ในเวลาที่วางจำหน่าย เหล่านี้รวมถึง:

  • _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 ในฉาก นี่คือส่วนใหญ่ที่ไม่มีเอกสารและจัดทำโดยผู้ขายภายนอก หากคุณสนใจในไฟล์แหล่งกำเนิดเสียงพวกเขาจะอยู่ใน repo ภายใต้ 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 และ *.Ogg) ได้รับอนุญาตภายใต้ใบอนุญาต CC-by ไฟล์อื่น ๆ ทั้งหมดได้รับอนุญาตภายใต้ใบอนุญาต 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.
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด