Issue
I am creating a clicker engine. Essentially the goal is to have a product where people can easily create a basic clicker game with upgrades. I am using classes to achieve this an I am fairly inexperienced with JS and HTML.
In my code it should be able to create the buttons and values (currently unchanging) easily. The buttons should go down and the values should be arranged horizontally however the values are appearing the wrong way.
Please not that the cat, dog, and horse variables are simply placeholders and will be changed however the code must not depend on there being X buttons.
Thanks in advance!
Here is my code:
class item{
constructor(name, value, pc, ps, src) {
this.value = value;
this.pc = pc;
this.ps = ps;
console.log(name);
this.id = name;
this.src = src;
document.getElementById("banner").innerHTML = document.getElementById('banner').innerHTML+"<div id="+this.id+"><p>"+this.id+"</p><p id=value>"+this.value+"</p><p>"+this.id.charAt(0)+"pc</p><p id="+this.id.charAt(0)+"pc>"+this.pc+"</p><p>"+this.id.charAt(0)+"ps</p><p id="+this.id.charAt(0)+"ps>"+this.ps+"</p></div>";
document.getElementById("clicks").innerHTML = document.getElementById("clicks").innerHTML + "<img src="+this.src+" alt='"+this.id+". A clickable button. This image could not be loaded' id="+this.id+"Button class=button onclick='"+this.id+".click()'></img>"
//setInterval(this.tick, 1000);
}
click(){
this.value = this.value + this.pc;
console.log(this.value);
}
tick(){
this.value = this.value + this.ps;
console.log(this.value);
};
}
dog = new item("dog", 10, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
cat = new item("cat", 5, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
horse = new item("horse", 2, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");h1{
color: white;
margin:2mm;
}
body{
background: #0f0f0f;
font-family: Courier New, Lucida Console, monospace;
margin:0;
color: white;
}
.banner{
background: #363636;
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
display: flex;
flex-direction: row;
justify-content: center;
}
.banner > *{
padding-left:0.5mm;
padding-right:0.5mm;
}
.button{
width: 40mm;
height: 40mm;
background: red;
}
.pannel{
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clicker Engine V2</title>
</head>
<body>
<div id=clicks class=pannel><div id=banner class=banner></div></div>
</body>
</html>Solution
I have found the issue. I was simply not arranging the items inside the item divs. This issue was easily solved with the following css:
.banner > *{
display: flex;
flex-direction: row;
justify-content: center;
}
This left the final code as:
class item{
constructor(name, value, pc, ps, src) {
this.value = value;
this.pc = pc;
this.ps = ps;
console.log(name);
this.id = name;
this.src = src;
document.getElementById("banner").innerHTML = document.getElementById('banner').innerHTML+"<div id="+this.id+"><p>"+this.id+"</p><p id=value>"+this.value+"</p><p>"+this.id.charAt(0)+"pc</p><p id="+this.id.charAt(0)+"pc>"+this.pc+"</p><p>"+this.id.charAt(0)+"ps</p><p id="+this.id.charAt(0)+"ps>"+this.ps+"</p></div>";
document.getElementById("clicks").innerHTML = document.getElementById("clicks").innerHTML + "<img src="+this.src+" alt='"+this.id+". A clickable button. This image could not be loaded' id="+this.id+"Button class=button onclick='"+this.id+".click()'></img>"
//setInterval(this.tick, 1000);
}
click(){
this.value = this.value + this.pc;
console.log(this.value);
}
tick(){
this.value = this.value + this.ps;
console.log(this.value);
};
}
dog = new item("dog", 10, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
cat = new item("cat", 5, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
horse = new item("horse", 2, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");h1{
color: white;
margin:2mm;
}
body{
background: #0f0f0f;
font-family: Courier New, Lucida Console, monospace;
margin:0;
color: white;
}
.banner{
background: #363636;
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
display: flex;
flex-direction: row;
justify-content: center;
}
.banner > *{
padding-left:0.5mm;
padding-right:0.5mm;
display: flex;
flex-direction: row;
justify-content: center;
}
.button{
width: 40mm;
height: 40mm;
background: red;
}
.pannel{
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clicker Engine V2</title>
</head>
<body>
<div id=clicks class=pannel><div id=banner class=banner></div></div>
</body>
</html>Answered By - Afterlifepro
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.