Incremental game
How do I make an incremental game?
What is a incremental game? How do you make a incremental game? This script and codes were developed by Eprouver on 15 September 2022, Thursday.
Incremental game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>incremental game</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="header-game"> <div class="flex-row"> <div class="flex-column" style="max-width: 400px; flex-grow:1"> <div> <label>Level:</label> <label id="incg-level" class="pull-right"></label> </div> <div class="progress"> <div id="incg-progress" class="progress-bar"></div> </div> <label>★ Harvest:</label> <label id="incg-harvested" class="pull-right"> </label> <br/> <br/> <div class="text-muted"> <p>Click the brown dirt to grow plants.</p> <p>Growing plants earn points and grow into ★s.</p> <p>Click for one point. Level up for more garden.</p> <br/><br/> <div id="incg-harvestall"> </div> </div> </div> <div class="flex-column"> <div id="garden"> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Incremental game - Script Codes CSS Codes
body { background: #2e2435;
}
#header-game { font-family: arial; color: #000; width: 100%; position: absolute; left: 0; overflow: auto;
}
#header-game .widget-wrap { margin: 0;
}
#header-game .widget-wrap li { float: left; margin-right: 5px;
}
#header-game h1 { text-align: left; font-size: 3.2vw; padding-bottom: 1em; font-weight: bold; text-shadow: -1px 3px #000, -3px 4px #7b2fc1, -4px 5px #000;
}
#header-game a { color: #fff; text-decoration: none;
}
#header-game .btn { text-align: center; background: #4aa055; padding: 0.8em; color: #fff; border-radius: 5px; border-bottom: 1px solid #008000;
}
#header-game .text-muted { color: #aaa;
}
#header-game .pull-right { float: right;
}
#header-game .flex-row { display: flex; justify-content: space-around;
}
@media (max-width: 660px) { #header-game .flex-row { flex-direction: column; }
}
#header-game .flex-row > * { flex-grow: 0;
}
#header-game .flex-column { padding: 15px;
}
#header-game label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; color: #fff;
}
#header-game .progress { height: 0.7em; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#header-game .progress-bar { float: left; width: 0; height: 100%; line-height: 20px; color: #fff; text-align: center; background-color: #4aa055; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); transition: width 0.6s ease;
}
#header-game #incg-harvested { text-align: right;
}
#header-game #incg-level { font-weight: bold; position: relative;
}
#header-game #garden .plot-row { display: block; position: relative; white-space: nowrap;
}
#header-game #garden .plot-hold { position: relative; display: inline-block;
}
#header-game #garden .plot { color: #fff; width: 5em; height: 5em; margin: 0 1.5px; margin-bottom: 0.3em; border: none; background: #875420; outline: 0; font-size: 0.8em; border-radius: 1em; transition: all 0.5s ease; transform-origin: 0 100%; color: #f5ca9e;
}
#header-game #garden .plot:after { content: 'ಠ╭╮ಠ'; float: left; width: 100%; font-size: 2em; font-weight: lighter;
}
#header-game #garden .plot.plant { background: #4aa055; border-top-left-radius: 2.9em; border-bottom-left-radius: 1em; border-top-right-radius: 0; border-bottom-right-radius: 2.9em; color: #a3ffaf;
}
#header-game #garden .plot.plant.growing { animation: grow 1s 1s ease 1 both;
}
#header-game #garden .plot.plant:after { content: '☉◡☉'; font-weight: bold; font-size: 1.5em;
}
#header-game #garden .plot.harvest { background: transparent; border-radius: 1em; transform-origin: 50% 50%; color: #ffbe36;
}
#header-game #garden .plot.harvest:after { font-size: 4em; content: "★"; font-family: 'Glyphicons Halflings'; text-shadow: 0 1px 1px #9f3f3a; position: relative; left: 0; top: 0; animation: swing 1.5s infinite linear;
}
#header-game #garden .point-up { color: #ffdc00; animation: fadeOutUp 1s ease; position: absolute; font-size: 2.5em; top: 0; left: 50%; margin-left: -0.5em; pointer-events: none;
}
@-moz-keyframes grow { 0% { transform: scale(1); background-color: transparent; color: transparent; } 1% { transform: scale(0); background-color: auto; color: auto; } 100% { transform: scale(1); }
}
@-webkit-keyframes grow { 0% { transform: scale(1); background-color: transparent; color: transparent; } 1% { transform: scale(0); background-color: auto; color: auto; } 100% { transform: scale(1); }
}
@-o-keyframes grow { 0% { transform: scale(1); background-color: transparent; color: transparent; } 1% { transform: scale(0); background-color: auto; color: auto; } 100% { transform: scale(1); }
}
@keyframes grow { 0% { transform: scale(1); background-color: transparent; color: transparent; } 1% { transform: scale(0); background-color: auto; color: auto; } 100% { transform: scale(1); }
}
Incremental game - Script Codes JS Codes
(function playGarden(){ if(typeof $ !== "function" || typeof _ !== "function"){ setTimeout(playGarden, 1000); return; }
var startGarden = { level: 0, progress: 0, next: 4, harvested: 0, seeds: [], plots: [ [{ t: 0, l: 0 }, { t: 0, l: 0 }], [{ t: 0, l: 0 }, { t: 0, l: 0 }] ]
};
var saved;
if (typeof localStorage !== 'undefined') { saved = localStorage.getItem('ogfruit-garden'); if (saved) { saved = $.parseJSON(saved); if (saved) { startGarden = saved; } }
}
(function(myGarden) { var plotClass = ['plant']; var harvest = 8; function save() { if (typeof(localStorage) !== "undefined") { localStorage.setItem("ogfruit-garden", JSON.stringify(myGarden)); } } function harvestall(){ if($('.harvest').length >= 5){ $('#incg-harvestall').empty().append($('<div>').addClass('btn btn-primary btn-block').text('Harvest All').on('click', function(){ $(this).remove(); $('.harvest').click(); })) }else{ $('#incg-harvestall').empty() } } function addGarden() { if (myGarden.plots[0].length < myGarden.plots.length) { myGarden.plots[0].push({ t: 0, l: 0 }); } else { var found = false; //first row shorter than row 0 myGarden.plots.slice(1).forEach(function(p, i) { if (found) return; if (p.length < myGarden.plots[0].length) { found = true; p.push({ t: 0, l: 0 }) } }) //add new row if (!found) myGarden.plots.push([{ t: 0, l: 0 }]); } } function levelUp() { myGarden.level += 1; $('#incg-level').text(myGarden.level); if (myGarden.level % 4 == 0 || myGarden.level % 10 == 0) { addGarden(); drawGarden(myGarden) } save(); } function addProgress(add) { if (add) { myGarden.progress += add; } if (myGarden.progress >= myGarden.next) { levelUp(); myGarden.progress = 0; myGarden.next *= 1.15; } $('#incg-progress').css({ width: ((myGarden.progress / myGarden.next) * 100) + '%' }) save(); }; function addHarvest(add) { add = Math.ceil(Math.random() * add); $({ h: myGarden.harvested }).animate({ h: myGarden.harvested += add }, { duration: 1000, step: function() { $('#incg-harvested').text(Math.ceil(this.h)); } }) myGarden.harvested += add; save(); }; function plotclick() { harvestall(); var row = $(this).data('row'); var col = $(this).data('col'); var plot = myGarden.plots[row][col]; if (plot.l > harvest) { myGarden.plots[row][col].l = 0; addHarvest(1000); $(this).removeClass('harvest').removeClass('plant') addProgress(Math.ceil(myGarden.level / 3)); $(this).append($('<div>').addClass('point-up').text('+' + Math.ceil(myGarden.level / 3)).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $(this).remove(); })) save(); return; } if(plot.l == 0){ $(this).addClass('growing') } addProgress(1); $(this).addClass(plotClass[plot.t]).append($('<div>').addClass('point-up').text('+1').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $(this).remove(); })) if (plot.l == 0) { myGarden.plots[row][col].l = 1; } save(); } var growTimeout function grow() { $('#header-game .plot-hold').each(function(i, v) { var row = $(v).find('.plot').data('row'); var col = $(v).find('.plot').data('col'); var plot = myGarden.plots[row][col]; if (plot.l > harvest) { $(v).find('.plot').addClass('harvest') return; } if (plot.l > 0 && plot.l <= harvest) setTimeout(function() { plot.l += 1; if (plot.l > harvest) { $(v).find('.plot').addClass('harvest') } addProgress(1); $(v).append($('<div>').addClass('point-up').css({color: '#01FF70'}).text('+1').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { myGarden.plots[row][col] = plot; $(this).remove(); })) harvestall(); }, Math.random() * 1000 + 1000); }); save(); if (growTimeout) clearTimeout(growTimeout); growTimeout = setTimeout(grow, 15000); } window.drawGarden = function() { var garden = $('#header-game #garden').empty(); myGarden.plots.forEach(function(row, r) { var rowHold = $('<div>').addClass('plot-row'); row.forEach(function(p, c) { var plot = $('<button>').addClass('plot').on('click', plotclick).data('row', r).data('col', c) if (row[c].l == 0) { rowHold.append($('<div>').addClass('plot-hold').append(plot)); } else if (row[c].l <= harvest) { plot.addClass('plant') rowHold.append($('<div>').addClass('plot-hold').append(plot)); } else if (row[c].l > harvest) { plot.removeClass('plant').removeClass('growing').addClass('harvest') rowHold.append($('<div>').addClass('plot-hold').append(plot)); } }) garden.append(rowHold) }) $('#incg-level').text(myGarden.level); $('#incg-progress').css({ width: ((myGarden.progress / myGarden.next) * 100) + '%' }) $('#incg-harvested').text(myGarden.harvested); setTimeout(grow, 1000); } if(saved){ $('#header-title').hide(); $('#header-game').show(); window.drawGarden(); harvestall(); }else{ $('#subtitle-wrap').show(); window.drawGarden(); }
})(startGarden);
})();
Developer | Eprouver |
Username | eprouver |
Uploaded | September 15, 2022 |
Rating | 3 |
Size | 5,868 Kb |
Views | 20,240 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
American Icons | 6,093 Kb |
Square Friends Dropping By | 2,337 Kb |
A Pen by eprouver | 1,599 Kb |
Spinning Cubes | 2,315 Kb |
Spaceship Battle | 5,012 Kb |
Toki Pona Boggle | 3,874 Kb |
Exploding Squares | 2,770 Kb |
Weather Map | 32,525 Kb |
Google Speech | 26,860 Kb |
Incremental game | 5,868 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Slick Slider | Wearebold | 5,913 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
STIKHOI | Denmch | 7,122 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Template | Indra_z85 | 2,323 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!