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 |
Google Speech | 26,860 Kb |
American Icons | 6,093 Kb |
A Pen by eprouver | 1,599 Kb |
Spaceship Battle | 5,012 Kb |
TP Reader | 2,402 Kb |
Toki Pona Boggle | 3,874 Kb |
Sort the Knowlege | 3,915 Kb |
Wave Transitions | 3,245 Kb |
Spinning Cubes | 2,315 Kb |
Exploding Squares | 2,770 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 |
Twitch Live Channels | Inkblotty | 4,956 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Resize image | Happyhj | 1,892 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Project MMetro beta | Atomicsong | 5,157 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!