-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGettingStarted.html
229 lines (229 loc) · 13.9 KB
/
GettingStarted.html
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/customstyles/StyleSheet.css">
<title>Getting Started</title>
</head>
<body>
<nav role="navigation">
<a href="Index.html" title="Link to the SurfsDown homepage">Home</a>
<a href="WhatIsSurfing.html" title="Link to What is Surfing page">What is Surfing?</a>
<button class="dropdown-btn">Getting Started
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="GettingStarted.html" title="Link to Getting Started page">The Basics</a>
<button class="dropdown-btn">Guides
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="GameSettings.html" title="Link to Game Settings and Servers">Game Settings & Servers</a>
<a href="BeginnersGuide.html" title="Link to Beginners Guide">Beginners Guide</a>
</div>
</div>
<a href="Game.html" title="Link to the page containing a JavaScript Game">Interactive Game</a>
<button class="dropdown-btn">How To Improve
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="Improving.html" title="Link to page on how to improve at surfing">Improving at Surfing</a>
<button class="dropdown-btn">Inside the Game
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="InsideTheGame.html" title="Link to Improving Inside the Game">In-Game Improvement</a>
</div>
<button class="dropdown-btn">Outside the Game
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="OutsideTheGame.html" title="Link to Improving Outside the Game">External Improvement</a>
</div>
</div>
<a href="ServerList.html" title="Link to list of Surf servers">Server List</a>
<button class="dropdown-btn">Related Topics
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="Related.html" title="Link to page with topics tangentially related to Surfing">Surf Related</a>
<button class="dropdown-btn">Topics
<div class="arrow-down"></div>
</button>
<div class="dropdown-container">
<a href="MapMaking.html" title="Link to Map Making">CS:GO Map Making</a>
<a href="InCSGO.html" title="Link to Related Topics inside CS:GO">In-Game</a>
<a href="OutsideCSGO.html" title="Link Related Topics outside CS:GO">Outside CS:GO</a>
</div>
</div>
</nav>
<main role="main">
<a href="Index.html"><img src="Images/SurfsDownLogo1920w250h.jpg" width="1900" alt="Banner Logo for SurfsDown Site"></a>
<div class="topbar">
<div class="menu-btn" onclick="toggleNav(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<select name="themepick" id="themepick" title="Cookies must be enabled for this site to switch themes">
<option value="StyleSheet" selected>Dark Theme</option>
<option value="CompatibilityStyleSheet">Compatibility Theme</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 col-t-12">
<h1>Getting Started</h1>
<p>
So you want to surf? Great, we're going to go through the steps needed to get you there. If you already have Steam installed on your computer, skip ahead to step 2; and if you already have Counter Strike: Global Offensive (CS:GO) installed, then hop to step 3. Click on a section below to jump to it.
<ol>
<li><a href="#InstallSteam" title="Link to Install Steam section">Install Steam</a></li>
<li><a href="#InstallCSGO" title="Link to Install CS:GO section">Install Counter Strike: Global Offensive</a></li>
<li><a href="#Basics" title="Link to Learn the Basics section">Learn the Basics</a></li>
<li><a href="#JoinServer" title="Link to Join a Server section">Join a Server</a></li>
</ol>
</p>
<h2 id="InstallSteam">Install Steam</h2>
<p>
Steam is most popular digital game distribution platform and is required to download CS:GO. To download Steam, <a href="https://store.steampowered.com/about/" title="Link to Steam download page" target="_blank">follow this link</a> and click on Install Steam.
</p>
<img src="Images/GetSteam.png" width="500" alt="Shows where to click on the Steam page to download the program">
<p>
After you have Steam installed, the next thing you are going to have to do is create a Steam account. When you launch Steam, you should be greeted with the window in the picture below. Click on "CREATE A NEW ACCOUNT", and follow the instructions to make your account.
</p>
<img src="Images/SteamLogin.png" width="500" alt="Shows the login screen when you launch Steam">
<p>After you've done that (heads up: you are probably are going to have to confirm your account via an email first), log on to Steam and proceed to step 2.
</p>
<h2 id="InstallCSGO">Install CS:GO</h2>
<p>
Your next task is to install CS:GO via the Steam Store. With your Steam client open, select the "STORE" tab from the top bar. Use the search bar and simply type in "counter", and Counter Strike: Global Offensive will be one of if not the top option to pop up. Click to navigate to it's Store page.
</p>
<img src="Images/Counter.png" width="500" alt="Steam search term to find CS:GO">
<p>
From the CS:GO Store page, scroll down until you see the box below. Click on "Play Game" and the download process should start. Follow the on screen prompts in order to install the game.
</p>
<img src="Images/PlayGame.png" width="500" alt="Box on CS:GO Store page to install the game">
<p>
After the download process has completed, you'll find the game under the "LIBRARY" tab from within your Steam client. Double click on the game's name, or click it once and select "PLAY" from the main screen.
</p>
<img src="Images/Play.png" width="500" alt="How to launch CS:GO from within Steam">
<h2 id="Basics">Learn the Basics</h2>
<h3>Super Basics</h3>
<p>
I'm not going to spend much time here, but if you don't know how to move in 3-D space in a video game, here a crash course for CS:GO:
<ol>
<li>Your keyboard keys W, S, A, & D move your character model forward, backward, left, & right respectively.</li>
<li>You use your mouse to look around and orient your direction</li>
<li>Space bar is jump</li>
</ol>
Those are all the controls you need in order to surf, anything more advanced I will cover as it comes up.
</p>
<h3>A Brief Overview</h3>
<p>
The easiest thing for you to do is watch a few videos to wrap your head around surfing before I dive into text description on what to do.
<ul>
<li>If you didn't check out the <a href="WhatIsSurfing.html" title="Link to What is Surfing page">What is Surfing</a> page, then watch this <a href="https://www.youtube.com/watch?v=XIcs6Hw4WhQ" title="Surfing Gameplay" target="_blank">video of a high level surfer completing a map.</a></li>
<li>Now that you've been inspired, check out <a href="https://www.youtube.com/watch?v=E3tys016mwg" title="Beginners Guide to Surf YouTube video">this guide from SurfKultur on YouTube.</a> It's my favorite beginner tutorial video that I have come across. The only thing that it is missing is having keyboard inputs show up on screen as he is describing what to do.</li>
<li>Another guide that covers the basics and does have keyboard inputs shown on screen is <a href="https://www.youtube.com/watch?v=lYc52kwTNb8" title="Streebrees's Surfing Guide for Beginners YouTube">this one by Streebree.</a> Only watch up until 2:05, as the rest of the advice is server or game specific, or it is much too advanced to worry about when starting out.</li>
</ul>
</p>
<h2 id="JoinServer">Join a Server</h2>
<p>
Time to hop into the game. At this point, I'm going to restrict you to playing on 2 maps, Utopia and Kitsune. They represent the two main styles of non-combat surf maps: linear and stage. Linear maps are a single course: you drop in at the start, surf your way to the finish, and that's the whole map. Stage maps can be thought of as multiple sets of linear courses within a single map. Kitsune for example has 9 stages. Stage maps tend to be much shorter than linear maps, but when you complete all stages they are approximately the same length as linear maps.
</p>
<p>
You will start on Kitsune first, as you will be able to complete the first few stages after a little practice. Click on the link for Kitsune below, and your browser should give you an option to open "Open Steam Client Bootstraper?". Click on this link, and Steam will open, launch CS:GO, and connect you to the server.
</p>
<img src="Images/Bootstrap.png" width="500" alt="Chrome popup for Steam Client Bootstraper after clicking on server link">
<p>
<ul>
<li><a href="steam://connect/158.69.57.87:25145" title="Opens CS:GO and connects to Kitsune 24/7 server">Kitsune 24/7</a></li>
<li><a href="steam://connect/192.99.41.233:25155" title="Opens CS:GO and connects to Utopia 24/7 server">Utopia 24/7</a></li>
</ul>
If that doesn't work with your browser, you can add the server to your "Favorites" from within CS:GO via the IP address. Navigate to the "Community Server Browser" and click on the "Favorites" tab. From there, select "Add Server" from the bottom of the box, and find the box for adding via IP address. Do this for each of the servers below, copying only the numeric IP:
<ul>
<li>Utopia IP: <span id="IPlink">192.99.41.233:25155</span></li>
<li>Kitsune IP: <span id="IPlink">158.69.57.87:25145</span></li>
</ul>
I have had issues with the game greying out the "Connect" box once I have added a server in this way, however a restart of the game fixed that problem.
</p>
<p>
Now that you're in, start surfing! Practice the techniques from the videos and text guide, being aware that this is very difficult. When you first complete stage 1 of Kitsune I know you'll have had to work for it! Build off that and see how far you can get in Kitsune before it feels like you're no longer making progress. Then it will be time to jump over to the Utopia server. You won't be able to complete the whole map at this point, but each run you can try and get further and further down the course. Rinse and repeat between the two servers to build up your surfing strength. Stage 9 Kitsune is rather difficult, so expect to make it to stage 8 before putting transferring most of your effort into finishing Utopia. Good luck, make sure to check out the <a href="Improving.html" title="Link to Improving page on SurfsDown">Improving</a> page when you want need more instruction.
</p>
<div class="hide">
<h3>Hints (Mouseover to Show)</h3>
<div class="hideme">
<p>
Knowing where to go on a map can be half the battle. You may get lost and not know where it is you need to go to get to the end of a stage or a map, so in addition to the in-server replay function I mentioned above, here are links to players completing Kitsune and Utopia to help you out. Focus on some basics of how they are navigating the course, compare it to what you have been doing, and try and implement some of the general lines they are taking. Besides playing, watching others is <strong>the</strong> primary method of improving at surfing!
<div class="col-6 col-t-12">
<ul>
<li>
Kitsune<br>
<div class="youTubeWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/0us2WW191L0" frameborder="0" allowfullscreen></iframe>
</div>
<br>
</li>
<li>
Utopia<br>
<div class="youTubeWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Cw5jGnisDfg" frameborder="0" allowfullscreen></iframe>
</div>
</li>
</ul>
</div>
</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<!-- Facebook Integration. Code from https://developers.facebook.com/docs/plugins/like-button/ -->
<div class="fb-like"
data-href="https://developers.facebook.com/docs/plugins/"
data-width=""
data-layout="button"
data-action="like"
data-size="small"
data-show-faces="true"
data-share="true">
</div>
<!-- Twitter integration, modified from https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/parameter-reference1-->
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-size="large"
data-text="Spread the word about SurfsDown!"
data-url="http://student.athabascau.ca/~matthewst49/Index.html"
data-hashtags="csgo,csgosurfing"
data-related=",twitter">
Tweet
</a>
<!-- Google Translate -->
<div id="google_translate_element"></div>
</div> <!-- end container -->
<div class="row">
<div class="col-12 col-t-12">
<a href="Support.html" title="Link to site support">Support</a>
<br>Author: Matthew Stepan
<br>Last Updated: September 7, 2019
</div>
</div>
</footer>
<script type="text/javascript" src="JS/Menu.js"></script>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/styleSwitcher.js"></script>
<script>
$(document).ready(function(){
$('#themepick').styleSwitcher();
})
</script>
<script type="text/javascript" src="JS/googleTranslate.js"></script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script id="twitter-wjs" type="text/javascript" async defer src="//platform.twitter.com/widgets.js"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>
</body>
</html>