Hey Guys so hoping to get some help on this, I have searched and searched all night and cannot find a simply way explaining how to implement these three features:
This is one of the effects i want - http://orteil.dashnet.org/cookieclicker/
When you click the cookie it pops up +1 and then fades away, If you apply upgrades it changes the number it displays and increments.
What's the best way to implement this? I have searched and searched and only come up with one or two jquery plugins which display popups when used, But there is not enough documentation or something explaining how to achieve the effect i want. also how to make it appear where my mouse is? I would even be happy if it just displayed in the middle of the image that i click.
Also is there a better way to store my number? At the moment my counter is a variable called "snowballs" and the display is a span which updates every second. is there a better way to store this number and display it? prefarably i would love to use a custom counter like this flipclockjs is this possible?
I have put all my code into a jsfiddle page but the image i click is a local file so it does not display. but at least so you can see my code i have provided the link.
http://jsfiddle.net/edznycyy/1/
Thanks so much for any help.
Code below
// Upgrades
var snowballs = 0;
var penguins = 0;
var penguinsps = 0.1;
var igloos = 0;
var igloosps = 0.5;
var eskimos = 0;
var eskimosps = 1.0;
var polarBears = 0;
var polarBearsps = 2.0;
// snowball functions to increase value
function snowClick(number){
snowballs = snowballs + number;
document.getElementById("snowballs").innerHTML = prettify(snowballs);
}
function userClick(number){
snowballs = snowballs + number;
document.getElementById("snowballs").innerHTML = prettify(snowballs);
}
//Buy functions
function buyPenguin(){
var penguinCost = Math.floor(10 * Math.pow(1.15,penguins)); //works out the cost of this cursor
if(snowballs >= penguinCost){ //checks that the player can afford the cursor
penguins = penguins + 1; //increases number of cursors
snowballs = snowballs - penguinCost; //removes the cookies spent
document.getElementById('penguins').innerHTML = penguins; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
};
var nextCost = Math.floor(10 * Math.pow(1.15,penguins)); //works out the cost of the next cursor
document.getElementById('penguinCost').innerHTML = nextCost; //updates the cursor cost for the user
};
function buyPolarBear(){
var polarBearCost = Math.floor(200 * Math.pow(1.15,polarBears)); //works out the cost of this cursor
if(snowballs >= polarBearCost){ //checks that the player can afford the cursor
polarBears = polarBears + 1; //increases number of cursors
snowballs = snowballs - polarBearCost; //removes the cookies spent
document.getElementById('polarBears').innerHTML = polarBears; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
};
var nextPolarBearCost = Math.floor(200 * Math.pow(1.15,polarBears)); //works out the cost of the next cursor
document.getElementById('polarBearCost').innerHTML = nextPolarBearCost; //updates the cursor cost for the user
};
function buyIgloos(){
var iglooCost = Math.floor(50 * Math.pow(1.15,igloos)); //works out the cost of this cursor
if(snowballs >= iglooCost){ //checks that the player can afford the cursor
igloos = igloos + 1; //increases number of cursors
snowballs = snowballs - iglooCost; //removes the cookies spent
document.getElementById('penguins').innerHTML = penguins; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
document.getElementById('igloos').innerHTML = igloos;
};
var nextIglooCost = Math.floor(50 * Math.pow(1.15,igloos)); //works out the cost of the next cursor
document.getElementById('iglooCost').innerHTML = nextIglooCost; //updates the cursor cost for the user
};
function buyEskimo(){
var eskimoCost = Math.floor(100 * Math.pow(1.15,eskimos)); //works out the cost of this cursor
if(snowballs >= eskimoCost){ //checks that the player can afford the cursor
eskimos = eskimos + 1; //increases number of cursors
snowballs = snowballs - eskimoCost; //removes the cookies spent
document.getElementById('eskimos').innerHTML = eskimos; //updates the number of cursors for the user
document.getElementById('snowballs').innerHTML = snowballs; //updates the number of cookies for the user
};
var nextEskimoCost = Math.floor(100 * Math.pow(1.15,eskimos)); //works out the cost of the next cursor
document.getElementById('eskimoCost').innerHTML = nextEskimoCost; //updates the cursor cost for the user
};
//makes a number neater
function prettify(input){
var output = Math.round(input * 1000000)/1000000;
return output;
}
//Save Load and Delete Functions
function save(){
var save = {
snowballs: snowballs,
penguins: penguins,
igloos: igloos,
eskimos:eskimos,
polarBears:polarBears
}
localStorage.setItem("save",JSON.stringify(save));
};
function load(){
var savegame = JSON.parse(localStorage.getItem("save"));
if (typeof savegame.snowballs !== "undefined") snowballs = savegame.snowballs;
if (typeof savegame.penguins !== "undefined") penguins = savegame.penguins;
if (typeof savegame.igloos !== "undefined") igloos = savegame.igloos;
if (typeof savegame.polarBears !== "undefined") polarBears = savegame.polarBears;
if (typeof savegame.eskimos !== "undefined") eskimos = savegame.eskimos;
document.getElementById('penguins').innerHTML = penguins;
document.getElementById('snowballs').innerHTML = snowballs;
document.getElementById('igloos').innerHTML = igloos;
document.getElementById('polarBears').innerHTML = polarBears;
document.getElementById('eskimos').innerHTML = eskimos;
};
function deleteSave(){
localStorage.removeItem("save")
snowballs = 0;
penguins = 0;
igloos = 0;
eskimos = 0;
polarBears = 0;
document.getElementById('penguins').innerHTML = penguins;
document.getElementById('snowballs').innerHTML = snowballs;
document.getElementById('igloos').innerHTML = igloos;
document.getElementById('polarBears').innerHTML = polarBears;
document.getElementById('eskimos').innerHTML = eskimos;
}
function updateSPS(){
var sps = (penguins * penguinsps) + (polarBears * polarBearsps) + (eskimos * eskimosps) + (igloos * igloosps);
document.getElementById('SPS').innerHTML = prettify(sps);
}
function devGive(){
snowballs = snowballs + 100
document.getElementById("snowballs").innerHTML = prettify(snowballs);
}
window.setInterval(function(){
snowClick(penguins * penguinsps);
snowClick(polarBears * polarBearsps);
snowClick(eskimos * eskimosps);
snowClick(igloos * igloosps);
save();
}, 1000);
window.setInterval(function(){
updateSPS();
}, 100);
body {margin: 0px; }
body > div {
display: flex;
flex-flow:row wrap;
}
body > div > header,nav,main,prices, left,right,bottom, footer {
background: #7FE3F0; border-radius: 7px; margin: 5px; padding: 20px;
}
body > div > header { order: 1; height: 100px; flex: 0 1 100%;font: bold 30px Tahoma;text-align: center; }
body > div > nav { order: 2; height: 50px; flex: 0 1 100%; font: bold 30px Tahoma; text-align: center;}
body > div > prices { display: flex; flex-flow: column wrap; order:6; width: 200px; flex: 0 1 300px; }
#price {
width: 200px;
margin: 10px;
font: bold 15px Tahoma;
padding: 5px;
}
body > div > main {
order: 4;
text-align: center;
min-height:400px;
flex: 1;
}
body > div > right { display: flex; flex-flow:column wrap; order:5; width: 300px; flex: 0 1 300px; }
body > div > right > box1 > h1 { font: bold 20px Tahoma;}
body > div > right > box1,box2,box3,box4 { display: flex; max-width: 200px; max-height: 200px; border-radius: 7px; margin: 1px; padding: 5px; }
body > div > right > box1,box2,box3,box4 > span { display: flex; margin: 5px;}
body > div > right > box1,box2,box3,box4 > img { display: flex; max-width: 70px; max-height: 70px;}
body > div > left { order:3; width: 200px; flex: 0 1 600px; }
#snowball {
width: 350px;
height: 350px;
}
body > div > bottom {
order: 7;
height: 100px;
flex: 0 1 100%;
text-align: center;
font: bold 10px Tahoma;
}
body > div > bottom > img {
width: 50px;
height: 50px;
text-align: center;
}
body > div > footer {
order: 8;
height: 100px;
flex: 0 1 100%;
text-align: center;
font: bold 20px Tahmo;
}
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="style1.css" />
<title> Winter Fun!</title>
</head>
<body>
<div>
<header>Winter Fun!</header>
<nav>
Snowballs: <span id="snowballs">0</span>
<br />
Snowballs Per Second: <span id="SPS" >0</span>
</nav>
<left>
</left>
<prices>
<box1 id = "price">Penguin Cost:<span id="penguinCost">10</span></box1>
<box2 id = "price">Igloo Cost:<span id="iglooCost">50</span></box2>
<box3 id = "price">Eskimo Cost:<span id="eskimoCost">100</span></box3>
<box4 id = "price">Polar Bear Cost:<span id ="polarBearCost">200</span></box4>
</prices>
<main >
<img title = "Click Me!" id="snowball" src="snowball.png" onclick="userClick(1)">
</main>
<right>
<box1>
<img id="penguins1" src="penguin.png" onclick="buyPenguin()">
<span id="penguins">0</span>
</box1>
<box2>
<img id="igloos1" src="igloo.png" onclick="buyIgloos()" >
<span id="igloos">0</span>
</box2>
<box3>
<img id="eskimos1" src="eskimo.png" onclick="buyEskimo()" >
<span id="eskimos">0</span>
</box3>
<box4>
<img id="polarBears1" src="polarBear2.png" onclick="buyPolarBear()" >
<span id="polarBears">0</span>
</box4>
</right>
<bottom>
<h1> Options!</h1>
<img id = "save1" src="save.png" onclick="save()">
<img id = "load1" src="load.png" onclick="load()">
<img id = "delete1" src="delete.png" onclick="deleteSave()">
</bottom>
<footer>
copyright MPWebDesign 2014
</footer>
</body>
<body onload = "load()">
<script type="text/javascript" src="main.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="snow.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
</html>
Aucun commentaire:
Enregistrer un commentaire