Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!-- David Söderberg 980805-6734-->
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Hammurabi</title>
- <link rel="stylesheet" type="text/css" href="hammurabi.css">
- <script type="text/javascript" src="hammurabi.js">
- </script>
- </head>
- <body onload="gameStart();">
- <div class="game">
- <h1>O Great Hammurabi!</h1>
- <h2 id="year">The report for year:</h2>
- <ul id="people">
- <li id="starved">Starved:</li>
- <li id="newcomers">Newcomers:</li>
- <li id="population">Population:</li>
- </ul>
- <ul id="economy">
- <li id="acres">Acres:</li>
- <li id="bushels">Bushels:</li>
- <li id="harvest">Harvest:</li>
- <li id="rats">Rats:</li>
- <li id="price">Price:</li>
- </ul>
- <form>
- <div class="game_economy">
- <fieldset class="fieldset">
- <legend>Acres to sell / buy <span id="outputAcrestosellbuy"></span></legend>
- <input type="button" value="-" id="minusbuttonAcrestosellbuy" onclick="onChangeAcres('minusbuttonAcrestosellbuy');">
- <input type="range" id="sliderAcrestosellbuy" onchange="onChangeAcres('sliderAcrestosellbuy');">
- <input type="button" value="+" id="plusbuttonAcrestosellbuy" onclick="onChangeAcres('plusbuttonAcrestosellbuy');">
- </fieldset>
- <fieldset class="fieldset">
- <legend>Feed people <span id="outputFeedpeople"></span></legend>
- <input type="button" value="-" id="minusbuttonFeedpeople" onclick="onChangeFeeding('minusbuttonFeedpeople');">
- <input type="range" id="sliderFeedpeople" onchange="onChangeFeeding('sliderFeedpeople');">
- <input type="button" value="+" id="plusbuttonFeedpeople" onclick="onChangeFeeding('plusbuttonFeedpeople');">
- </fieldset>
- <fieldset class="fieldset">
- <legend>Plant with seed <span id="outputPlantwithseed"></span></legend>
- <input type="button" value="-" id="minusbuttonPlantwithseed" onclick="onChangePlanting('minusbuttonPlantwithseed');">
- <input type="range" id="sliderPlantwithseed" onchange="onChangePlanting('sliderPlantwithseed');">
- <input type="button" value="+" id="plusbuttonPlantwithseed" onclick="onChangePlanting('plusbuttonPlantwithseed');">
- </fieldset>
- </div>
- <div class="game_buttons">
- <button type="button" onclick="gameStart();">Restart</button>
- <button type="button" onclick="finishTurn();">So be it!</button>
- <button type="button" id="help_btn" onclick="showHelp()">Help</button>
- <div id="help" class="help">
- <div class="help-content">
- <div class="help-header">
- <span class="close">×</span>
- <h2>Instruktioner för spelet</h2>
- </div>
- <div class="help-body">
- <p>Detta spel är rätt så simpelt spel och går helt enkelt ut på att du ska
- samla på dig så mycket hektar land, folk och spannmål som möjligt. Detta gör man
- genom att köpa och sälja land, plantera grödor för det nästa året och att mata
- din befolkning. Men se upp, du kan också ha otur och bli drabbad av saker som
- pesten, eller råttor som äter upp ditt spannmål. Det kan alltså bli en liten
- utmaning att lyckas styra landet i 10år utan att förlora makten.
- </p>
- <h3> Reglerna: </h3>
- <ol>
- <li>Spelet håller på i 10 år, varje runda är ett år.</li>
- <li>Varje år ska du bestämma hur mycket hektar du ska köpa/sälja, hur mycket
- mat du ska ge din befolkning och hur mycket du ska plantera för nästa år.</li>
- <li>Varje person behöver 20 skäppor spannmål varje år för att överleva och kan
- som mest ploga 10 hektar land.</li>
- <li>Varje hektar av land behöver en skäppa spannmål för att plantera frön.</li>
- <li>Priset för varje hektar av land varierar mellan 17 till 26 skäppor spannmål.</li>
- <li>Om omständigheterna i ditt land blir för dåligt så kommer folket att göra
- uppror och du förlorar spelet.</li>
- </ol>
- </div>
- </div>
- </div>
- </div>
- </form>
- </div>
- <div class="info">
- <h1> Information om Hammurabi</h1>
- <h2> Om Hammurabi</h2>
- <p><strong>Hammurabi</strong> var den sjätte kungen i Babylon (nuvarande Irak)
- och levde från ungefär 1810 f.Kr till 1750 f.Kr. Han tog över och blev kung
- efter sin far som dog då Hammurabi endast var 18 år gammal.
- </p>
- <h2> Hammurabis lagar</h2>
- <p> Hammurabi är inte bara känd för sina stora framgångar han hade med sina
- eröveringar,utan han är också känd för det sätt han styrde sitt rike. Han var
- personligen inblandad och engagerad i admininistranationen av riket och det är
- just därför <em>Hammurabis lagar</em> existerar. Trots hans engagement av
- administrationen så blev den aldrig effektiv under hans styre. Vilket kan vara
- en av anledningarna till varför administrationen också föll samman efter hans
- död.
- </p>
- <p>
- Lagarna Hammurabi skapade är bland de <em>första</em> lagarna i världen och går
- att hitta på en stor 2,25m hög
- <a href="https://upload.wikimedia.org/wikipedia/commons/6/64/P1050763_Louvre_cod
- e_Hammurabi_face_rwk.JPG">stele.</a>
- Själva skriften på stelen är uppbygt på följande sätt: först en inledning med
- </p>
- </div>
- </body>
- </html>
- ____
- /* David Söderberg 980805-6734 */
- /* BODY, FONTS etc*/
- body {
- width: 90%;
- margin-left: 5%;
- margin-right: 5%;
- background-color: #fff;
- background-image: linear-gradient(90deg, transparent 2.75em, #abced4 2.75em, #abced4 2.875em, transparent 2.875em),
- linear-gradient(#eee .1em, transparent .1em);
- background-size: 100% 1.2em;
- }
- h2{
- margin-bottom: -0.2em;
- }
- /* CONTENT */
- /* CONTENT / GAME */
- .game{
- width: 49%;
- float: left;
- }
- .game_economy{
- width: 49%;
- float: left;
- }
- #economy {
- display: block;
- padding-left: 1em;
- border: black 1px solid;
- border-radius: 0.2em;
- background: #8be0ef;
- list-style: none;
- }
- #economy li {
- margin-bottom: 1px;
- }
- #people {
- display: block;
- padding-left: 1em;
- border: black 1px solid;
- border-radius: 0.2em;
- background: #8be0ef;
- list-style: none;
- }
- #people li {
- display: inline;
- margin-right: 10px;
- }
- .game_buttons{
- width: 49%;
- float: right;
- }
- .game_buttons button {
- padding: 0.625em 0.938em;
- float: none;
- width: 50%;
- display: inline-block;
- margin-left: 0%;
- margin-bottom: 1em;
- margin-top: 1em;
- border-radius: 0.2em;
- }
- .fieldset {
- border-style: none;
- }
- input[type=button]{
- border-radius: 0.2em;
- }
- /* CONTENT / GAME / HELP */
- .help {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0,0,0,0.4);
- }
- .help h2 {
- margin: 0;
- }
- .help-content {
- background-color: #fefefe;
- margin: 15% auto;
- padding: 0.75em;
- border: 2px solid #abced4;
- border-radius: 0.2em;
- width: 80%;
- }
- .help-header {
- padding: 0.125em 1em;
- background-color: #8be0ef;
- border-radius: 0.2em;
- color: white;
- text-shadow: -0.0625em 0 black, 0 0.0625em black, 0.0625em 0 black, 0 0.0625em black;
- }
- .help-body {
- padding: 2px 16px;
- }
- .close {
- color: #aaa;
- float: right;
- font-size: 1.75em;
- font-weight: bold;
- }
- .close:hover, .close:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
- }
- .help ol{
- margin-top: -1em;
- list-style-type: decimal;
- }
- /* CONTENT / INFORMATION*/
- .info {
- width: 49%;
- float: right;
- }
- /* MEDIA QUERIES */ /* Gör sidan scaleable */
- @media only screen and ( max-width: 68.875em) { /* 1102px, för att där går sidan "sönder" */
- .game{
- width: 100%;
- float: none;
- }
- .game_economy fieldset{
- text-align: center;
- }
- .info{
- width: 100%;
- }
- }
- @media only screen and ( max-width: 65em) { /* 1040px */
- body{
- background-image: linear-gradient(#eee .1em, transparent .1em);
- }
- }
- @media only screen and ( max-width: 30.25em) { /* 532px */
- #people li {
- display: block;
- }
- .game_buttons{
- width: 100%;
- }
- .game_buttons button{
- padding: 0.625em 0.938em;
- float: none;
- width: 80%;
- display: inline-block;
- margin-left: 10%;
- margin-right: 10%;
- margin-bottom: 1em;
- margin-top: 1em;
- border-radius: 0.2em;
- }
- .game_economy{
- width: 100%;
- }
- }
- ___
- // This is the game state.
- var gameState;
- gameState = {
- year : 0,
- starved : 0,
- newcomers : 0,
- population : 0,
- acres : 0,
- bushels : 0,
- harvest : 0,
- rats : 0,
- price : 0,
- internalAcres : 0,
- internalBushels : 0,
- totalStarved: 0
- };
- /* Returns the minimum of the three input values. */
- function minimum(firstValue, secondValue, thirdValue) {
- if (firstValue <= secondValue) {
- if (firstValue <= thirdValue) {
- return firstValue;
- } else {
- return thirdValue;
- }
- } else if (secondValue <= thirdValue) {
- return secondValue;
- } else {
- return thirdValue;
- }
- }
- /* Returns the slider which has the id sliderId. */
- function getSlider(sliderId) {
- return document.getElementById(sliderId);
- }
- /* Outputs the value of the slider with the id sliderId
- to the element with the id outputElementId. */
- function updateSliderValueOutput(sliderId, outputElementId) {
- document.getElementById(outputElementId).innerHTML = document.getElementById(sliderId).value;
- }
- /* Helper function.
- function helperFunction(sliderId, outputElementId) {
- var slider = document.getElementById(sliderId);
- outputElement = document.getElementById(outputElementId);
- outputElement.innerHTML = " " + slider.min + " " + slider.max + " " + slider.step;
- }*/
- /* Outputs the momentary game state. */
- function writeGameState() {
- document.getElementById("year").innerHTML = "The report for year: " + gameState.year;
- document.getElementById("starved").innerHTML = "Starved: " + gameState.starved;
- document.getElementById("newcomers").innerHTML = "Newcomers: " + gameState.newcomers;
- document.getElementById("population").innerHTML = "Population: " + gameState.population;
- document.getElementById("acres").innerHTML = "Acres: " + gameState.acres;
- document.getElementById("bushels").innerHTML = "Bushels: " + gameState.bushels;
- document.getElementById("harvest").innerHTML = "Harvest: " + gameState.harvest;
- document.getElementById("rats").innerHTML = "Rats: " + gameState.rats;
- document.getElementById("price").innerHTML = "Price: " + gameState.price;
- updateSliderValueOutput("sliderAcrestosellbuy", "outputAcrestosellbuy");
- updateSliderValueOutput("sliderFeedpeople", "outputFeedpeople");
- updateSliderValueOutput("sliderPlantwithseed", "outputPlantwithseed");
- }
- /* Sets and outputs the initial game state. */
- function gameStart() {
- gameState.year = 1;
- gameState.starved = 0;
- gameState.newcomers = 5;
- gameState.population = 100;
- gameState.acres = 1000;
- gameState.bushels = 2800;
- gameState.harvest = 3;
- gameState.rats = 200;
- gameState.price = randomNumber(10) + 16;
- gameState.internalAcres = gameState.acres;
- gameState.internalBushels = gameState.bushels;
- gameState.totalStarved = 0;
- /* We have to set value after we set min and max,
- because if min and max are set after value has
- been set the Google Chrome browser changes value
- again which leads to a bug in the game.
- We could not figure out the concrete operation
- of the Google Chrome browser which leads to this
- behaviour, despite extensive search on the internet.
- Issue found out: 12/15/2011 */
- var acresSlider = getSlider("sliderAcrestosellbuy");
- acresSlider.min = -gameState.acres;
- acresSlider.max = Math.floor(gameState.internalBushels / gameState.price);
- acresSlider.value = 0;
- acresSlider.step = 1;
- var feedSlider = getSlider("sliderFeedpeople");
- feedSlider.min = 0;
- feedSlider.max = gameState.internalBushels;
- feedSlider.value = 0;
- feedSlider.step = 1;
- var plantSlider = getSlider("sliderPlantwithseed");
- plantSlider.min = 0;
- plantSlider.max = minimum(gameState.internalAcres, 10 * gameState.population, gameState.internalBushels);
- plantSlider.value = 0;
- plantSlider.step = 1;
- writeGameState();
- }
- /* Takes the value of the slider for acres to sell or buy
- and adds it to the acres value. The result is stored
- in internal acres. */
- function updateInternalAcres() {
- gameState.internalAcres = gameState.acres + parseInt(getSlider("sliderAcrestosellbuy").value);
- }
- /* Takes the values of the sliders for acres to sell or buy,
- feed people and plant with seed, subtracts them from
- bushels and stores the result in internal bushels. */
- function updateInternalBushels() {
- var acresToSellOrBuy = parseInt(getSlider("sliderAcrestosellbuy").value);
- var bushelsForFeeding = parseInt(getSlider("sliderFeedpeople").value);
- var bushelsForPlanting = parseInt(getSlider("sliderPlantwithseed").value);
- gameState.internalBushels = gameState.bushels - acresToSellOrBuy * gameState.price - bushelsForFeeding - bushelsForPlanting;
- }
- /* Updates the max property of the acres to buy or sell slider. */
- function updateMaximumAcresToSellBuy() {
- var acresSlider = getSlider("sliderAcrestosellbuy");
- acresSlider.max = Math.floor(gameState.internalBushels / gameState.price) + parseInt(acresSlider.value);
- }
- /* Updates the max property of the feed people slider. */
- function updateMaximumFeedPeople() {
- var feedSlider = getSlider("sliderFeedpeople");
- feedSlider.max = gameState.internalBushels + parseInt(feedSlider.value);
- }
- /* Updates the max property of the plant with seed slider. */
- function updateMaximumPlantWithSeed() {
- var plantSlider = getSlider("sliderPlantwithseed");
- plantSlider.max = minimum(gameState.internalAcres, 10 * gameState.population, gameState.internalBushels + parseInt(plantSlider.value));
- }
- /* This function gets called when the value of the slider
- which determines how much acres will be bought or sold
- is changed.
- It changes the value of the internal acres as following:
- - minus button: decrement the internal acres by 1
- - plus button: increment the internal acres by 1
- - slider: add the new value to internal acres
- The values of the internal bushels, the maximum of
- feed people and plant with seed are also changed. */
- function onChangeAcres(elementId) {
- if (elementId === "minusbuttonAcrestosellbuy") {
- getSlider("sliderAcrestosellbuy").value = parseInt(getSlider("sliderAcrestosellbuy").value) - 1;
- } else if (elementId === "plusbuttonAcrestosellbuy") {
- getSlider("sliderAcrestosellbuy").value = parseInt(getSlider("sliderAcrestosellbuy").value) + 1;
- }
- updateSliderValueOutput("sliderAcrestosellbuy", "outputAcrestosellbuy");
- updateInternalAcres();
- updateInternalBushels();
- updateMaximumFeedPeople();
- updateMaximumPlantWithSeed();
- }
- /* This function gets called when the value of the slider
- which determines how much bushels will be used for feeding
- is changed.
- The values of the internal bushels, the maximum of
- acres to sell or buy and plant with seed are changed. */
- function onChangeFeeding(elementId) {
- if (elementId === "minusbuttonFeedpeople") {
- getSlider("sliderFeedpeople").value = parseInt(getSlider("sliderFeedpeople").value) - 1;
- } else if (elementId === "plusbuttonFeedpeople") {
- getSlider("sliderFeedpeople").value = parseInt(getSlider("sliderFeedpeople").value) + 1;
- }
- updateSliderValueOutput("sliderFeedpeople", "outputFeedpeople");
- updateInternalBushels();
- updateMaximumAcresToSellBuy();
- updateMaximumPlantWithSeed();
- }
- /* This function gets called when the value of the slider
- which determines how much bushels will be used for planting
- is changed.
- The values of the internal bushels, the maximum of
- acres to sell or buy and feed people are changed. */
- function onChangePlanting(elementId) {
- if (elementId === "minusbuttonPlantwithseed") {
- getSlider("sliderPlantwithseed").value = parseInt(getSlider("sliderPlantwithseed").value) - 1;
- } else if (elementId === "plusbuttonPlantwithseed") {
- getSlider("sliderPlantwithseed").value = parseInt(getSlider("sliderPlantwithseed").value) + 1;
- }
- updateSliderValueOutput("sliderPlantwithseed", "outputPlantwithseed");
- updateInternalBushels();
- updateMaximumAcresToSellBuy();
- updateMaximumFeedPeople();
- }
- /* Returns a random number between 1 and maxValue. */
- function randomNumber(maxValue) {
- var number = Math.floor(Math.random() * maxValue + 1);
- return number;
- }
- /* Returns 15% of the time the boolean value true
- and 85% of the time the boolean value false. */
- function plague() {
- var plagueOccurs;
- if (randomNumber(100) <= 15) {
- plagueOccurs = true;
- } else {
- plagueOccurs = false;
- }
- return plagueOccurs;
- }
- /* Returns 40% of the time the boolean value true
- and 60% of the time the boolean value false. */
- function ratsProblem() {
- var ratsProblemOccurs;
- if (randomNumber(10) <= 4) {
- ratsProblemOccurs = true;
- } else {
- ratsProblemOccurs = false;
- }
- return ratsProblemOccurs;
- }
- /* If there is a problem with rats, they eat 1/10, 2/10 or
- 3/10 of the bushels. Otherwise they eat none. */
- function bushelsEatenByRats() {
- var bushelsEaten;
- if (ratsProblem()) {
- bushelsEaten = Math.floor((randomNumber(3) / 10) * gameState.bushels);
- } else {
- bushelsEaten = 0;
- }
- return bushelsEaten;
- }
- /* Returns a random number between 1 and 8. */
- function harvestPerAcre() {
- var harvest = randomNumber(8);
- return harvest;
- }
- /* Calculates how many people starved, depending on
- the number of bushels which were used to feed
- people. */
- function calculateStarvedPeople() {
- var numberPeopleStarved = gameState.population - Math.floor(parseInt(getSlider("sliderFeedpeople").value) / 20);
- if (numberPeopleStarved <= 0) {
- return 0;
- } else {
- return numberPeopleStarved;
- }
- }
- /* Calculates the number of newcomers, depending on
- the internal number of acres, internal number of
- bushels and the size of the population.
- Formula:
- (20 * number of acres you have + amount of grain you have in storage) / (100 * population) + 1*/
- function calculateNewcomers() {
- return Math.floor((20 * gameState.internalAcres + gameState.internalBushels) / (100 * gameState.population)) + 1;
- }
- /* The function returns true if more than 45% of the
- original population starved. Otherwise it returns
- false. */
- function tooManyPeopleStarved() {
- var originalPopulation = gameState.population + gameState.starved - gameState.newcomers;
- if (Math.floor((gameState.starved / originalPopulation) * 100) > 45) {
- return true;
- } else {
- return false;
- }
- }
- /* Så att du ska kunna få hjälp om spelet. */
- function showHelp() {
- var help = document.getElementById('help');
- var btn = document.getElementById("help_btn");
- var span = document.getElementsByClassName("close")[0];
- help.style.display = "block";
- span.onclick = function() {
- help.style.display = "none";
- }
- window.onclick = function(event) {
- if (event.target == help) {
- help.style.display = "none";
- }
- }
- }
- /* If the maximum number of turns is not fulfilled yet and
- not too many people starved, the new game state is being
- calculated and outputted.
- If too many people starved the user is being informed
- that he is kicked out of office.
- Otherwise the end-page is shown which informs the user
- about his performance. */
- function finishTurn() {
- if (plague()) {
- alert("A horrible plague occured!\n" + "Half of your population died.");
- gameState.population = Math.floor(gameState.population / 2);
- }
- gameState.starved = calculateStarvedPeople();
- gameState.totalStarved = gameState.totalStarved + gameState.starved;
- gameState.newcomers = calculateNewcomers();
- gameState.population = gameState.population - gameState.starved + gameState.newcomers;
- gameState.harvest = harvestPerAcre();
- gameState.bushels = gameState.internalBushels + gameState.harvest * parseInt(getSlider("sliderPlantwithseed").value);
- gameState.rats = bushelsEatenByRats();
- gameState.bushels = gameState.bushels - gameState.rats;
- gameState.internalBushels = gameState.bushels;
- gameState.price = randomNumber(10) + 16;
- gameState.acres = gameState.internalAcres;
- if (gameState.year < 10 && !tooManyPeopleStarved()) {
- gameState.year++;
- var acresSlider = getSlider("sliderAcrestosellbuy");
- acresSlider.min = -gameState.acres;
- acresSlider.max = Math.floor(gameState.internalBushels / gameState.price);
- acresSlider.value = 0;
- acresSlider.step = 1;
- var feedSlider = getSlider("sliderFeedpeople");
- feedSlider.min = 0;
- feedSlider.max = gameState.internalBushels;
- feedSlider.value = 0;
- feedSlider.step = 1;
- var plantSlider = getSlider("sliderPlantwithseed");
- plantSlider.min = 0;
- plantSlider.max = minimum(gameState.internalAcres, 10 * gameState.population, gameState.internalBushels);
- plantSlider.value = 0;
- plantSlider.step = 1;
- writeGameState();
- } else if (tooManyPeopleStarved()) {
- alert("You have starved over 45% of the population!\n" + "You have been kicked out of office.\n" + "Try again.");
- gameStart();
- } else {
- var averagePeopleStarved = Math.floor(gameState.totalStarved / 10);
- var acrePerPerson = Math.floor(gameState.acres / gameState.population);
- alert("Overall performance\n" + "Average people starved per year: " + averagePeopleStarved + "\n" + "Population: " + gameState.population + "\n" + "Acres per person: " + acrePerPerson);
- gameStart();
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement