123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body id='body'>

  <h1 id='title'>Homeless Game</h1>
  <h3 style="text-align: center; margin-bottom: 30px">Idea from 'Homeless?' in Google Play Store<h3>

  <div id='statsDiv'>
    <label id='statsLabel'>Age:</label>
    <p id='ageInfo'>18 years 0 days</p><br>
  </div>

  <!--Main starting container-->
  <div class='container'>
    <!--Main health div-->
    <div id='healthDiv'>
      <!--Health bar-->
      <div id='healthBarDiv'>
        <div id='barsLabel'>Health x/300</div>
        <input class='bars' id='healthBar' type='text' value='25' disabled />
      </div>
      <!--Health items-->
      <div id='healthItems'>
        <h1 id='barsLabel'>Energy</h1>
        <div class='items'>
          <input type='button' class='itemToClick' value='Sleep -------------------- $0' readonly/>
          <input type='button' class='itemToClick' value='Clinic -------------------- $3' readonly/>
          <input type='button' class='itemToClick' value='Dr. consultation ----- $15' readonly/>
          <input type='button' class='itemToClick' value='Hospital --------------- $50' readonly/>
          <input type='button' class='itemToClick' value='Better hospital ------- $80' readonly/>
        </div>
      </div>
    </div>
    <!--End of main health div-->

    <!--Start of main hunger div-->
    <div id='hungerDiv'>
      <!--Hunger bar-->
      <div id='hungerBarDiv'>
        <h1 id='barsLabel'>Hunger x/300</h1>
        <input class='bars' id='hungerBar' type='text' value='25' disabled />
      </div>
      <!--Hunger items-->
      <div id='hungerItems'>
        <h1 id='barsLabel'>Food</h1>
        <div class='items'>
          <input type='button' class='itemToClick' value='Garbage ---------------- $0' readonly/>
          <input type='button' class='itemToClick' value='Pastry ------------------- $2' readonly/>
          <input type='button' class='itemToClick' value='Fastfood -------------- $20' readonly/>
          <input type='button' class='itemToClick' value='Supermarket --------- $70' readonly/>
          <input type='button' class='itemToClick' value='Restaurant ---------- $140' readonly/>
        </div>
      </div>
    </div>
    <!--End of main hunger div-->

    <div id='workDiv'>
      <!--Cash bar-->
      <div id='workBarDiv'>
        <h1 id='barsLabel'>Cash</h1>
        <input class='bars' id='cashBar' type='text' value='0' disabled />
      </div>
      <!--Jobs-->
      <div id='workItems'>
        <h1 id='barsLabel'>Jobs</h1>
        <div class='items'>
          <input type='button' class='itemToClick' value='Beg ---------------------- $1' readonly/>
          <input type='button' class='itemToClick' value='Wash cars ------------- $5' readonly/>
          <input type='button' class='itemToClick' value='Deliveryman --------- $20' readonly/>
          <input type='button' class='itemToClick' value='Work at bar ---------- $50' readonly/>
          <input type='button' class='itemToClick' value='Uber driver ---------- $100' readonly/>
        </div>
      </div>
    </div>

    <div id='inventoryDiv'>
      <!--Items bar-->
      <div id='workBarDiv'>
        <h1 id='barsLabel'>Inventory</h1>
        <input class='bars' id='itemsBar' type='text' value='1/5' disabled />
      </div>
      <!--Inventory items-->
      <div id='inventoryItems'>
        <h1 id='barsLabel'>Items</h1>
        <div class='items'>
          <input type='button' class='itemToClick' value='Will to live -------------- $0' readonly/>
          <input type='button' id='itemToClick' class='itemToClick' value='Shoes ----------------- $50' readonly/>
          <input type='button' id='itemToClick' class='itemToClick' value='Bicycle --------------- $500' readonly />
          <input type='button' id='itemToClick' class='itemToClick' value='Education --------- $5,000' readonly />
          <input type='button' id='itemToClick' class='itemToClick' value='Car ---------------- $15,000' readonly />
        </div>
      </div>
    </div>
  </div>

  <div class='container' id='resetButtonDiv'>
    <input class='resetButton' id='mainResetButton' type='button' value='Restart'/>
  </div>

</body>
            
          
!
            
              * {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: rgb(205, 194, 152);
}

#title {
  font-size: 50px;
  color: white;
  text-align: center;
  margin: 20px 0px 20px 0px;
}

.container {
  margin: 0 auto;
  width: 1100px;
  display: flex;
}

#statsDiv {
  margin: 0 auto;
  width: 900px;
  /*background-color: rgba(158, 131, 254, 0.4);*/
  text-align: center;
  margin-bottom: 40px;
}
#statsDiv p {
  display: inline-block;
}
#statsDiv label {
  font-weight: bold;
  font-size: 1.2em;
}

#healthDiv {
  width: 100%;
}

#hungerDiv {
  width: 100%;
}

#workDiv {
  width: 100%;
}

#inventoryDiv {
  width: 100%;
}

#healthBarDiv {
  /*background-color: rgb(148, 171, 246);*/
  height: 100px;
  width: 100%;
  margin: 0 auto;
}

#healthItems {
  /*background-color: rgb(122, 150, 241);*/
  width: 100%;
}

#hungerBarDiv {
  /*background-color: rgb(86, 123, 244);*/
  height: 100px;
  width: 100%;
}

#hungerItems {
  /*background-color: rgb(47, 93, 245);*/
  width: 100%;
}

#workBarDiv {
  /*background-color: rgb(2, 27, 110);*/
  height: 100px;
  width: 100%;
}

#workItems{
  /*background-color: rgb(37, 60, 136);*/
  width: 100%;
}

#inventoryItems {
  /*background-color: rgb(37, 60, 136);*/
  width: 100%;
}

.items {
  text-align: center;
}

.bars {
  height: 40px;
  width: 200px;
  border: none;
  border-radius: 7px;
  text-align: center;
  font-size: 30px;
  color: black;
  display: block;
  margin: 0 auto;
}

#barsLabel {
  font-size: 25px;
  color: rgb(21, 8, 27);
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.itemToClick {
  background-color: rgba(147, 249, 119, 0.54);
  font-size: 22px;
  text-align: center;
  margin: 0 auto;
  color: black;
  border-radius: 6px;
  margin-bottom: 5px;
  width: 250px;
  cursor: pointer;
  border: 1px solid black;
}

#itemToClick {
  background-color: white;
}

#gameOverDiv {
  text-align: center;
  margin-top: 100px;
}

#gameOverDisplay {
  font-size: 45px;
  font-family: monospace;
  color: white;
  text-align: center;
  margin-top: 50px;
}

#playAgainButton {
  height: 50px;
  width: 200px;
  font-size: 25px;
}

#resetButtonDiv {
  text-align: center;
  margin-top: 20px;
}

#mainResetButton {
  height: 30px;
  width: 100px;
  font-size: 19px;
}

.resetButton {
  cursor: pointer;
  background-color: rgb(130, 0, 0);
  color: white;
  border: 2px solid rgb(130, 0, 0);
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  outline: none;
  border-radius: 5px;
}

.resetButton:hover {
  background-color: rgb(223, 45, 60);
}

.resetButton:active {
  background-color: rgb(199, 69, 80);
  border: 2px solid rgb(120, 25, 25);
}

            
          
!
            
              $(document).ready(function(){
  //Health variable
  var health = Number($('#healthBar').val());
  //Max health variable
  var maxHealth = 300;
  //Hunger variable
  var hunger = Number($('#hungerBar').val());
  //Max hunger variable
  var maxHunger = 300;
  //Cash variable
  var cash = Number($('#cashBar').val());
  //Character's items
  var inventory = ['will to live'].sort();
  //Character's age variable
  var ageYear = 18;
  var ageDay = 0;
  var daysAlive = 0;

  //Health items cost
  var sleep = 0;
  var clinic = 3;
  var doctorConsultation = 15;
  var hospital = 50;
  var betterHospital = 80;

  //Hunger items cost
  var gargabe = 0;
  var pastry = 2;
  var fastfood = 20;
  var supermarket = 70;
  var restaurant = 140;

  //Jobs salary
  var beg = 1;
  var washCars = 5;
  var workAtBar = 20;
  var deliveryman = 50;
  var taxiDriver = 100;

  //function to increase health
  function increaseHealth(amount){
    // if the health item gives an amount of health that
    // will be less than the maxHealth amount
    if(amount < maxHealth - health){
      //add the health item amount to current health
      $('#healthBar').val(health += amount);
    } else{
      amount = (maxHealth - health)
      $('#healthBar').val(health += amount);
    }
  }

  //function to decrease health
  function decreaseHealth(){
    //always decrease health by 5
    $('#healthBar').val(health -= 5);
  }

  //function to decrease hunger
  function decreaseHunger(amount){
    //if the food item gives an amount of hunger that
    //will be less than the maxHunger amound
    if(amount < maxHunger - hunger){
      //add the food item amount to the current hunger
      $('#hungerBar').val(hunger += amount);
    } else{
      amount = (maxHunger - hunger)
      $('#hungerBar').val(hunger += amount);
    }
  }

  //function to increase hunger
  function increaseHunger(){
    //always increase hunger by 5
    $('#hungerBar').val(hunger -= 5);
  }


  //function to remove cash when buying an item
  function removeCash(amount){
    //remove the amount of cash from their possession
    $('#cashBar').val(cash -= amount);
  }


  //function to add items inventoryDiv
  var i = 1;
  function addItems(item){
    inventory.push(item);
    inventory = inventory.sort();
    console.log(inventory);
    i++;
    $('#itemsBar').val(i + '/5');
  }


  //function to increase age
  function increaseAge(){
    if(ageDay < 365){
      ageDay++;
      daysAlive++;
    } else{
      ageDay = 0;
      ageYear++;
      daysAlive++;
    }
    $('#ageInfo').text(ageYear + ' years ' + ageDay + ' days')
  }


  //function to test if game is over
  function gameOverTest(){
    if(health <= 0 || hunger <= 0){
      var newDIV;
      $('#body').html('<div id="gameOverDiv"></div>');
      newDIV = $('#gameOverDiv').html();
      $('#gameOverDiv').html(newDIV += '<h1 id="gameOverDisplay">GAME OVER!</h1>')
      newDIV = $('#gameOverDiv').html();
      $('#gameOverDiv').html(newDIV += '<h1 id="gameOverDisplay">You survived ' + daysAlive + ' days!</h1>')
      newDIV = $('#gameOverDiv').html();
      $('#gameOverDiv').html(newDIV += '<input class="resetButton" id="playAgainButton" type="button" value="Play again"/>')
    }
    //if user presses the "play again" button
    //restart the game
    $('.resetButton').click(function(){
      window.location.reload();
    })
  }

  //if user presses the "play again" button
  //restart the game
  $('.resetButton').click(function(){
    window.location.reload();
  })



  //when an item is clicked, run this function
  //this function is really long -- multiple switch statements
  $('.itemToClick').click(function(){

    //set the item variable == to the value of the item clicked
    var item = $(this).val();

    //Beginning of switch statements
    switch(item){
      //Beginning of health items:
      case 'Sleep -------------------- $0':
        if(cash >= sleep){
          increaseHealth(10)
          increaseHunger();
          removeCash(0);
          increaseAge();
          gameOverTest();
        }
        break;
      //clinic
      case 'Clinic -------------------- $3':
        if(cash >= clinic){
          increaseHealth(20)
          increaseHunger();
          removeCash(3);
          increaseAge();
          gameOverTest();
        }
        break;
      case 'Dr. consultation ----- $15':
        if(cash >= doctorConsultation){
          increaseHealth(40)
          increaseHunger();
          removeCash(15);
          increaseAge();
          gameOverTest();
        }
        break;
      case 'Hospital --------------- $50':
        if(cash >= hospital){
          increaseHealth(80)
          increaseHunger();
          removeCash(50);
          increaseAge();
          gameOverTest();
        }
        break;
      case 'Better hospital ------- $80':
        if(cash >= betterHospital){
          increaseHealth(80)
          increaseHunger();
          removeCash(80);
          increaseAge();
          gameOverTest();
        }
        break;
      //end of health items

      //beginning of energy items:
      //garbage
      case 'Garbage ---------------- $0':
          decreaseHunger(10);
          decreaseHealth();
          removeCash(0);
          increaseAge();
          gameOverTest();
        break;
      //pastry
      case 'Pastry ------------------- $2':
        if(cash >= pastry){
          decreaseHunger(25);
          decreaseHealth();
          removeCash(2);
          increaseAge();
          gameOverTest();
        }
        break;
      //fastfood
      case 'Fastfood -------------- $20':
        if(cash >= fastfood){
          decreaseHunger(40);
          decreaseHealth();
          removeCash(20);
          increaseAge();
          gameOverTest();
        }
        break;
      //supermarket
      case 'Supermarket --------- $70':
        if(cash >= supermarket){
          decreaseHunger(120);
          decreaseHealth();
          removeCash(70);
          increaseAge();
          gameOverTest();
        }
        break;
      //restaurant
      case 'Restaurant ---------- $140':
        if(cash >= restaurant){
          decreaseHunger(150);
          decreaseHealth();
          removeCash(140);
          increaseAge();
          gameOverTest();
        }
        break;
      //end of energy items

      //beginning of Jobs
      //Beg
      case 'Beg ---------------------- $1':
        if(cash >= sleep){
          increaseHunger();
          decreaseHealth();
          removeCash(-1);
          increaseAge();
          gameOverTest();
        }
        break;
      //Wash cars
      case 'Wash cars ------------- $5':
        if(true){
          increaseHunger();
          decreaseHealth();
          removeCash(-5);
          increaseAge();
          gameOverTest();
        }
        break;
      //Deliveryman
      case 'Deliveryman --------- $20':
        if(true){
          increaseHunger();
          decreaseHealth();
          removeCash(-50);
          increaseAge();
          gameOverTest();
        }
        break;
      //Work at bar
      case 'Work at bar ---------- $50':
        if(true){
          increaseHunger();
          decreaseHealth();
          removeCash(-20);
          increaseAge();
          gameOverTest();
        }
        break;
      //Uber driver
      case 'Uber driver ---------- $100':
        if(true){
          increaseHunger();
          decreaseHealth();
          removeCash(-100);
          increaseAge();
          gameOverTest();
        }
        break;
      //end of Jobs

      //beginning of inventory items
      //Shoes
      case 'Shoes ----------------- $50':
        if(cash >= 50){
          removeCash(50);
          addItems('shoes');
          $(this).css('background-color', 'rgba(147, 249, 119, 0.54)');
          $(this).prop('disabled', 'true');
        }
        break;
      //Bicycle
      case 'Bicycle --------------- $500':
        if(cash >= 500){
          removeCash(500);
          addItems('bicycle');
          $(this).css('background-color', 'rgba(147, 249, 119, 0.54)');
          $(this).prop('disabled', 'true');
        }
        break;
      //Basic education
      case 'Education --------- $5,000':
        if(cash >= 5000){
          removeCash(5000);
          addItems('education');
          $(this).css('background-color', 'rgba(147, 249, 119, 0.54)');
          $(this).prop('disabled', 'true');
        }
        break;
      //Car
      case 'Car ---------------- $15,000':
        if(cash >= 15000){
          removeCash(15000);
          addItems('car');
          $(this).css('background-color', 'rgba(147, 249, 119, 0.54)');
          $(this).prop('disabled', 'true');
        }
        break;
    }











  })









})

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console