greenpeace index (Copy 7851) (Copy 8308)

✨ Chakraphat Sudjai

<html>
<head>
<style>
    body{
    }
    #background{
		/*border:1px solid black;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      padding:10px;
      margin:10px;
      background:blue;
      background-origin:padding-box;*/
      position:absolute;
      border: 3px solid black;
  		padding: 15px;
      
 		background: lightblue;/*ฉากตอนแนะนำตัว*/
      background-repeat: no-repeat;
      background-size: cover;
  		background-clip: padding-box;
      width:90%;
      height:90%;
      left:5%;
    }
  .center {
  float: right;

position: relative;
  left: -45%; /* or right 50% */
  text-align: left;
}
  .center2 {
  float: right;

position: relative;
  left: -45.5%; /* or right 50% */
  text-align: left;
}
  .left{
	float:left;
  
  }
  .right{
	float:right;

}

p{
  font-size:24px;
  color:black;
  }
  p2{
      border:2px solid black;
      padding:2px;
      text-align:center;
      font-size:24px;
		color:red;
      cursor: pointer;
    }
    .show{
		position:relative;
      top:250px;
      margin:auto;
      color:red;
		border:5px solid black;
      padding:10px;
      text-align:center;
    }
    /*.actionbox{
		position:relative;
      top:250px;
      margin:50px;
      color:red;
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
    }*/
    #action1{
      position:relative;
      top:250px;
      margin:50px;
      color:red;
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
		display:none;
    }
    #action2{
      position:relative;
      top:250px;
      margin:50px;
      color:red;
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
		display:none;
    }
    #action3{
      position:relative;
      top:250px;
      margin:50px;
      color:red;
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
		display:none;
    }
    #warningbox{
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
		display:none;
    }
    #scene{
		background:red;
      display:block;
    }
    #scene2{

}
    #scene3{

}
    
    #border{
		/*display:none;*/
    }
    #UIgame{
      position:absolute;
      width:95%;
      height:15%;
      top:10px;
      left:2.5%;
      margin:auto;
		border:2px solid black;
      display:none;
    }
  	#UIgame2{
      position:absolute;
      width:95%;
      height:10%;
      top:3px;
      left:2.5%;
      margin:auto;
		border:2px solid black;
      display:none;
    }
    #FirstUI{
		text-align:left;
    }
    #SecondUI{
      text-align:center;
    }
    #ThirdUI{
      
		text-align:right;
    }
    /*<body>
  <div id="backgound">
    
  
  <div id="border" class="show">
  <h1 id="txt">โอ เด็กหนุ่มผู้มองโลกในแง่ดี เขามีปณิธานที่จะ
กำจัดขยะออกไปจากเมืองนี้ให้หมด โดยที่เขาจะต้องพยายามชักจูงผู้คนมาช่วยกันทำความ
สะอาดและจะต้องทำงานหาเงินมาด้วย</h1>
    <p2 onclick ="next()">Next</p2>
  </div>
  <div id="UIgame"></div>
  <div id="action1" onclick='takeaction(1)'>asa</div>
  <div id="action2" onclick='takeaction(2)'>share</div>
    <div id="action3" onclick='takeaction(3)'>parttime</div>
  <div id="scene"></div>
  </div>
</body>*/
    
    /*<h1 id="txt">โอ เด็กหนุ่มผู้มองโลกในแง่ดี เขามีปณิธานที่จะ
กำจัดขยะออกไปจากเมืองนี้ให้หมด โดยที่เขาจะต้องพยายามชักจูงผู้คนมาช่วยกันทำความ
สะอาดและจะต้องทำงานหาเงินมาด้วย</h1><p2 onclick ="next()">Next</p2>*/
    
  </style>
</head>
<body>
<div id="background">
<div id="border" class="show">
<h1 id="txt">โอ เด็กหนุ่มผู้มองโลกในแง่ดี เขามีปณิธานที่จะ
กำจัดขยะออกไปจากเมืองนี้ให้หมด โดยที่เขาจะต้องพยายามชักจูงผู้คนมาช่วยกันทำความ
สะอาดและจะต้องทำงานหาเงินมาด้วย</h1>
<p2 onclick="next()">Next</p2>
</div>
<div id="UIgame"></div>
<div id="action1" onclick='takeaction(1)'>asa</div>
<div id="action2" onclick='takeaction(2)'>share</div>
<div id="action3" onclick='takeaction(3)'>parttime</div>
<div id="scene"></div>
</div>
</body>
<script>
    var success = "<div><p><span class='left'>Unfollower:220 คน</span>\
        <span class='center'>Money:500 บาท\
        </span><span class='right'>Junk:500</span></p></div>" +
		  "<br><div><p><span class='left'>Follower:30 คน</span>\
        <span class='center2'>Reputation: 10\
        </span><span class='right'>Time:วันที่ 1 เช้า</span></p></div>";
    var final = 0;
    var action = 0;
    var introduce = 1;
    var follower = 30;
    var unfollower = 220;
    var money = 500;
    var reputation = 30;
    var junk = 500;
    var time = {day:1, phase:1};
  	 var state = 'เช้า';
    function start(){
		document.getElementById('Start').innerHTML = "Test";
    }
    function next(){
      if(introduce == 1){
        introduce = introduce + 1;
			document.getElementById('txt').innerHTML = "How to Play";
      }
      else if(introduce == 2){
         introduce = introduce + 1;
			document.getElementById('txt').innerHTML = "Goal";
      }
      else if(introduce == 3){
        document.getElementById('border').style.display = "none";
        document.getElementById('UIgame').style.display = "block";
        document.getElementById('UIgame').innerHTML = "<div><p><span class='left'>Unfollower:220 คน</span>\
        <span class='center'>Money:500 บาท\
        </span><span class='right'>Junk:500</span></p></div>" +
		  "<br><div><p><span class='left'>Follower:30 คน</span>\
        <span class='center2'>Reputation: 10\
        </span><span class='right'>Time:วันที่ 1 เช้า</span></p></div>";
        document.getElementById('action1').style.display = "block";
        document.getElementById('action2').style.display = "block";
        document.getElementById('action3').style.display = "block";
        /*document.body.style.background = "red";*/
        introduce = introduce + 1;
        
      }
      //ไว้กด next ข้ามฉาก
       else if(introduce == 4){
         document.getElementById('border').style.display = "none";
         document.getElementById('background').style.background = "lightblue"; //อันนี้ scene หมู่บ้าน
         document.getElementById('action1').style.display = "block";
      document.getElementById('action2').style.display = "block";
      document.getElementById('action3').style.display = "block";
         document.getElementById('UIgame').style.display = "block";
       }
      if(final == 1){
        if(junk == 0 && follower >= 125){
        document.getElementById('txt').innerHTML = "End 1";
        	document.getElementById('background').style.background = "blue";//ฉากจบ
          introduce == 6;
        }
        else if(junk > 0){
			document.getElementById('txt').innerHTML = "End 2";
        	document.getElementById('background').style.background = "blue";//ฉากจบ
          introduce == 6;
        }
        else if(junk == 0 && follower < 125){
			document.getElementById('txt').innerHTML = "End 3";
        	document.getElementById('background').style.background = "blue";//ฉากจบ
          introduce == 6;
        }
      }
      if(introduce == 6){
			//ไปเว็บต่อไป landing
      }
    }
    
    
    function takeaction(action){
     if (action == 1){
       if(money < 300){
         document.getElementById('action1').style.display = "none";
      	document.getElementById('action2').style.display = "none";
        document.getElementById('action3').style.display = "none";
        document.getElementById('border').style.display = "block";
        document.getElementById('txt').innerHTML = "เงินไม่พอ";
       }
       
       else{
			action1();
       }
     }
     else if (action == 2){
			action2();
     }
     else if(action == 3){
			action3();
     }
    }
  
  
  function calculatetime(){
    if(time.phase == 1){
		state = "เช้า";
    }
    else if(time.phase == 2){
		state = "กลางวัน";
    }
    else if(time.phase == 3){
		state = "เย็น";
    }
    else if(time.phase == 4){
      time.phase = 1;
		time.day = time.day + 1;
      state = "เช้า";
    }
    return 0;
    
  }
  
    
    function action1(){
        people = Math.floor(Math.random() * 10) + 5;
        money = money - 300;
        junk = junk - 1 - follower;
        reputation = reputation + people;
      	time.phase = time.phase + 1;
      calculatetime();
      if(junk <= 0){
        junk = 0;
        document.getElementById('UIgame').innerHTML = "<div><p><span class='left'>Unfollower:"+unfollower+"คน</span>"+"<span class='center'>Money:"+money+ "บาท</span>"+"<span class='right'>Junk:"+junk+
            "</span></p></div>"+"<br><div><p><span class='left'>Follower:"+follower+"คน</span>"+"<span class='center2'>Reputation:"+reputation+"</span>"+"<span class='right'>Time:วันที่"+ time.day+ state +"</span></p></div>";
      }
      else{
			document.getElementById('UIgame').innerHTML = "<div><p><span class='left'>Unfollower:"+unfollower+"คน</span>"+"<span class='center'>Money:"+money+ "บาท</span>"+"<span class='right'>Junk:"+junk+
            "</span></p></div>"+"<br><div><p><span class='left'>Follower:"+follower+"คน</span>"+"<span class='center2'>Reputation:"+reputation+"</span>"+"<span class='right'>Time:วันที่"+ time.day+ state +"</span></p></div>";
      }
      document.getElementById('background').style.background = "url(https://media.discordapp.net/attachments/829318884309073930/839054380287787018/scene1.png?width=1007&height=559)";
      document.getElementById('action1').style.display = "none";
      document.getElementById('action2').style.display = "none";
      document.getElementById('action3').style.display = "none";
      document.getElementById('border').style.display = "block";
      document.getElementById('UIgame').style.display = "none";
      document.getElementById('txt').innerHTML = "scene1 ทำอาสา";
      if(time.day == 8){
        introduce = 5;
			final = 1;
      }
    }
    
    
    
    
    
    function action2(){
		follower = follower + reputation;
      unfollower = 250 - follower;
      time.phase = time.phase + 1;
      calculatetime();
      if(unfollower <= 0){
        follower = 250;
        unfollower = 0;
      document.getElementById('UIgame').innerHTML = "<div><p><span class='left'>Unfollower:"+unfollower+"คน</span>"+"<span class='center'>Money:"+money+ "บาท</span>"+"<span class='right'>Junk:"+junk+
            "</span></p></div>"+"<br><div><p><span class='left'>Follower:"+follower+"คน</span>"+"<span class='center2'>Reputation:"+reputation+"</span>"+"<span class='right'>Time:วันที่"+ time.day+ state +"</span></p></div>";
      }
      else{
		document.getElementById('UIgame').innerHTML = "<div><p><span class='left'>Unfollower:"+unfollower+"คน</span>"+"<span class='center'>Money:"+money+ "บาท</span>"+"<span class='right'>Junk:"+junk+
            "</span></p></div>"+"<br><div><p><span class='left'>Follower:"+follower+"คน</span>"+"<span class='center2'>Reputation:"+reputation+"</span>"+"<span class='right'>Time:วันที่"+ time.day+ state +"</span></p></div>";
      }
      document.getElementById('background').style.background = "url(https://media.discordapp.net/attachments/829318884309073930/839054378865917962/scene2.png?width=1007&height=559)";
      document.getElementById('action1').style.display = "none";
      document.getElementById('action2').style.display = "none";
      document.getElementById('action3').style.display = "none";
      document.getElementById('border').style.display = "block";
      document.getElementById('UIgame').style.display = "none";
      document.getElementById('txt').innerHTML = "scene2 share";
      if(time.day == 8){
        introduce = 5;
			final = 1;
      }
    }
    
    
    
    
    
    function action3(){
		money = money + 200;
      time.phase = time.phase + 1;
      calculatetime();
      document.getElementById('UIgame').innerHTML = "<div><p><span class='left'>Unfollower:"+unfollower+"คน</span>"+"<span class='center'>Money:"+money+ "บาท</span>"+"<span class='right'>Junk:"+junk+
            "</span></p></div>"+"<br><div><p><span class='left'>Follower:"+follower+"คน</span>"+"<span class='center2'>Reputation:"+reputation+"</span>"+"<span class='right'>Time:วันที่"+ time.day+ state +"</span></p></div>";
      document.getElementById('background').style.background = "url(https://media.discordapp.net/attachments/829318884309073930/839054375850082344/scene3.png?width=1007&height=559)";
      /*test*/
      /*document.getElementById('UIgame').innerHTML = "timephase:"+time.phase+"state:"+state+"day:"+time.day;*/
      /*test*/
      document.getElementById('action1').style.display = "none";
      document.getElementById('action2').style.display = "none";
      document.getElementById('action3').style.display = "none";
      document.getElementById('border').style.display = "block";
      document.getElementById('UIgame').style.display = "none";
      document.getElementById('txt').innerHTML = "scene3 parttime";
      if(time.day == 8){
        introduce = 5;
			final = 1;
      }
    }
  </script>
</html>