[ad_1]
I am making a unofficial mope.io recreation that title is “moper.io” and I wish to make a script that follows my character. How can I do it in html?
Heres my all codes:
MoperMenu.html:
<!-- MoPerMenu.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<title>Moper.io - Foremost Menu</title>
<hyperlink rel="stylesheet" sort="textual content/css" href="fashion.css"> <!-- Hyperlink to your exterior CSS file -->
</head>
<physique>
<div id="main-menu">
<h1>Moper.io</h1>
<button onclick="startGame()">Begin Sport</button>
<button onclick="goToCredits()">Credit</button>
<script>
operate startGame() {
window.location.href="https://gamedev.stackexchange.com/questions/208488/MoperGame.html"; // Navigate to the sport web page
}
operate goToCredits() {
window.location.href="credit.html"; // Navigate to the credit web page
}
</script>
</div>
</physique>
</html>
fashion.css:
/* fashion.css */
physique {
margin: 0;
overflow: hidden;
show: flex;
align-items: heart;
justify-content: heart;
min-height: 100vh;
background-color: #4CAF50;
shade: white;
font-family: 'Futura Md BT', sans-serif;
place: relative;
}
#main-menu, #game-container, #credits-page {
text-align: heart;
z-index: 1;
}
h1 {
font-size: 5em;
line-height: 0.8;
margin-bottom: 30px;
-webkit-text-stroke: 2px black;
text-stroke: 2px black;
shade: white;
place: relative;
z-index: 2;
}
button {
padding: 10px 20px;
font-size: 1.5em;
cursor: pointer;
margin: 10px;
place: relative;
z-index: 3;
show: block;
margin: 0 auto;
}
physique:earlier than {
content material: '';
place: absolute;
high: 0;
left: 0;
width: 100%;
top: 100%;
background:
linear-gradient(to proper, black 2px, clear 2px),
linear-gradient(to backside, black 2px, clear 2px);
background-size: 20px 20px;
opacity: 0.1;
pointer-events: none;
z-index: 0;
}
#character {
width: 50px; /* Adjusted measurement to 50px */
top: 50px; /* Adjusted measurement to 50px */
background-color: crimson; /* Shade or picture for the character */
place: absolute;
z-index: 4;
pointer-events: none; /* Permit cursor interplay with underlying components */
}
#credits-page p {
font-size: 1.2em;
margin-bottom: 15px;
}
/* Further styling particularly for the Credit button in MoPerMenu.html */
#main-menu button:nth-child(2), #credits-page button {
padding: 10px 20px;
font-size: 1.5em;
margin: 0 auto; /* Middle the button horizontally */
}
/* Take away the Welcome message types */
#main-menu h2 {
show: none;
}
Credit.html:
<!-- credit.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<title>Moper.io - Credit</title>
<hyperlink rel="stylesheet" sort="textual content/css" href="fashion.css"> <!-- Hyperlink to your exterior CSS file -->
</head>
<physique>
<div id="credits-page">
<h1>Credit</h1>
<p>Moper.io is an unofficial recreation of Mope.io that was made for higher updates, and the gamers are extra cared for than the unique recreation</p>
<h2>Credit</h2>
<p>Developer Tuna H.</p>
<p>Helper Merich H.</p>
<!-- Add extra credit or data as wanted -->
<button class="standard-button" onclick="goToHomePage()">Go to Dwelling Web page</button>
</div>
<script>
operate goToHomePage() {
window.location.href="https://gamedev.stackexchange.com/questions/208488/MoPerMenu.html"; // Navigate again to the primary menu web page
}
</script>
</physique>
</html>
MoperGame.html:
<!-- credit.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<title>Moper.io - Credit</title>
<hyperlink rel="stylesheet" sort="textual content/css" href="fashion.css"> <!-- Hyperlink to your exterior CSS file -->
</head>
<physique>
<div id="credits-page">
<h1>Credit</h1>
<p>Moper.io is an unofficial recreation of Mope.io that was made for higher updates, and the gamers are extra cared for than the unique recreation</p>
<h2>Credit</h2>
<p>Developer Tuna H.</p>
<p>Helper Merich H.</p>
<!-- Add extra credit or data as wanted -->
<button class="standard-button" onclick="goToHomePage()">Go to Dwelling Web page</button>
</div>
<script>
operate goToHomePage() {
window.location.href="https://gamedev.stackexchange.com/questions/208488/MoPerMenu.html"; // Navigate again to the primary menu web page
}
</script>
</physique>
</html>
And there is ./texture/mouse.png in my information.
[ad_2]
Leave a Reply