-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (161 loc) · 7.46 KB
/
index.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
<head>
<title>MyoSnake</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href="font/font-awesome-4.7.0/css/font-awesome.css"/>
<link rel = "stylesheet" href = "css/style.css" type = "text/css">
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/snake.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#instructions').modal('show');
});
</script>
<script>
var audio = new Audio('sound/music.mp3');
function play_music()
{
if(audio.paused){
audio.play();
}else{
audio.pause();
}
}
audio.onended = function() {
audio.currentTime = 0;
audio.play()
}
function repeat_music()
{
audio.currentTime = 0;
}
</script>
<html>
<body>
<div id="instructions" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Instructions</h4>
</div>
<div class="modal-body">
<p>Welcome to MyoSnake. Here are the instructions to play this game.</p>
<p>Control the snake and eat as many apples as you can, <br />be careful not to hit yourself or the wall</p>
<div class="row">
<div class="col-md-6">
<h3>Myo user</h3>
<hr>
<img src="img/myo.png" alt="Myo Armband" width="60px;">
<br>
<br>
<p>Open your Myo Armband and config the settings in Myo Connect. Open Keyboard manager and select your input to contain the up, down, left, and right key.</p>
</div>
<div class="col-md-6">
<h3>Keyboard Input</h3>
<hr>
<img src="img/key.svg" alt="Direction Key" width="100px;">
<br>
<br>
<p>You can also use your regular keyboard input. Use the four direction keys to control the snake.</p>
</div>
</div>
<p>Press spacebar to respawn the snake</p>
</div>
<div class="modal-footer teamDasa">
<center><p><a href="https://github.com/ICS4U-DASA/dasa.github.io/wiki" target="_blank" class="btn btn-default btn-lg teamDasa-button" data-dismiss="modal">Let's start gaming!</a></p></center>
</div>
</div>
</div>
</div>
<nav id="nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-left">
<a class="navbar-brand"> <img src= "img/logo.png" width=30vw height=30vh alt = "logo"> </a>
<a class="navbar-link" onclick= "play_music()"><i style="margin-top:20px;"class = "fa fa-play fa-lg"></i></a>
</div>
<div class="navbar-right">
<h4 class = "navbar-link" id="score"></h4>
</div>
<div class="navbar-center">
<h2 class = "navbar-link" id="title" href = "https://github.com/ICS4U-DASA/dasa.github.io">Myo Snake</h2>
</div>
</div>
</nav>
<canvas id="canvas"></canvas>
<section>
<footer>
<div class="container-fluid">
<div>Made by <a data-toggle="modal" data-target="#teamDASA" target="_blank"> team DASA</a>, on <a href="https://github.com/ICS4U-DASA/dasa.github.io" target="_blank"><i class="fa fa-github fa-lg"></i></a> with <i class="fa fa-code fa-lg"></i></div>
</div>
<!-- Modal -->
<div class="modal fade" id="teamDASA" role="dialog">
<div class="modal-dialog modal-lg teamDasa">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">TEAM DASA</h4>
</div>
<div class="modal-body">
<img src="img/dasa.png" alt="TEAM DASA LOGO">
<p>We are high school students from Upper Canada College. We are experimenting with the fundementals of webgames.</p>
<hr>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/team/simon.jpg" alt="Simon Guo">
<div class="caption">
<h3>Simon Zirui Guo</h3>
<h5>Project Manager, Front End Developer</h5>
<br>
<p><a target="_blank" href="https://github.com/simonguozirui" class="btn btn-default" role="button">Github</a> <a target="_blank" href="http://simonguo.tech" class="btn btn-default" role="button">Website</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/team/andy.jpg" alt="Andy Craig">
<div class="caption">
<h3>Andy Craig</h3>
<h5>Front-End Developer, User Experience Designer</h5>
<br>
<p><a target="_blank" href="https://github.com/AndyCraig1" class="btn btn-default" role="button">Github</a> <a target="_blank" href="http://andycraig.tech/" class="btn btn-default" role="button">Website</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/team/douglas.jpg" alt="Douglas Byers">
<div class="caption">
<h3>Douglas Byers</h3>
<h5>Back-End Developer, User Experience Designer</h5>
<br>
<p><a target="_blank" href="https://github.com/orgs/ICS4U-DASA/people/DouglasByers" class="btn btn-default" role="button">Github</a> <a target="_blank" href="http://douglasbyers.ca/" class="btn btn-default" role="button">Website</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img/team/alex.png" alt="Alexander Hwang">
<div class="caption">
<h3>Alexander Hwang</h3>
<h5>Graphic Designer, Project Tester</h5>
<br>
<p><a target="_blank" href="https://github.com/MrAlexanderHwang" class="btn btn-default" role="button">Github</a> <a target="_blank" href="https://github.com/MrAlexanderHwang" class="btn btn-default" role="button">Website</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<center><p><a href="https://github.com/ICS4U-DASA/dasa.github.io/wiki" target="_blank" class="btn btn-default btn-lg teamDasa-button" role="button">check out our documentation</a></p></center>
</div>
</div>
</div>
</div>
</footer>
</section>
</body>
</html>