-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (107 loc) · 2.98 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
<!DOCTYPE html>
<html>
<head>
<title>Keep it Clean</title>
<style type="text/css">
#myCanvas {
border: 2px solid #000000;
margin-top: 20px;
}
body{
background-color: black;
text-align: center;
}
</style>
<link rel="icon" href="logo.png" type="image/x-icon" />
</head>
<body>
<canvas id = "myCanvas" width = "800" height = "600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
bgLoaded =false;
playLoaded = false;
aboutLoaded =false;
playzoom =1;
aboutzoom=1;
msx =0;
msy=0;
var click = new Audio("click.mp3");
var click2 = new Audio("click2.mp3");
var bgStart = new Image();
bgStart.src = "Menu.png";
bgStart.onload=function(){
bgLoaded=true;
};
var playButton = new Image();
playButton.src="playNow.png"
playButton.onload = function(){
playLoaded=true;
}
var aboutButton = new Image();
aboutButton.src="about.png"
aboutButton.onload = function(){
playLoaded=true;
}
soundplayed=false;
clickplayed=false;
click2played=false;
window.addEventListener("mousemove",function(e){
var rect = canvas.getBoundingClientRect();
msx = e.pageX - rect.left;
msy = e.pageY - rect.top;
if((msx>530&&msx<686&&msy>470&&msy<511)||(msx>469&&msx<749&&msy>350&&msy<420)){
canvas.style.cursor="pointer";
}else{
canvas.style.cursor="default";
}
if((msx>530&&msx<686&&msy>470&&msy<511)){
aboutzoom=1.2;
if(!click2played){
click2.play();
click2played=true;
}
}else{
aboutzoom=1;
click2played=false;
}
if(msx>469&&msx<749&&msy>350&&msy<420){
playzoom=1.2;
if(!clickplayed){
click.play();
clickplayed=true;
}
}else{
playzoom=1;
clickplayed=false;
}
});
window.addEventListener("mousedown",function(e){
var rect = canvas.getBoundingClientRect();
msx = e.pageX - rect.left;
msy = e.pageY - rect.top;
if((msx>469&&msx<749&&msy>353&&msy<418)){
window.location.href="game.html";
}
if((msx>530&&msx<686&&msy>470&&msy<511)){
window.location.href="about.html";
}
});
var opening = new Audio("opening.mp3");
function drawAll(){
if(bgLoaded&&playLoaded&&aboutButton){
if(!soundplayed){
opening.play();
soundplayed=true;
}
context.drawImage(bgStart,0,0);
context.drawImage(playButton,0,0,285,70,465-(((playzoom-1)/2)*285),350-(((playzoom-1)/2)*70),playzoom*285,playzoom*70);
context.drawImage(aboutButton,0,0,158,39,530-(((aboutzoom-1)/2)*158),470-(((aboutzoom-1)/2)*39),158*aboutzoom,39*aboutzoom);
context.fillStyle ="#FFFFFF";
//context.fillText(msx+" "+msy,10,20);
}
}
setInterval(drawAll,10);
</script>
</body>
</html>