ryansexton.github.io/asteroids-game.html at master · ryansexton/ryansexton.github.io · 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ryan Sexton Portfolio</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <div id="port_page_header">
        <div class="container">
            <nav>
                <ul id="sidemenu">
                    <li><a href="index.html#header">Home</a></li>
                    <li><a href="index.html#about">About</a></li>
                    <li><a href="index.html#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <img src="images/close-icon.webp" class="small-screen-icon" onclick="closemenu()">
                </ul>
                <img src="images/menu-icon.png" class="small-screen-icon" onclick="openmenu()">
            </nav>
            <div>
                <a href="javascript:window.history.back();" class="btn back">< Back</a>
            </div>
        </div>
    </div>
<!---------------page contents--------------->
<div id="content">
    <h1 class="content-title">Python Asteroids Game</h1>
    <div class="content-text">
        <div class="row">
            <video src="asteroids-game-page/asteroids game playthrough.mp4" type="video/mp4" controls>
              </video>
            <div class="text-left">
                <span>Skills Used:</span><br>Python<br>
                <a href="https://github.com/ryansexton/Asteroids" class="btn btn2" target="_blank">Go to Code on GitHub</a><br>
            </div>
            <div class="text-right">
                <span>Description:</span><br>
                <p>This game was developed as a final project for CISC108: Introduction to Computer Science 1.
                    It’s a 2D arcade-style game where the player pilots a spaceship using arrow keys and fires lasers with the space bar.
                    The main objective is to maximize your score by:
                </p>
                <ul style="padding-left: 20px; font-size: medium;">
                    <li>Collecting stars (+1 point)</li>
                    <li>Rescuing astronauts (+5 points)</li>
                    <li>Avoiding asteroids and alien interceptors</li>
                </ul>
                <br>
                <p>Gameplay Mechanics:</p>
                <ul style="padding-left: 20px; font-size: medium;">
                    <li>Player movement and actions are controlled using when statements for simplicity.</li>
                    <li>Game elements (stars, asteroids, astronauts, enemies) are represented with images and assigned hitboxes for collision detection.</li>
                    <li>All active objects are stored in arrays with a capped size to manage memory and performance efficiently. Visible when too many objects accumulate (e.g., undestroyed asteroids).</li>
                    <li>Score is displayed in real-time in the top-left corner of the screen.</li>
                </ul>
                <br>
                <p>This project reinforced my understanding of:</p>
                 <ul style="padding-left: 20px; font-size: medium;">
                    <li>Event-driven programming</li>
                    <li>Basic game loop logic</li>
                    <li>Image handling and collision detection</li>
                    <li>Object management with arrays/lists</li>
                    <li>Input handling in interactive applications</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!---------------contact--------------->
<div id="contact">
    <div class="container">
        <div class="contact-separator"></div>
        <div class="row">
            <div class="contact-left">
                <h1 class="sub-title">Contact Me</h1>
                <p>rjsexton@udel.edu</p>
                <p>484-866-2137</p>
                <div class="social-icons">
                    <a href="https://www.linkedin.com/in/ryanjsexton/" target="_blank"><img src="images/linkedin-icon.png"></a>
                    <a href="https://github.com/ryansexton" target="_blank"><img src="images/github-icon.png"></a>
                </div>
                <a href="Ryan Sexton Resume.pdf" download class="btn btn2">Download Resume</a>

            </div>
            <div class="contact-right">
                <form>
                    <input type="text" name="Name" placeholder="Your Name" required>
                    <input type="email" name="email" placeholder="Your Email" required>
                    <textarea name="Feedback" rows="6" placeholder="Feedback or Suggestion"></textarea>
                    <button type="submit" class="btn btn2">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <div class="copyright">
        <p>Copyright &copy Ryan Sexton. Made with the hopes of getting a job</p>
    </div>
</div>

    <script>

        var tablinks = document.getElementsByClassName("tab-links");
        var tabcontents = document.getElementsByClassName("tab-contents");

        function opentab(tabname){
            for(tablink of tablinks){
                tablink.classList.remove("active-link");
            }
            for(tabcontent of tabcontents){
                tabcontent.classList.remove("active-tab");
            }
            event.currentTarget.classList.add("active-link");
            document.getElementById(tabname).classList.add("active-tab");
        }

    </script>

    <script>

        var sidemenu = document.getElementById("sidemenu");

        function openmenu(){
            sidemenu.style.right = "0";
        }

        function closemenu(){
            sidemenu.style.right = "-200px";
        }

    </script>

    </body>
</html>