Drag clicks is one of the techniques most commonly used by the Minecraft community of gamers. Unlike the traditional click, this technique helps you get an immense number of clicks that can get you this far in the Minecraft game. To master Minecraft PVP game mode, you need to be able to click your mouse well. With this simple game, users can test how good they are at drag-click and see their ranking.
Rules of this Game
This sport is easy and smooth to apply there aren't anyt any complicated rules, to be honest. You simply must use your mouse to carry out drag clicking in this sport in an effort to ultimately get you effects there are few barriers on this video games such as:
Users can choose a time restriction starting from 1 2nd up to ten seconds.
Users must click on at the committed location with a purpose to get their clicks registered.
Features of this Game
There are plenty of features that make this game stand out one of the Core features of this game is that it is quite simple and easy to use anybody can simply use it without any hassle some of the key features are listed below:
It shows the remaining time.
If it shows the real-time CPS score.
Users can opt for light and dark modes as per their comfort level.
A Video Guide to Drag Clicking
If you are relatively new to drag clicking or you are not that much familiar with drag clicking or simply you want to know how to perform drag clicks while aiming in a better or most efficient way you can follow this video link to a YouTube video further enhance your skills to reach the god level OR simply follow this video to learn basic drag clicking on any mouse.
Complete Source Code of this Game
Here may be a complete ASCII text file of the drag click take a look at game don't simply copy this game and use it as per your needs however i'll encourage you guys to require this project as a starter and amend it as per your needs and your vacation so as to stand out in your programming skills.
HTML
0
0
2
Dark Theme
CSS
body {
--bg-color: white;
--text-color: black;
--click-color: rgb(235,235,235);
--shadow-color: rgb(190,190,190);
background-color: var(--bg-color);
color: var(--text-color);
overflow: hidden;
}
click {
background-color: var(--click-color);
width: 80vh;
height:80vh;
border-radius:50%;
box-shadow:0 0 20px var(--shadow-color);
position:relative;
border: none;
font-size:1em;
}
click.play-again::after {
content: "Click me to play again!";
}
click:active {
box-shadow:-1px -1px 20px var(--shadow-color);
}
click:active::after {
color: white;
}
click::after {
content: "Click Me!";
position: absolute;
top:35vh;
left:0;
text-align: center;
width:80vh;
font-size: 1.5em;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
flex-wrap: wrap;
}
html,body{
height:100%;
}
textDiv {
font-size:1.2em;
margin-left: 5em;
width:20vw;
}
clickCount::before {
content: "Total Clicks: ";
}
cps {
font-size: 2em;
}
cps::after {
content: " cps";
font-size: 0.6em;
}
timeRemaining::before {
content: "Time Remaining: ";
}
slider-container {
width:100vw;
}
timeSlider {
width: 10%;
}
time::after {
content: " seconds";
}
.single::after {
content: " second" !important;
}
time {
text-align: center;
width:10%;
display: block;
}
label {
vertical-align: middle;
}
allTime::before {
content: "All Time: ";
}
/* Input type=range styles from range.css /
input[type=range] {
width: 100%;
margin: 7.1px 0;
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: #27466b;
border: 0;
border-radius: 5.4px;
width: 100%;
height: 10.8px;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
margin-top: -7.1px;
width: 25px;
height: 25px;
background: rgba(28, 83, 255, 0.93);
border: 2.9px solid #1812ff;
border-radius: 29px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #2e527e;
}
input[type=range]::-moz-range-track {
background: #27466b;
border: 0;
border-radius: 5.4px;
width: 100%;
height: 10.8px;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 25px;
height: 25px;
background: rgba(28, 83, 255, 0.93);
border: 2.9px solid #1812ff;
border-radius: 29px;
cursor: pointer;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 8.9px 0;
color: transparent;
width: 100%;
height: 10.8px;
cursor: pointer;
}
input[type=range]::-ms-fill-lower {
background: #203a58;
border: 0;
border-radius: 10.8px;
}
input[type=range]::-ms-fill-upper {
background: #27466b;
border: 0;
border-radius: 10.8px;
}
input[type=range]::-ms-thumb {
width: 25px;
height: 25px;
background: rgba(28, 83, 255, 0.93);
border: 2.9px solid #1812ff;
border-radius: 29px;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred/
}
input[type=range]:focus::-ms-fill-lower {
background: #27466b;
}
input[type=range]:focus::-ms-fill-upper {
background: #2e527e;
}
/TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE/
@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 /
input[type=range] {
margin: 0;
/*Edge starts the margin from the thumb, not the track as other browsers do/
}
}
JAVASCRIPT
const click = document.getElementById("click");
const clickCountP = document.getElementById("clickCount");
let clickCount = 0;
const cps = document.getElementById("cps");
const timeRemaining = document.getElementById("timeRemaining");
const timeSlider = document.getElementById("timeSlider");
const timeText = document.getElementById("time");
timeSlider.oninput = ()=>{
timeText.innerText = timeSlider.value;
time = timeSlider.value;
if(time == 1) {
timeText.classList.add("single");
} else if(timeText.classList.contains("single")) {
timeText.classList.remove("single");
}
}
let time = timeSlider.value;
let startTime = null;
const allTime = document.getElementById("allTime");
allTime.ondblclick = ()=>{
localStorage.removeItem("all-time");
updateAllTime(0);
}
const updateAllTime = (newScore)=>{
console.log(newScore, Number(localStorage.getItem("all-time")));
if(newScore > Number(localStorage.getItem("all-time"))) {
localStorage.setItem("all-time", newScore.toString());
}
allTime.textContent = localStorage.getItem("all-time") || 0;
}
updateAllTime(0);
const showClicks = ()=>{
clickCountP.innerText = clickCount;
}
showClicks();
const animFunc = ()=>{
const elapsed = (Date.now() - startTime) * 0.001;
if(elapsed < time) {
cps.innerText = Math.round((clickCount / elapsed) * 10) / 10;
timeRemaining.innerText = (time - elapsed).toFixed(2);
window.requestAnimationFrame(animFunc);
} else {
click.disabled = true;
cps.innerText = Math.round((clickCount / time) * 10) / 10;
timeRemaining.innerText = 0;
updateAllTime(Number(cps.innerText));
cps.innerText = "Result: "+cps.innerText;
startTime = null;
click.classList.add("play-again");
setTimeout(()=>{
click.disabled = false;
}, 1000);
}
}
const clickHandler = ()=>{
if(!startTime) {
startTime = Date.now();
window.requestAnimationFrame(animFunc);
clickCount = 0;
click.classList.remove("play-again");
}
clickCount++;
showClicks();
}
click.addEventListener("mousedown", (event)=>{
if(event.button == 0) {
clickHandler();
}
});
click.addEventListener("contextmenu", (event)=>{
event.preventDefault();
clickHandler();
});
const darkTheme = document.getElementById("darkTheme");
const isDarkTheme = localStorage.getItem("dark-theme") === "true";
darkThemeIfy.bind({checked: isDarkTheme})();
darkTheme.checked = isDarkTheme;
darkTheme.oninput = darkThemeIfy;
function darkThemeIfy() {
if(this.checked) {
document.body.style.setProperty("--bg-color", "black");
document.body.style.setProperty("--text-color", "white");
document.body.style.setProperty("--click-color", "rgb(180,180,180)");
document.body.style.setProperty("--shadow-color", "white");
localStorage.setItem("dark-theme", "true");
} else {
document.body.style.setProperty("--bg-color", "");
document.body.style.setProperty("--click-color", "");
document.body.style.setProperty("--text-color", "");
document.body.style.setProperty("--shadow-color", "");
localStorage.setItem("dark-theme", "false");
}
}
Top comments (0)