Home
pet system development
Jaziton
Wed Feb 21, 2024 6:49 am
It's been a long day and I really want to use our point system for a personal pet before, but it was switched to the badge system instead. I wanted to still try it by adding the pet system to a widget.
I want to trial run some codes on a backup forum before implementing this on Round The Corner.
I want to trial run some codes on a backup forum before implementing this on Round The Corner.
- Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add some basic styling for the pet widget */
#pet-widget {
width: 300px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
}
</style>
<title>Pet Widget</title>
</head>
<body>
<div id="pet-widget">
<h2>My Pet Widget</h2>
<p id="pet-name">Name: </p>
<p id="pet-type">Type: </p>
<p id="pet-happiness">Happiness: </p>
<p id="pet-level">Level: </p>
<button onclick="feedPet()">Feed</button>
<button onclick="playWithPet()">Play</button>
</div>
<script>
// Basic Pet object
let pet = {
name: "Fluffy",
type: "Dog",
happiness: 50,
level: 1,
};
// Function to update the pet widget
function updatePetWidget() {
document.getElementById("pet-name").textContent = "Name: " + pet.name;
document.getElementById("pet-type").textContent = "Type: " + pet.type;
document.getElementById("pet-happiness").textContent = "Happiness: " + pet.happiness;
document.getElementById("pet-level").textContent = "Level: " + pet.level;
}
// Function to feed the pet
function feedPet() {
pet.happiness += 10;
checkEvolution();
updatePetWidget();
}
// Function to play with the pet
function playWithPet() {
pet.happiness += 20;
checkEvolution();
updatePetWidget();
}
// Function to check if the pet should evolve
function checkEvolution() {
if (pet.happiness >= 80) {
evolvePet();
}
}
// Function to evolve the pet
function evolvePet() {
pet.type = "Evolved " + pet.type;
pet.level += 1;
pet.happiness = 50; // Reset happiness after evolution
alert("Congratulations! Your pet has evolved!");
}
// Initial update
updatePetWidget();
</script>
</body>
</html>
Permissions in this forum:
You cannot reply to topics in this forum|
|
|