Incremental game

Developer
Size
5,868 Kb
Views
20,240

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 Previews

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);
})();
Incremental game - Script Codes
Incremental game - Script Codes
Home Page Home
Developer Eprouver
Username eprouver
Uploaded September 15, 2022
Rating 3
Size 5,868 Kb
Views 20,240
Do you need developer help for Incremental game?

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!

Eprouver (eprouver) Script Codes
Create amazing captions with AI!

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!