So, I'm making a clicker-style fangame (like Cookie Clicker) for Kancolle. I'm a little new to scripting languages and stuff, so I've been using guides and such but I want to do something very specific and combining multiple tutorials on the different aspects is not working.
I will include what code I have so far. I am working on the game in html, css and javascript. I have a lot more I want to add but I'm just working on one thing at a time right now.
What I have been currently trying to do; in the aside section to the right of the page, there is an image. I want this image to be changeable via a dropdown list, so players can use a dropdown list (which I will place right above the image) to select which character CG they want to display at the side. I also want this feature to contain unlockable content; such as unlocking new cgs at certain levels.
These functions are so specific and I'm so new to coding that I've been having quite a lot of trouble determining how to go about it.
I know how to make a droplist and can put an image at the side, but I honestly have no idea how to make the image change by clicking an option. It sounds so simple that I must be missing something obvious but I tried really hard and for some reason I must've messed up something fundamental, because I tried many times and methods but I've sort of got no idea where to even begin. Help with making unlockable content would be appreciated as well, though I think if I try hard enough I can figure it out (with problems elsewhere in the code, I couldn't test it properly).
Sorry in advance if I ask stupid questions, I have a learning disability and with it comes a certain way of thinking about things, and when things work other ways, something obvious to someone else is sometimes difficult for me to understand right away.
Here is the code. What I've got there currently works (at least in my browser), though I have many features to add. My attempts at changing the code to make the dropdown selection were so varied and wrong and I got so lost that I didn't feel they would be very helpful here.
Also, if you have any tips about how to improve what I've done so far, it would be much appreciated!
Thank you in advance!
var fuel = 0;
function fuelClick(number){
fuel = fuel + number;
document.getElementById("fuel").innerHTML = fuel;
};
var ammo = 0;
function ammoClick(number){
ammo = ammo + number;
document.getElementById("ammo").innerHTML = ammo;
};
var steel = 0;
function steelClick(number){
steel = steel + number;
document.getElementById("steel").innerHTML = steel;
};
var bauxite = 0;
function bauxiteClick(number){
bauxite = bauxite + number;
document.getElementById("bauxite").innerHTML = bauxite;
};
var cursors = 0;
function buyCursor(){
var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
if(fuel >= cursorCost)if(ammo >= cursorCost)if(steel >= cursorCost)if(bauxite >= cursorCost){
cursors = cursors + 1;
fuel = fuel - cursorCost;
ammo = ammo - cursorCost;
steel = steel - cursorCost;
bauxite = bauxite - cursorCost;
document.getElementById('cursors').innerHTML = cursors;
document.getElementById('fuel').innerHTML = fuel;
document.getElementById('ammo').innerHTML = ammo;
document.getElementById('steel').innerHTML = steel;
document.getElementById('bauxite').innerHTML = bauxite;
};
var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
document.getElementById('cursorCost').innerHTML = nextCost;
};
var fubuki = 0;
function buyFubuki(){
var fubukiCost = Math.floor(50 * Math.pow(1.5,fubuki));
if(fuel >= fubukiCost){
fubuki = fubuki + 1;
fuel = fuel - fubukiCost;
document.getElementById('fubuki').innerHTML = fubuki;
document.getElementById('fuel').innerHTML = fuel;
};
var nextCost = Math.floor(50 * Math.pow(1.5,fubuki));
document.getElementById('fubukiCost').innerHTML = nextCost;
};
var atago = 0;
function buyAtago(){
var atagoCost = Math.floor(100 * Math.pow(1.5,atago));
if(ammo >= atagoCost){
atago = atago + 1;
ammo = ammo - atagoCost;
document.getElementById('atago').innerHTML = atago;
document.getElementById('ammo').innerHTML = ammo;
};
var nextCost = Math.floor(100 * Math.pow(1.5,atago));
document.getElementById('atagoCost').innerHTML = nextCost;
};
var ryuujou = 0;
function buyRyuujou(){
var ryuujouCost = Math.floor(250 * Math.pow(1.5,ryuujou));
if(bauxite >= ryuujouCost){
ryuujou = ryuujou + 1;
bauxite = bauxite - ryuujouCost;
document.getElementById('ryuujou').innerHTML = ryuujou;
document.getElementById('bauxite').innerHTML = bauxite;
};
var nextCost = Math.floor(250 * Math.pow(1.5,ryuujou));
document.getElementById('ryuujouCost').innerHTML = nextCost;
};
var i168 = 0;
function buyI168(){
var i168Cost = Math.floor(500 * Math.pow(1.5,i168));
if(steel >= i168Cost){
i168 = i168 + 1;
steel = steel - i168Cost;
document.getElementById('i168').innerHTML = i168;
document.getElementById('steel').innerHTML = steel;
};
var nextCost = Math.floor(500 * Math.pow(1.5,i168));
document.getElementById('i168Cost').innerHTML = nextCost;
};
var hayasui = 0;
function buyHayasui(){
var hayasuiCost = Math.floor(1000 * Math.pow(1.5,hayasui));
if(fuel >= hayasuiCost)if(ammo >= hayasuiCost)if(bauxite >= hayasuiCost)if(steel >= hayasuiCost){
hayasui = hayasui + 1;
fuel = fuel - hayasuiCost;
ammo = ammo - hayasuiCost;
bauxite = bauxite - hayasuiCost;
steel = steel - hayasuiCost;
document.getElementById('hayasui').innerHTML = hayasui;
document.getElementById('fuel').innerHTML = fuel;
document.getElementById('ammo').innerHTML = ammo;
document.getElementById('bauxite').innerHTML = bauxite;
document.getElementById('steel').innerHTML = steel;
};
var nextCost = Math.floor(1000 * Math.pow(1.5,hayasui));
document.getElementById('hayasuiCost').innerHTML = nextCost;
};
window.setInterval(function(){
fuelClick(cursors + (fubuki * 5) + (hayasui * 5));
ammoClick(cursors + (atago * 5) + (hayasui * 5));
steelClick(cursors + (i168 * 5) + (hayasui * 5));
bauxiteClick(cursors + (ryuujou * 5) + (hayasui * 5));
}, 1000);body {
background-image: url("http://imgur.com/9NR5X19.png");
background-repeat: no-repeat;
font-family: 'Courgette', cursive;
color: white
}
header {
text-align:center;
padding:5px;
font-size:40px;
}
nav {
text-align:center;
padding:5px;
font-size:25px;
}
section {
float:left;
text-align:center;
padding:5px;
}
article {
float:left;
text-align:center;
padding:5px;
font-size:20px;
}
#tablewrapper {
position:relative;
}
#tablescroll {
height:400px;
overflow:auto;
margin-top:20px;
}
aside {
float:left;
text-align:center;
padding:5px;
}
footer {
text-align:center;
padding:5px;
font-size:30px;
clear:both;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="interface6.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Courgette" />
</head>
<body>
<header>
Kantai Clicker
</header>
<nav>
<img src="http://i.imgur.com/SKSVcKP.png"></img><span id="fuel">0</span>
<img src="http://i.imgur.com/3DmM3nL.png"></img><span id="ammo">0</span>
<img src="http://i.imgur.com/6Fc3m2k.png"></img><span id="steel">0</span>
<img src="http://i.imgur.com/oyRQ8yQ.png"></img><span id="bauxite">0</span>
</nav>
<section>
<button style="border:none; background-color:transparent;" onclick="fuelClick(1);ammoClick(1); steelClick(1); bauxiteClick(1)"><img src="http://i.imgur.com/NHoSDfB.png" style="width:527px;height:400px;"></img></button>
</section>
<article>
<div id="tablewrapper">
<div id="tablescroll">
Information Section<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
Cursors: <span id="cursors">0</span> Cost: <span id="cursorCost">10</span> <img src="http://i.imgur.com/SKSVcKP.png"></img> <img src="http://i.imgur.com/3DmM3nL.png"></img> <img src="http://i.imgur.com/6Fc3m2k.png"></img> <img src="http://i.imgur.com/oyRQ8yQ.png"></img>
<br>
<button onclick="buyCursor()">Buy Cursor</button>
<br>
Fubuki: <span id="fubuki">0</span> Cost: <span id="fubukiCost">50</span> <img src="http://i.imgur.com/SKSVcKP.png"></img>
<br>
<button onclick="buyFubuki()">Buy Fubuki</button>
<br>
Atago: <span id="atago">0</span> Cost: <span id="atagoCost">100</span> <img src="http://i.imgur.com/3DmM3nL.png"></img>
<br>
<button onclick="buyAtago()">Buy Atago</button>
<br>
Ryuujou: <span id="ryuujou">0</span> Cost: <span id="ryuujouCost">250</span> <img src="http://i.imgur.com/oyRQ8yQ.png"></img>
<br>
<button onclick="buyRyuujou()">Buy Ryuujou</button>
<br>
I-168: <span id="i168">0</span> Cost: <span id="i168Cost">500</span> <img src="http://i.imgur.com/6Fc3m2k.png"></img>
<br>
<button onclick="buyI168()">Buy I-168</button>
<br>
Hayasui: <span id="hayasui">0</span> Cost: <span id="hayasuiCost">1000</span> <img src="http://i.imgur.com/SKSVcKP.png"></img> <img src="http://i.imgur.com/3DmM3nL.png"></img> <img src="http://i.imgur.com/6Fc3m2k.png"></img> <img src="http://i.imgur.com/oyRQ8yQ.png"></img>
<br>
<button onclick="buyHayasui()">Buy Hayasui</button>
</div>
</div>
</article>
<aside>
<img src="http://i.imgur.com/6u96uVs.png" style="width:284px;height:500px;"></img>
</aside>
<footer>
Version Alpha
</footer>
<script type="text/javascript" src="main6.js"></script>
</body>
</html>