Skip to content

Commit f96a4b9

Browse files
snehal2841snehal2841
committed
Added a Simple Patatap Clone
1 parent 9b6a4ff commit f96a4b9

3 files changed

Lines changed: 218 additions & 0 deletions

File tree

‎Patatap Clone/index.html‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Circles</title>
5+
<link rel="stylesheet" type="text/css" href="circles.css">
6+
<script type="text/javascript" src="circles.js"></script>
7+
<script type="text/javascript" src="paper-full.js"></script>
8+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.28/howler.js"></script>
9+
<script type="text/paperscript" canvas="myCanvas">
10+
11+
12+
var keyData = {
13+
q: {
14+
sound: new Howl({
15+
urls: ['sounds/bubbles.mp3']
16+
}),
17+
color: '#1abc9c'
18+
},
19+
w: {
20+
sound: new Howl({
21+
urls: ['sounds/clay.mp3']
22+
}),
23+
color: '#2ecc71'
24+
},
25+
e: {
26+
sound: new Howl({
27+
urls: ['sounds/confetti.mp3']
28+
}),
29+
color: '#3498db'
30+
},
31+
r: {
32+
sound: new Howl({
33+
urls: ['sounds/corona.mp3']
34+
}),
35+
color: '#9b59b6'
36+
},
37+
t: {
38+
sound: new Howl({
39+
urls: ['sounds/dotted-spiral.mp3']
40+
}),
41+
color: '#34495e'
42+
},
43+
y: {
44+
sound: new Howl({
45+
urls: ['sounds/flash-1.mp3']
46+
}),
47+
color: '#16a085'
48+
},
49+
u: {
50+
sound: new Howl({
51+
urls: ['sounds/flash-2.mp3']
52+
}),
53+
color: '#27ae60'
54+
},
55+
i: {
56+
sound: new Howl({
57+
urls: ['sounds/flash-3.mp3']
58+
}),
59+
color: '#2980b9'
60+
},
61+
o: {
62+
sound: new Howl({
63+
urls: ['sounds/glimmer.mp3']
64+
}),
65+
color: '#8e44ad'
66+
},
67+
p: {
68+
sound: new Howl({
69+
urls: ['sounds/moon.mp3']
70+
}),
71+
color: '#2c3e50'
72+
},
73+
a: {
74+
sound: new Howl({
75+
urls: ['sounds/pinwheel.mp3']
76+
}),
77+
color: '#f1c40f'
78+
},
79+
s: {
80+
sound: new Howl({
81+
urls: ['sounds/piston-1.mp3']
82+
}),
83+
color: '#e67e22'
84+
},
85+
d: {
86+
sound: new Howl({
87+
urls: ['sounds/piston-2.mp3']
88+
}),
89+
color: '#e74c3c'
90+
},
91+
f: {
92+
sound: new Howl({
93+
urls: ['sounds/prism-1.mp3']
94+
}),
95+
color: '#95a5a6'
96+
},
97+
g: {
98+
sound: new Howl({
99+
urls: ['sounds/prism-2.mp3']
100+
}),
101+
color: '#f39c12'
102+
},
103+
h: {
104+
sound: new Howl({
105+
urls: ['sounds/prism-3.mp3']
106+
}),
107+
color: '#d35400'
108+
},
109+
j: {
110+
sound: new Howl({
111+
urls: ['sounds/splits.mp3']
112+
}),
113+
color: '#1abc9c'
114+
},
115+
k: {
116+
sound: new Howl({
117+
urls: ['sounds/squiggle.mp3']
118+
}),
119+
color: '#2ecc71'
120+
},
121+
l: {
122+
sound: new Howl({
123+
urls: ['sounds/strike.mp3']
124+
}),
125+
color: '#3498db'
126+
},
127+
z: {
128+
sound: new Howl({
129+
urls: ['sounds/suspension.mp3']
130+
}),
131+
color: '#9b59b6'
132+
},
133+
x: {
134+
sound: new Howl({
135+
urls: ['sounds/timer.mp3']
136+
}),
137+
color: '#34495e'
138+
},
139+
c: {
140+
sound: new Howl({
141+
urls: ['sounds/ufo.mp3']
142+
}),
143+
color: '#16a085'
144+
},
145+
v: {
146+
sound: new Howl({
147+
urls: ['sounds/veil.mp3']
148+
}),
149+
color: '#27ae60'
150+
},
151+
b: {
152+
sound: new Howl({
153+
urls: ['sounds/wipe.mp3']
154+
}),
155+
color: '#2980b9'
156+
},
157+
n: {
158+
sound: new Howl({
159+
urls: ['sounds/zig-zag.mp3']
160+
}),
161+
color: '#8e44ad'
162+
},
163+
m: {
164+
sound: new Howl({
165+
urls: ['sounds/moon.mp3']
166+
}),
167+
color: '#2c3e50'
168+
}
169+
}
170+
171+
var circles=[];
172+
173+
function onKeyDown(event){
174+
if(keyData[event.key]){
175+
var maxPoint= new Point(view.size.width, view.size.height);
176+
var randomPoint =Point.random();
177+
var point=maxPoint * randomPoint;
178+
var newCircle=new Path.Rectangle(point,500);
179+
newCircle.fillColor=keyData[event.key].color;
180+
keyData[event.key].sound.play();
181+
circles.push(newCircle);
182+
console.log(maxPoint);
183+
}
184+
}
185+
186+
function onFrame(event){
187+
for(var i=0;i<circles.length;i++){
188+
circles[i].fillColor.hue+=1;
189+
circles[i].scale(.97);
190+
circles[i].rotate(7);
191+
}
192+
193+
}
194+
195+
</script>
196+
</head>
197+
<body>
198+
199+
<canvas id="myCanvas" resize></canvas>
200+
201+
</body>
202+
</html>
203+
204+

‎Patatap Clone/sq.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
alert("press any key betwwen A to Z and Enjoy the GAME!!!!")

‎Patatap Clone/style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
canvas{
2+
width: 100%;
3+
height: 100%;
4+
background: #000000; /* fallback for old browsers */
5+
background: -webkit-linear-gradient(to right, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
6+
background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
7+
8+
}
9+
10+
body,html{
11+
height: 100%;
12+
margin: 0 0;
13+
}

0 commit comments

Comments
 (0)