robschoen/star_citadel.html at main · millxing/robschoen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Star Citadel | Rob Schoen</title>
    <meta
      name="description"
      content=""
    />
    <link rel="icon" type="image/png" href="./nano.png" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="floating-squares" aria-hidden="true"></div>

    <main class="page">
      <section class="hero top-hero reveal candy-red">
        <div class="top-hero-row">
          <a href="./index.html" class="site-title">
            <img src="./assets/entangledParticlesLogo.jpg" class="site-title-logo" alt="" />
            <span class="visually-hidden">Entangled Particles</span>
          </a>
          <div class="social-row header-social">
            <a class="social-icon" href="https://github.com/millxing?tab=repositories" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub">
              <svg viewBox="0 0 16 16" aria-hidden="true">
                <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.5 7.5 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
              </svg>
            </a>
            <a class="social-icon" href="https://www.linkedin.com/in/robschoen/" target="_blank" rel="noreferrer" aria-label="LinkedIn" title="LinkedIn">
              <svg viewBox="0 0 16 16" aria-hidden="true">
                <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zM4.943 13.5V6.169H2.542V13.5h2.4zM3.743 5.168c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zM13.458 13.5V9.359c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.694 0 7.331 0 7.331h2.4v-4.094c0-.219.016-.438.08-.594.175-.438.574-.891 1.245-.891.878 0 1.23.672 1.23 1.656V13.5h2.4z"/>
              </svg>
            </a>
            <a class="social-icon" href="mailto:robschoen.robschoen@gmail.com" aria-label="Email" title="Email">
              <svg viewBox="0 0 16 16" aria-hidden="true">
                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-.5a.5.5 0 0 0-.5.5v.217l6.5 3.9 6.5-3.9V4a.5.5 0 0 0-.5-.5H2zm12.5 2.458-4.796 2.878 4.796 3.264V5.958zM14.204 12.5 8.68 8.74 8 9.147l-.681-.408L1.796 12.5h12.408zM1.5 12.1l4.796-3.264L1.5 5.958V12.1z"/>
              </svg>
            </a>
            <a class="social-icon" href="https://www.dropbox.com/scl/fi/demzlgct5g7ve15c9kz8j/resume_Rob-Schoen.docx?rlkey=ylomjukk1df5zfzfx1qbh2jus&dl=0" target="_blank" rel="noreferrer" aria-label="Resume" title="Resume">
              <svg viewBox="0 0 16 16" aria-hidden="true">
                <path d="M4 0h5.5L14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5 1.5V5h3.5L9 1.5z"/>
                <path d="M5 7.5h6v1H5v-1zm0 2h6v1H5v-1zm0 2h4v1H5v-1z"/>
              </svg>
            </a>
          </div>
          <nav class="site-nav" aria-label="Primary">
            <a href="./index.html">Home</a>
            <span class="nav-disabled" aria-disabled="true">About</span>
            <a href="./projects.html">Projects</a>
            <a href="./writing.html">Interests</a>
          </nav>
        </div>
      </section>

      <section class="panel reveal delay-1">
        <div class="panel-header">
          <h2>Star Citadel</h2>
        </div>
      </section>


      <section class="panel reveal">
        <p>I made an emulation of my favorite childhood arcade game, <a href="https://en.wikipedia.org/wiki/Star_Castle" target="_blank" rel="noreferrer">Star Castle</a>.</p>
        <p>Star Castle is a 1980 multidirectional shooter video game developed and published by Cinematronics for arcades. The game involves obliterating a series of defenses orbiting a stationary turret in the center of the screen. The arcade game uses vector graphics on a black and white display, with the colors of the rings and screen provided by a transparent plastic overlay. Star Castle was designed by Tim Skelly and programmed by Scott Boden; Skelly created a number of other vector games for Cinematronics, including Starhawk, Armor Attack, and Rip Off. A Vectrex port of Star Castle was released in 1983.</p>
        <p>The object of Star Castle is to destroy an enemy cannon which sits in the center of three concentric, rotating energy shield rings while avoiding or shooting &quot;mines&quot;–enemies that spawn from the core, pass through the energy rings, and then home in on the player&#39;s ship. The player&#39;s spaceship can rotate, thrust forward, and fire small projectiles. The cannon&#39;s shields are composed of twelve sections, and each section takes two hits to destroy. Once a section is breached, rings beneath it are exposed to fire.</p>
        <p>A color overlay tints the rings yellow, orange, and red and the rest of the playfield blue. Once the innermost ring has been breached, the central weapon is susceptible to attack, but the player is also more vulnerable at this point, as with the shield rings eliminated, the gun can fire out a large projectile that hisses with white noise. Moreover, the central core tracks player movement at all times. If the player manages to hit the cannon, it explodes violently, collapsing the remnants of the shield rings, and an extra ship is awarded. The next level then starts with a new gun and fully restored shield rings, but the difficulty is increased (the mines move more rapidly, the rings rotate more quickly, and the core tracks the player at a faster rate).</p>
        <p>If the player completely destroys the outermost shield ring, the cannon will create a new one. The middle ring expands to replace the lost outer ring, the inner ring replaces the middle, and a new ring emerges from the core to become the inner ring. Therefore, in order to penetrate the cannon&#39;s defenses, the player must be careful not to completely obliterate the outer ring.</p>
        <p>The three homing mines will destroy the player&#39;s ship on contact. The mines can be destroyed, but they are very small and difficult to hit, and the player does not receive points for destroying them. Mines are revived when shield rings regenerate (some variants keep three mines churning constantly so that a new mine respawns from the core as soon as one is destroyed). As the player progresses through the levels, the mines get faster and faster, forcing the player to keep moving to avoid them.</p>
      </section>

      <section class="panel reveal text-center">
        <p><a href="https://millxing.github.io/starcitadel/" target="_blank" rel="noreferrer">Play my Star Castle inspired emulation, Star Citadel</a></p>
        <a href="https://millxing.github.io/starcitadel/" target="_blank" rel="noreferrer">
        <img
          src="./assets/starcit01.png"
          alt="Screenshot of Star Citadel gameplay"
          style="width: 100%; height: auto; border-radius: 12px; display: block"
        />
        </a>
      </section>
    </main>

    <footer class="site-footer">
      <p>
        Content on this site is licensed under
        <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer">CC BY 4.0</a>
        unless otherwise stated.
      </p>
      <p>
        <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer">
          Creative Commons Attribution 4.0 International License
        </a>
      </p>
      <p>
        <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer">
          https://creativecommons.org/licenses/by/4.0/
        </a>
      </p>
    </footer>

    <script>
      window.floatingBackgroundConfig = {
        density: 40,
        shape: "square",
        size: { min: 100, max: 280 },
        speed: { min: 30, max: 70 },
      };
    </script>
    <script src="./background.js"></script>
  </body>
</html>