Files
monkeygg2.github.io/games/pull-of-war/index.html
T
2023-09-25 19:51:08 -04:00

273 lines
17 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-7L02W3ZMS5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7L02W3ZMS5');
</script>
<script async="" crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5648726754785335"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<title>Pull of War</title>
<link href="stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div style="height:100%;font-family:Arial, Helvetica, serif;color:#484848;display:block;font-weight:800;">
<div id="mainColumn" style="width:100%;margin-left:20px;display:none;text-align:center;">
<!--<div style="text-align:right;width:100%"><div id="mainTitle" style="font-size:40px;margin:10px;margin-right:15%;">Pull of War v.5</div></div> -->
<div id="mainBox" style="border:3px solid;padding:20px;text-align:left;width:1200px;">
<div id="displaySpace" onmouseover="removeHover()" style="width:100%;text-align:center;border: 2px solid; height:100px;background-color:rgb(247, 230, 220);position:relative">
<div id="resourceDisplayBox" style="position:absolute;left:9px;width:400px;text-align:left;">
<div class="statusLabel" style="top:4px;">Gold: <div class="goldIcon"></div><div class="bigNumber" id="gold" style=""></div></div>
<div class="statusLabel" id="territoryContainer" style="top:28px;">Territory: <img height="18" src="pics/territory.png" width="15"/><div class="bigNumber" id="territory"></div></div>
<div class="statusLabel" id="manaContainer" style="top:54px;background-color:rgb(247, 230, 220);">Mana: <img height="18" src="pics/mana.png" width="18"/><div class="bigNumber" id="mana">100f</div></div>
</div>
<div id="victoryConditionBox" style="position:absolute;left:113px;width:800px;">
<div class="statusLabel" style="left:139px;top:2px;">Your Wall Health: <div class="number" id="wallHealth">801f</div></div>
<div class="statusLabel" style="left:445px;top:2px;">Enemy Wall Health: <div class="number" id="enemyWallHealth">800f</div></div>
<div id="wallProgressBar" style="position:absolute;width:200px;height:20px;margin-top:2px;background-color:grey;display:block;left:119px;padding:5px 10px;top:21px;">
<div class="progressBar" id="compete3" style="width:50%;background-color:#ff0003;float:left"></div><div class="progressBar" id="compete4" style="width:50%;background-color:#000000;float:right;"></div>
</div>
<div id="enemyWallProgressBar" style="position:absolute;width:200px;height:20px;margin-top:2px;background-color:grey;display:block;left:429px;padding:5px 10px;top:21px;">
<div class="progressBar" id="compete5" style="width:50%;background-color:#ff0003;float:left"></div><div class="progressBar" id="compete6" style="width:50%;background-color:#000000;float:right;"></div>
</div>
<div class="statusLabel" id="goldGainContainer" style="top:72px;left:162px;">Gain <div class="goldIcon"></div><div class="number" id="goldGain" style="vertical-align:bottom">10f</div> base gold per kill</div>
<div class="statusLabel" id="territoryGainContainer" style="top:72px;left:402px;">Gain <img height="18" src="pics/territory.png" width="15"/><div class="number" id="territoryGain" style="vertical-align:bottom">10</div> territory upon victory</div>
<div class="statusLabel" style="top:55px;left:361px">Stage <div class="bigNumber" id="stage"></div></div>
</div>
<div id="unitDisplayBox" style="position:absolute;left:203px;width:600px;border:1px solid;top:5px;height:87px;border-radius:15px;display:none;">
<div class="buyName" style="left:357px;top:10px;">Damage Done: <div class="number" id="curDamageDone"></div></div>
<div class="buyName" style="left:55px;top:35px">Kills: <div class="number" id="curKills"></div></div>
<div class="buyName" style="left:221px;top:35px;">Health: <div class="number" id="curHealth"></div></div>
<div class="buyName" style="left:10px;top:10px;">Unit Count: <div class="number" id="curUnitCount"></div></div>
<div class="buyName" style="left:10px;top:60px;">Time Alive: <div class="number" id="curTimeAlive"></div></div>
<div class="buyName" style="left:185px;top:10px;">Max Health: <div class="number" id="curActualHealth"></div></div>
<div class="buyName" style="left:177px;top:60px;">Total Health: <div class="number" id="totalHealth"></div></div>
<div class="buyName" style="left:400px;top:35px;">Damage: <div class="number" id="curDamage"></div></div>
<div class="buyName" style="left:356px;top:60px;">Total Damage: <div class="number" id="totalDamage"></div></div>
</div>
<div class="button" id="pauseButton" onclick="pause()" style="position:absolute;right:5px;top:5px;padding:3px;">Pause</div>
<div id="fps" style="position:absolute;left:3px;bottom:3px;font-size:11px;"></div>
</div>
<div id="allTabs" style="width:100%;height:40px;border:2px solid;text-align:center;color:black;margin-bottom:15px;">
<div class="mainTab" id="warTab" onclick="switchMainTab(0)">Battle</div>
<div class="mainTab" id="mapTab" onclick="switchMainTab(1)">Map</div>
<div class="mainTab" id="territoryTab" onclick="switchMainTab(2)">Unit Spawning</div>
<div class="mainTab" id="unitTab" onclick="switchMainTab(3)">Unit Upgrades</div>
<div class="mainTab" id="buildingsTab" onclick="switchMainTab(4)">Buildings</div>
<div class="mainTab" id="manaTab" onclick="switchMainTab(5)">Spells</div>
<div class="mainTab" id="optionsTab" onclick="switchMainTab(6)">Options</div>
</div>
<div id="warSpace" style="width:100%;vertical-align:top;text-align:left;border:2px solid;height:400px;background-color:rgb(223, 255, 221);position:relative;font-size:12px;">
<img height="400" id="line1" src="pics/line3.png" style="position:absolute;display:none;" width="1200"/>
<img height="400" id="line2" src="pics/line2.png" style="position:absolute;display:none;" width="1200"/>
<img height="400" id="line3" src="pics/line3.png" style="position:absolute;display:none;" width="1200"/>
<img height="400" id="line4" src="pics/line4.png" style="position:absolute;display:none;" width="1200"/>
<img height="400" id="line5" src="pics/line5.png" style="position:absolute;display:none;" width="1200"/>
<img height="400" id="line6" src="pics/line6.png" style="position:absolute;display:none;" width="1200"/>
<div id="fightTime" style="position:absolute;z-index:7"></div>
<canvas height="404" id="damageLines" onmouseout="removeHover()" style="position:absolute;z-index:6" width="1204"></canvas>
<div class="hyperVisible" id="spawnTimers" style="width:1200px;position:absolute;margin-top:5px;height:50px">
<div class="unitSpawnBox" id="soldierContainer" style="">
<div class="spawnAutoAmount" id="soldierAutoSpawnAmount"></div>
<img height="30" src="pics/soldier.png" width="50"/>
<div class="f20" id="soldierSpawnTimer" style="vertical-align:top"></div>
</div>
<div class="unitSpawnBox" id="spearContainer">
<div class="spawnAutoAmount" id="spearAutoSpawnAmount"></div>
<img height="30" src="pics/spear.png" width="50"/>
<div class="f20" id="spearSpawnTimer" style="vertical-align:top"></div>
</div>
<div class="enemyUnitSpawnBox" style="position:absolute;right:-53px;">
<div class="spawnAutoAmount" id="enemySoldierSpawnAmount"></div>
<img height="30" src="pics/enemysoldier.png" width="50"/>
<div class="f20" id="enemySpawnTimer" style="vertical-align:top"></div>
</div>
<div class="enemyUnitSpawnBox" style="position:absolute;right:-2px;">
<div class="spawnAutoAmount" id="enemySpearSpawnAmount" style="left:25px;"></div>
<img height="30" src="pics/enemyspear.png" width="50"/>
</div>
</div>
<!--<div id='wall' style='position:absolute;left:78px;height:350px;top:25px;width:10px;background-color:grey;z-index:5;'></div>
<div id='enemyWall' style='position:absolute;left:1126px;height:350px;top:25px;width:10px;background-color:grey;z-index:5;'></div>-->
<img height="350" id="wall" src="pics/wall.png" style="position:absolute;left:-1px;top:48px;z-index:5;" width="78"/>
<img height="350" id="enemyWall" src="pics/enemywall.png" style="position:absolute;left:1123px;top:48px;z-index:5;" width="78"/>
<div class="hyperVisible" id="fenceHealth" style="position:absolute;left:112px;top:61px;"></div>
<div class="hyperVisible" id="enemyFenceHealth" style="position:absolute;left:1080px;top:61px;"></div>
<img height="300" id="fence" src="pics/fence.png" style="position:absolute;left:114px;top:83px;z-index:5;" width="15"/>
<img height="300" id="enemyFence" src="pics/fence.png" style="position:absolute;left:1090px;top:83px;z-index:5;" width="15"/>
</div>
<div id="manaSpace" style="width:100%;height:60px;background-color:#78AFFF;border:2px solid; margin-top:5px;position:relative;">
<div class="spell" id="spell0" onclick="clickedSpell(0)" style="margin-left:50px;">
<div class="hotkeyNum">(1)</div>
<div>Fireball</div>
<div class="spellCost" id="spellCost0"></div>
</div>
<div class="spell" id="spell1" onclick="clickedSpell(1)">
<div class="hotkeyNum">(2)</div>
<div>Chain Lightning</div>
<div class="spellCost" id="spellCost1"></div>
</div>
<div style="background-color:#C4E3FF;width:400px;height:46px;position:absolute;right:10px;top:5px;border:2px solid black;">
<div style="position:absolute;right:10px;top:6px;">Spell Level: <div class="number" id="spellLevel">1f</div></div>
<div class="number" id="curSpellExp" style="position:absolute;left:10px;bottom:-2px;">2f</div>
<div class="number" id="expNeeded" style="position:absolute;right:176px;bottom:-2px;">3f</div>
<div id="spellProgressBar" style="position:absolute;width:200px;height:20px;margin-top:2px;background-color:grey;display:block;left:6px;padding:2px 10px;top:3px;">
<div class="progressBar" id="curExpBar" style="width:50%;background-color:blue;float:left;height:13px;"></div>
</div>
</div>
</div>
<div class="buyColumn" id="mapSpace" style="background-color:#AFCDC2;overflow:auto;">
</div>
<div class="buyColumn" id="placesSpace" style="background-color:#89D496;">
<div class="unitScreen" id="defaultScreen">
<div style="font-size:18px;">Unit Spawning</div>
<div style="display:block;margin-top:-6px;">Click a unit type to add it to the spawn list</div>
<div style="left:12px;top:9px;position:absolute;font-size:14px;">Construction Total: <div class="number" id="constructionTotal">0f</div></div>
<div style="left:12px;top:25px;position:absolute;font-size:14px;">Construction Rate: <div class="number" id="constructionRate">0f</div></div>
<div style="left:12px;top:40px;position:absolute;font-size:14px;">Territory Used: <div class="number" id="territoryUsed">0f</div> / <img height="18" src="pics/territory.png" width="15"/><div class="number" id="totalTerritoryPlaces">0ff</div></div>
<div style="width:300px;background-color:#C6EECE;position:absolute;left:10px;top:62px;height:360px;border:2px solid">
<div id="spawnListBox" style="margin:5px;border:2px solid black;width:276px;height:342px;overflow:auto;padding-top:5px;position:relative;"></div>
</div>
<div style="width:840px;background-color:#C6EECE;position:absolute;right:15px;top:58px;height:360px;border:2px solid">
<div style="font-size:14px;">Fill up your territory with unit producing buildings!<br/>This will decide which order your units spawn over the level!<br/>
Click the spawn list to remove a building!</div><br/>
<div style="width:80%;text-align:center;margin-top:20px;">
<div class="placeButton" id="soldierPlace" onclick='addToPlaceList("soldier")'>
<img height="30" src="pics/soldier.png" style="margin-top:6px;" width="50"/>
<div style="position:absolute;left:50px;top:3px;">Barracks</div>
<img height="18" src="pics/territory.png" style="left:46px;bottom:5px;position:absolute" width="15"/>
<div class="number" id="soldierPlaceCost" style="position:absolute;left:61px;bottom:1px;">1f</div>
</div><div class="placeButton" id="spearPlace" onclick='addToPlaceList("spear")'>
<img height="30" src="pics/spear.png" style="margin-top:6px;" width="50"/>
<div style="position:absolute;left:50px;top:3px;">Lumber Yard</div>
<img height="18" src="pics/territory.png" style="left:46px;bottom:5px;position:absolute" width="15"/>
<div class="number" id="spearPlaceCost" style="position:absolute;left:61px;bottom:1px;">1f</div>
</div>
</div>
<div onclick="upgradeConstructionRate()" style="width:80%;text-align:center;margin-top:20px;">
<div class="placeButton" id="upgradeConstructionRate" style="font-size:14px;width:auto;height:auto;text-align:center;padding:5px;">
Sell Land for Construction Workers<br/>
-<img height="18" src="pics/territory.png" style="" width="15"/><div class="number" id="costructionRateCost">100</div>, +.5 Construction Rate<br/>
Can only be purchased with unused Territory
</div>
</div>
</div>
</div>
</div>
<div class="buyColumn" id="unitsSpace" style="background-color:rgb(255, 237, 190);">
<div class="unitScreen" id="">
<div style="font-size:18px;">Unit Upgrades</div>
<div style="display:block;margin-top:-6px;">Click a unit type for possible upgrades</div>
<div id="unitList" style="width:400px;border:2px solid;position:absolute;left:10px;top:58px;height:350px;overflow:auto;">
<div class="unitUpgradeContainer" onclick='changeUnitScreen("soldier")'>
<img height="30" src="pics/soldier.png" width="50"/>
Soldier
</div>
<div class="unitUpgradeContainer" onclick='changeUnitScreen("spear")'>
<img height="30" src="pics/spear.png" width="50"/>
Spearman
</div>
<!--<div class='unitUpgradeContainer' onclick='changeUnitScreen("spear")'>
<div id='unitContainer3' class='unitContainer displayLeft' >
<div id='body' class='spear unit' style=''> </div>
<div id='unitWeapon' class='weapon'><div class='weaponspear'></div> </div>
</div>
Lightning Wizard
</div>
<div class='unitUpgradeContainer' onclick='changeUnitScreen("spear")'>
<div id='unitContainer4' class='unitContainer displayLeft' >
<div id='body' class='spear unit' style=''> </div>
<div id='unitWeapon' class='weapon'><div class='weaponspear'></div> </div>
</div>
Knight
</div>
<div class='unitUpgradeContainer' onclick='changeUnitScreen("spear")'>
<div id='unitContainer5' class='unitContainer displayLeft' >
<div id='body' class='spear unit' style=''> </div>
<div id='unitWeapon' class='weapon'><div class='weaponspear'></div> </div>
</div>
Archer
</div>
<div class='unitUpgradeContainer' onclick='changeUnitScreen("spear")'>
<div id='unitContainer6' class='unitContainer displayLeft' >
<div id='body' class='spear unit' style=''> </div>
<div id='unitWeapon' class='weapon'><div class='weaponspear'></div> </div>
</div>
Priest
</div>
<div class='unitUpgradeContainer' onclick='changeUnitScreen("spear")'>
<div id='unitContainer7' class='unitContainer displayLeft' >
<div id='body' class='spear unit' style=''> </div>
<div id='unitWeapon' class='weapon'><div class='weaponspear'></div> </div>
</div>
Catapult
</div>-->
</div>
<div id="unitUpgradesBox" style="width:740px;border:2px solid;position:absolute;right:15px;top:58px;height:350px;">
</div>
</div>
</div>
<div class="buyColumn" id="buildingsSpace" style="background-color:#E1A95F;text-align:center;">
<div style="font-size:18px;margin-top:10px;">Buildings</div>
<div style="display:block;margin-top:-6px;">Click a building type for possible upgrades</div>
<div style="width:400px;border:2px solid;position:absolute;left:10px;top:58px;height:350px;overflow:auto;background-color:#EABD95">
<div class="unitUpgradeContainer" onclick='changeBuildingScreen("wall")'>
<img height="50" src="pics/smallwall.png" width="50"/>
<div style="vertical-align:top;margin-top:16px;">Upgrade Wall</div>
</div>
<div class="unitUpgradeContainer" onclick='changeBuildingScreen("fence")'>
<img height="50" src="pics/smallfence.png" width="25"/>
<div style="vertical-align:top;margin-top:16px;">Upgrade Fence</div>
</div>
</div>
<div id="buildingUpgradesBox" style="width:740px;border:2px solid;position:absolute;right:15px;top:58px;height:350px;background-color:#EABD95"></div>
</div>
<div class="buyColumn" id="spellUpgradeSpace" style="background-color:#AFCDC2;overflow:auto;">
</div>
<div class="buyColumn" id="optionsPage">
<div style="width:90%;margin-top:30px;margin-left:30px;">
<div style="float:left;">Created by: Stop_Sign AKA Phurple</div><br/><br/>
<h3>How to Play:</h3><br/>
Click Unit Spawning, then Barracks, then War to start the game<br/>
Watch the fight in Battle<br/>
Use hotkeys or tap spells and use them on enemies<br/>
Upgrade units, kill the enemy wall health, go further on the map<br/>
You'll need more wood to complete map 2<br/>
Even if you die on harder levels, you'll still get more gold<br/>
You have saving, but no offline. The game works full speed in a different tab<br/>
<div class="button" onclick="clearStorage()" style="padding:5px;">Clear Save (CAREFUL!)</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="helpers.js"></script>
<script src="spells.js"></script>
<script src="mapvalues.js"></script>
<script src="classes.js"></script>
<script src="manualActions.js"></script>
<script src="pullofwar.js"></script>
<script src="graphics.js"></script>
<script src="handleSavingPull.js"></script>
<script src="hacks.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60978932-1', 'auto');
ga('send', 'pageview');
</script>
</html>