-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
131 lines (107 loc) · 5.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Button Soccer</title>
<style>
html,
body {
margin: 0;
height: 100%;
overflow: hidden
}
canvas {
touch-action: none;
}
</style>
</head>
<body>
<!--Main Menu-->
<div id="main_menu">
<!--
<br><br>
<button id="start_game" onclick="start_game()">Start</button>
<button id="full_screen" onclick="openFullscreen(document.documentElement)">Full Screen</button>
-->
</div>
<!--Game div-->
<div id="game_div" style="display:none;"></div>
<div id="images_loader" style="display:none;">
<img id="ball_1" width="100" height="100" src="images/balls/ball1/1.png" alt="Ball 1">
<img id="grass" width="50" height="50" src="images/grass/grass.jpg" alt="Grass">
<img id="pitch" width="50" height="50" src="images/grass/pitch.png" alt="Pitch">
<img id="pitch_flipped" width="50" height="50" src="images/grass/pitch_flipped.png" alt="Pitch">
<img id="net1" src="images/net/net1.png" width="100" height="100" alt="net">
<img id="net2" src="images/net/net1_flipped.png" width="100" height="100" alt="net2">
<img id="net1_potrait" src="images/net/net1_potrait.png" width="100" height="100" alt="net">
<img id="net2_potrait" src="images/net/net1_potrait_flipped.png" width="100" height="100" alt="net2">
<img id="ui_grass" src="images/grass/grass.jpg" width="100" height="100" alt="Grass">
<!--Images serving as buttons. All buttons added to the canvas should be added to the buttons array in configs.js-->
<img id="back_button" width="50" height="50" src="images/buttons/back_button.png" alt="Back">
<img id="pause_button" width="50" height="50" src="images/buttons/pause_button.png" alt="Pause">
<img id="play_button" width="50" height="50" src="images/buttons/play_button.png" alt="Play">
<img id="fullscreen_button" width="50" height="50" src="images/buttons/fullscreen_button.jpg" alt="Full Screen">
<img id="checkbox_checked" width="50" height="50" src="images/buttons/checkbox_checked.PNG"
alt="checkbox_checked">
<img id="checkbox_unchecked" width="50" height="50" src="images/buttons/checkbox_unchecked.PNG"
alt="checkbox_unchecked">
<img id="radio_checked" width="50" height="50" src="images/buttons/radio_checked.PNG" alt="radio_checked">
<img id="radio_unchecked" width="50" height="50" src="images/buttons/radio_unchecked.PNG" alt="radio_unchecked">
<img id="back_button_flipped" width="50" height="50" src="images/buttons/back_button_flipped.png" alt="Back">
<img id="pause_button_flipped" width="50" height="50" src="images/buttons/pause_button_flipped.png" alt="Pause">
<img id="play_button_flipped" width="50" height="50" src="images/buttons/play_button_flipped.png" alt="Play">
<img id="fullscreen_button_flipped" width="50" height="50" src="images/buttons/fullscreen_button_flipped.jpg"
alt="Full Screen">
<audio src="audio/cheer_normal.m4a" id="cheering_normal">
Your browser does not support the
<code>audio</code> element.
</audio>
<audio src="audio/cheer_goal_howl.mp3" id="cheering_goal">
Your browser does not support the
<code>audio</code> element.
</audio>
<audio src="audio/final_whistle.mp3" id="final_whistle">
Your browser does not support the
<code>audio</code> element.
</audio>
</div>
<script>
if (screen.width > screen.height) alert("This game depends on touch screen inputs!");
//object for the canvas of the user interface
let ui_canvas = {
width: window.innerWidth,
height: window.innerHeight
};
//object for the canvas where the game is played
let gamecanvas = {
width: window.innerWidth,
height: window.innerHeight
};
let screen_dimensions = {
width: window.innerWidth,
height: window.innerHeight
};
let players = [];
let ball;
let gamesession = false;
let ctx; //drawing context
let ui_ctx;
let swipe_listener; //swipe event listener for the game canvas
let ui_swipe_canvas; //swipe event listener for the user interface
let ui_swiped = false; //if the ui has been swiped and the buttons animation should happen
let ui_page = 1; //the currently displayed page of the UI
let CheeringNormal = document.getElementById("cheering_normal");
let CheeringGoal = document.getElementById("cheering_goal");
let FinalWhistle = document.getElementById("final_whistle");
let CurrentAudio = CheeringNormal;
</script>
<script src="configs.js"></script>
<script src="ui.js"></script>
<script src="swipe.js"></script>
<script src="player.js"></script>
<script src="collision.js"></script>
<script src="main.js"></script>
</body>
</html>