<!DOCTYPE html>
<html>
<head>
<style>
/*
Version history below!
*/
html,body {
padding: 0;
margin: 0;
}
body {
background-color: lavender;
overflow: hidden;
}
#canvas {
border: 1px solid black;
background-color: #afafaf;
}
.shopbtn {
width: 100%;
height: 70px;
border: 3px outset darkgrey;
text-align: center;
color: white;
font-size: 30px;
background-color: grey;
outline: none;
}
#shopscreen {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
padding: 20px 30px;
z-index: 10;
top: 100%;
left: 0;
transition: top 0.5s ease-out;
color: white;
font-size: 27px;
padding: 0;
overflow: auto;
}
.closeShopBtn {
color: white;
font-size: 30px;
padding: 20px;
}
.buybtn {
width: 100%;
height: 50px;
font-size: 30px;
color: white;
background-color: green;
border: 2px solid black;
font-family: Georgia;
outline: none;
}
.buybtn:active {
background-color: yellow;
color: black;
}
.info {
font-size: 20px;
}
#totalgold {
font-size: 30px;
color: gold;
}
#upgradebtn {
width: 100%;
font-family: Georgia;
border: 2px solid black;
background-color: lime;
font-size: 25px;
outline: none;
}
#upgradebtn:active {
background-color: black;
color: orange;
}
.firebtn {
width: 100%;
height: 50px;
font-size: 30px;
color: white;
background-color: red;
border: 2px solid black;
font-family: Georgia;
outline: none;
margin-bottom: 60px;
}
.firebtn:active {
background-color: purple;
color: black;
}
</style>
</head>
<body>
<!--
-----Version History-----
VERSION 1.0 (26-03-2022) | INDEV
*Added canvas as game area
*Added shop button
*Added 4 unit idea:
-Basic gold miner
-Intermediate gold miner
-Expert gold miner
-Base mine
VERSION 2.0 (27-03-2022) | INDEV
*Can buy basic gold miner for 15 golds
*Make miner go to the first gold mine / goldMine number 0
*Decreases gold when buy miner
VERSION 3.0 (28-03-2022) | INDEV
*Basic gold miner will mine gold and store gold in core
*Basic gold miner will return with 3 golds
VERSION 3.1 (28-03-2022) | INDEV
*Nerfed basic gold miner result from 3 to 1 gold in return
reason: too overpowered if basic gold miner mine 3 golds,
will make user only use basic gold miner
VERSION 4.0 (29-03-2022) | INDEV
*Added unit system idea:
-Unit cap:
/User cannot spam units as there is a unit cap
/Unit cap is counted in total
/Unit cap is 4 and required to upgrade to increase unit cap
-Fire unit:
/User can fire unit but only get less money
/Will reduce unit cap, "of course"
/Will fire random unit
*Added version history in code
<*AFTER WORK*>
*Added unit cap
*Added unit cap upgrade
VERSION 5.0 (30-02-2022) | INDEV
*Change unit cap from 4 to 8
reason: Using only 4 basic miners will take a long time to upgrade unit cap
*Made a fire button to remove unit
unit: Basic gold miner
*Reduce base mine cost from 500 gold to 350 gold
reason: Too big cost spike from expert mine to base mine (200 gold - 500 gold)
*Can buy Intermediate gold mine for 80 gold
{*Added AI for Intermediate gold miner }
{*Intermediate gold miner will return with 3 golds}
-->
<canvas id="canvas"></canvas>
<button class="shopbtn" onclick="openShop()">Shop</button>
<div id="shopscreen">
<span class="closeShopBtn" onclick="closeShop()"><u>Close shop</u></span>
<br><br><br>
<span>Total gold:</span>
<span id="totalgold"></span>
<br>
<span id="unitCaptxt"></span>
<br><br>
<span>Upgrade unit cap</span>
<button id="upgradebtn"></button>
<br><br>
<hr>
<center>
<span>Unit shop</span>
</center>
<br><br>
<span>---Basic gold miner</span>
<p class="info">A miner will mine gold and bring 1 gold back to the core</p>
<button class="buybtn"></button>
<button class="firebtn"></button>
<span>---Intermediate gold miner</span>
<button class="buybtn"></button>
<button class="firebtn"></button>
<span>---Expert gold miner</span>
<button class="buybtn"></button>
<button class="firebtn"></button>
<span>---Base mine</span>
<button class="buybtn"></button>
<button class="firebtn"></button>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var shopscreen = document.getElementById("shopscreen");
var totalgold = document.getElementById("totalgold");
var unitCaptxt = document.getElementById("unitCaptxt");
var upgradebtn = document.getElementById("upgradebtn");
var gold = 15;
var totalUnit = 0, unitCap = 8;
const buybtn = document.getElementsByClassName("buybtn");
const firebtn = document.getElementsByClassName("firebtn");
canvas.width = innerWidth;
canvas.height = 470;
var basicMinerCost = 15;
var interMinerCost = 80;
var expertMinerCost = 200;
var baseMineCost = 350;
var upgradeCost = 100;
var basicMinerFire = 10;
var interMinerFire = 55;
var expertMinerFire = 175;
var baseMineFire = 300;
function Core() {
this.width = 7;
this.height = 7;
this.x = canvas.width / 2 - this.width / 2;
this.y = canvas.height / 2 - this.height / 2;
this.draw = function() {
ctx.fillStyle = "grey";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function Miner(corex, corey, goldExist, moveSpeed) {
this.width = 7;
this.height = 7;
this.x = corex;
this.y = corey;
this.capacity = 0;
this.redC = Math.floor(Math.random()*256);
this.greenC = Math.floor(Math.random()*256);
this.blueC = Math.floor(Math.random()*256);
this.canMine = 1;
this.goldSelect = Math.floor(Math.random()*goldExist);
this.moveSpeed = moveSpeed
this.draw = function() {
ctx.fillStyle = "rgb(" + this.redC + ", " + this.greenC + ", " + this.blueC + ")";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function GoldMine() {
this.width = 12;
this.height = 12;
this.x = Math.floor(Math.random()*canvas.width);
this.y = Math.floor(Math.random()*canvas.height);
this.draw = function() {
ctx.fillStyle = "gold";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
const core = new Core();
const miner1 = [];
const miner2 = [];
const miner3 = [];
const goldMine = [];
setInterval (rungame, 20);
for (var i = 0; i < 20; i++) {
goldMine.push(new GoldMine());
}
function rungame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
core.draw();
totalUnit = miner1.length + miner2.length + miner3.length;
unitCaptxt.innerHTML = "Unit cap: " + totalUnit + " / " + unitCap;
totalgold.innerHTML = gold + " gold(s)";
buybtn[0].innerHTML = "Buy - " + basicMinerCost + " gold";
buybtn[1].innerHTML = "Buy - " + interMinerCost + " gold";
buybtn[2].innerHTML = "Buy - " + expertMinerCost + " gold";
buybtn[3].innerHTML = "Buy - " + baseMineCost + " gold";
upgradebtn.innerHTML = "Upgrade unit cap - " + upgradeCost + " golds";
firebtn[0].innerHTML = "Fire - +" + basicMinerFire + " gold";
firebtn[1].innerHTML = "Fire - +" + interMinerFire + " gold";
firebtn[2].innerHTML = "Fire - +" + expertMinerFire + " gold";
firebtn[3].innerHTML = "Deconstruct - +" + baseMineFire + " gold";
for (var i = 0; i < miner1.length; i++) {
miner1[i].draw();
if (miner1[i].canMine == 1 && miner1[i].x < goldMine[miner1[i].goldSelect].x) {
miner1[i].x += miner1[i].moveSpeed;
}
if (miner1[i].canMine == 1 && miner1[i].x > goldMine[miner1[i].goldSelect].x) {
miner1[i].x -= miner1[i].moveSpeed;
}
if (miner1[i].canMine == 1 && miner1[i].y < goldMine[miner1[i].goldSelect].y) {
miner1[i].y += miner1[i].moveSpeed;
}
if (miner1[i].canMine == 1 && miner1[i].y > goldMine[miner1[i].goldSelect].y) {
miner1[i].y -= miner1[i].moveSpeed;
}
if (miner1[i].canMine == 1 && miner1[i].x + miner1[i].width > goldMine[miner1[i].goldSelect].x && miner1[i].x < goldMine[miner1[i].goldSelect].x + goldMine[miner1[i].goldSelect].width && miner1[i].y + miner1[i].height > goldMine[miner1[i].goldSelect].y && miner1[i].y < goldMine[miner1[i].goldSelect].y + goldMine[miner1[i].goldSelect].height) {
miner1[i].capacity += 0.025;
}
if (miner1[i].canMine == 1 && miner1[i].capacity >= 3) {
miner1[i].canMine = 0;
}
if (miner1[i].canMine == 0 && miner1[i].capacity <= 0) {
miner1[i].canMine = 1;
}
if (miner1[i].canMine == 0 && miner1[i].x < core.x) {
miner1[i].x += miner1[i].moveSpeed;
}
if (miner1[i].canMine == 0 && miner1[i].x > core.x) {
miner1[i].x -= miner1[i].moveSpeed;
}
if (miner1[i].canMine == 0 && miner1[i].y < core.y) {
miner1[i].y += miner1[i].moveSpeed;
}
if (miner1[i].canMine == 0 && miner1[i].y > core.y) {
miner1[i].y -= miner1[i].moveSpeed;
}
if (miner1[i].canMine == 0 && miner1[i].x == core.x && miner1[i].y == core.y) {
gold += 1;
miner1[i].capacity = 0;
miner1[i].goldSelect = Math.floor(Math.random()*goldMine.length);
}
}
for (var i = 0; i < miner2.length; i++) {
miner2[i].draw();
if (miner2[i].canMine == 1 && miner2[i].x < goldMine[miner2[i].goldSelect].x) {
miner2[i].x += 4;
}
if (miner2[i].canMine == 1 && miner2[i].x > goldMine[miner2[i].goldSelect].x) {
miner2[i].x -= 4;
}
if (miner2[i].canMine == 1 && miner2[i].y < goldMine[miner2[i].goldSelect].y) {
miner2[i].y += 4;
}
if (miner2[i].canMine == 1 && miner2[i].y > goldMine[miner2[i].goldSelect].y) {
miner2[i].y -= 4;
}
if (miner2[i].canMine == 1 && miner2[i].x + miner2[i].width > goldMine[miner2[i].goldSelect].x && miner2[i].x < goldMine[miner2[i].goldSelect].x + goldMine[miner2[i].goldSelect].width && miner2[i].y + miner2[i].height > goldMine[miner2[i].goldSelect].y && miner2[i].y < goldMine[miner2[i].goldSelect].y + goldMine[miner2[i].goldSelect].height) {
miner2[i].capacity += 0.025;
}
if (miner2[i].canMine == 1 && miner2[i].capacity >= 2) {
miner2[i].canMine = 0;
}
if (miner2[i].canMine == 0 && miner2[i].capacity <= 0) {
miner2[i].canMine = 1;
}
if (miner2[i].canMine == 0 && miner2[i].x < core.x) {
miner2[i].x += 4;
}
if (miner2[i].canMine == 0 && miner2[i].x > core.x) {
miner2[i].x -= 4;
}
if (miner2[i].canMine == 0 && miner2[i].y < core.y) {
miner2[i].y += 4;
}
if (miner2[i].canMine == 0 && miner2[i].y > core.y) {
miner2[i].y -= 4;
}
if (miner2[i].canMine == 0 && miner2[i].x == core.x && miner2[i].y == core.y) {
gold += 3;
miner2[i].capacity = 0;
miner2[i].goldSelect = Math.floor(Math.random()*goldMine.length);
}
}
for (var i = 0; i < goldMine.length; i++) {
goldMine[i].draw();
}
}
function openShop() {
shopscreen.style.top = "0";
}
function closeShop() {
shopscreen.style.top = "100%";
}
buybtn[0].addEventListener("click", function() {
if (gold >= basicMinerCost && totalUnit < unitCap) {
miner1.push(new Miner(core.x, core.y, goldMine.length, 2));
gold -= basicMinerCost;
}
});
buybtn[1].addEventListener("click", function() {
if (gold >= interMinerCost && totalUnit < unitCap) {
miner2.push(new Miner(core.x, core.y, goldMine.length, 4));
gold -= interMinerCost;
}
});
buybtn[2].addEventListener("click", function() {
if (gold >= expertMinerCost && totalUnit < unitCap) {
//Push for miner3 array
}
});
upgradebtn.addEventListener("click", function() {
if (gold >= upgradeCost) {
unitCap += 2;
upgradeCost += 10;
gold -= upgradeCost;
}
});
firebtn[0].addEventListener("click", function() {
if (miner1.length != 0) {
gold += basicMinerFire;
miner1.splice(Math.floor(Math.random()*miner1.length), 1);
}
});
firebtn[1].addEventListener("click", function() {
if (miner2.length != 0) {
gold += interMinerFire;
miner2.splice(Math.floor(Math.random()*miner2.length), 1);
}
});
firebtn[2].addEventListener("click", function() {
if (miner3.length != 0) {
gold += expertMinerFire;
miner3.splice(Math.floor(Math.random()*miner3.length), 1);
}
});
</script>
</body>
</html> Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.
HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.
<!DOCTYPE html><html> and ends with </html><h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.<p>..</p> tag.<a> tag.
<a href="https://onecompiler.com/html">HTML online compiler</a>
<img> tag, where src attribute consists of image name.<button>..</button> tag<ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.<a href="https://onecompiler.com/html">HTML online compiler</a>
CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.
Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.
body{
padding: 25px;
}
.title {
color: #228B22;
font-family: Candara;
}
<table> tag.<tr> tag<th> tag<td> tag<caption> tag<script> is the tag used to write scripts in HTML<script src="script.js"></script>