forked from dwmkerr/spaceinvaders
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (138 loc) · 4.36 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
<!DOCTYPE html>
<html>
<head>
<title>Code Invaders</title>
<link rel="stylesheet" type="text/css" href="css/core.css">
<link rel="stylesheet" type="text/css" href="css/typeography.css">
<style>
/* Styling needed for a fullscreen canvas and no scrollbars. */
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.stage {
width: 80%;
margin: 0 auto;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.stage li {
text-align: center;
width: 80%;
margin: 0 auto;
padding-top: 5%;
padding-bottom: 5%;
border: 2px solid;
border-radius: 2px;
}
#keycapfield {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
left: 0px;
top: 0px;
}
#gamecontainer {
width: 600px;
margin-left: auto;
margin-right: auto;
}
#gamecanvas {
width: 600px;
height: 800px;
}
#info {
width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
bottom: 10%;
}
#choicestage {
font-size : 20px;
color: white;
}
</style>
</head>
<body>
<div id="keycapfield"></div>
<div id="gamecontainer">
<canvas id="gameCanvas"></canvas>
</div>
<div id="info">
<p>Move with arrow keys, fire with the space bar. The invaders get faster and drop more bombs as you complete each level!</p>
<p>
<a id="muteLink" href="#" onclick="toggleMute()">mute</a> |
<a href="http://github.com/sipubot/codenvaders">codeinvaders on github</a> | via
<a href="http://github.com/dwmkerr/spaceinvaders">spaceinvaders on github</a>
</div>
<script src="js/util.js"></script>
<script src="js/keycapfield.js"></script>
<script src="js/spaceinvaders.js"></script>
<script>
// 게임 로드 실행 부분 수정해야할필요가 있다.
// Create the keycapfield.
var container = document.getElementById('keycapfield');
var keycapfield = new KeycapField();
keycapfield.initialise(container);
keycapfield.start();
// Setup the canvas.
var canvas = document.getElementById("gameCanvas");
canvas.width = 600;
canvas.height = 800;
/*
Quiz Json pre load
*/
var STAGEDATA = {};
var game;
loadJSON('js/stageQuiz.json', function (data) {
//stage name sync after
STAGEDATA = data;
RunGame();
}, function (xhr) {
console.log('load failed...')
return false;
});
function RunGame() {
// Create the game.
game = new Game();
// Initialise it with the game canvas. & background.
game.initialise(canvas);
game.backgroundScreen = keycapfield;
// Start the game.
game.start();
// Listen for keyboard events.
window.addEventListener("keydown", function keydown(e) {
var keycode = e.which || window.event.keycode;
// Supress further processing of left/right/space (37/29/32)
if (keycode == 37 || keycode == 39 || keycode == 32 || keycode == 8) {
e.preventDefault();
}
game.keyDown(keycode, e);
});
window.addEventListener("keyup", function keydown(e) {
if (keycode == 8) {
e.preventDefault();
}
var keycode = e.which || window.event.keycode;
game.keyUp(keycode);
});
function toggleMute() {
game.mute();
document.getElementById("muteLink").innerText = game.sounds.mute ? "unmute" : "mute";
}
}
</script>
</body>
</html>