-
Notifications
You must be signed in to change notification settings - Fork 0
/
play.html
135 lines (125 loc) · 5.13 KB
/
play.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
<html>
<head>
<title>Clicker Game</title>
<style>
body {
background: rgb(0,75,5);
background: linear-gradient(180deg, rgba(0,75,5,1) 0%, rgba(0,255,218,1) 100%);
color: #fff;
font-family: sans-serif;
font-weight: 300;
}
#gems {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
font-weight: bold;
color: #fff;
text-align: center;
text-shadow: 0px 0px 15px rgba(0,0,0,0.7);
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}
#clicker {
background-image: url('gems.png'); /* replace with your image URL */
background-size: 100% 100%;
background-color: transparent;
border: none;
border-radius: 51%;
width: 200px;
height: 200px;
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.2s; /* add this line */
transform-style: preserve-3d; /* add this line */
perspective: 1000px; /* add this line */
}
.plus-one {
position: absolute;
font-size: 24px;
color: #fff;
opacity: 0;
-webkit-user-select: none;
pointer-events: none; /* add this line */
text-shadow: 1px 3px 9px rgba(0, 0, 0, 0.70)
}
.plus-one.show {
animation: riseUp 2.5s forwards;
}
@keyframes riseUp {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-150px);
opacity: 0;
}
}
</style>
</head>
<body>
<p id="gems">Tap to Start</p>
<div class="center">
<button id="clicker"></button>
<script>
let gems = parseInt(getCookie('gems')) || 0; // get the gem count from the cookie, or set it to 0 if it doesn't exist
document.getElementById('gems').innerText = gems;
let canClick = true; // add a flag to track whether the button can be clicked
document.getElementById('clicker').addEventListener('click', (e) => {
if (!canClick) return; // if the button can't be clicked, exit the function
canClick = false; // set the flag to false to prevent further clicks
gems += 1;
document.getElementById('gems').innerText = gems;
setCookie('gems', gems, 30); // save the gem count to a cookie that expires in 30 days
// Calculate the tilt angle based on the click position
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const dx = e.clientX - centerX;
const dy = e.clientY - centerY;
const angleX = (dx / centerX) * 10;
const angleY = (dy / centerY) * 10;
// Apply the tilt effect to the clicker button
document.getElementById('clicker').style.transform = `rotate3d(${angleY}, ${angleX}, 0, 10deg)`;
setTimeout(() => {
document.getElementById('clicker').style.transform = `rotate3d(0, 0, 0, 0deg)`;
}, 200); // reset the tilt effect after 200ms
const plusOne = document.createElement('span');
plusOne.className = 'plus-one';
plusOne.textContent = '+1';
plusOne.style.top = e.clientY + 'px';
plusOne.style.left = e.clientX + 'px';
document.body.appendChild(plusOne);
plusOne.classList.add('show');
setTimeout(() => {
plusOne.remove();
}, 2500);
setTimeout(() => {
canClick = true; // set the flag back to true after a delay
}, 1); // adjust the delay time as needed
});
// cookie functions
function setCookie(name, value, days) {
const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/`;
}
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
</script>
</div>
</body>
</html>