gaming test1

✨ นายเมษา มานิตสกุลวงศ์

<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;
      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{
    margin-left:30px;
	float:left;
  
  }
  .right{
	float:right;

}
  .action{
    font-size:40px;
}
  .head{
	font-size:40px;
  }
  .subhead{
	font-size:30px;
  }
  .inhead{
	font-size:25px;
  }
  
  p{
  font-size:24px;
  color:black;
  }
  p2{
      border:2px solid black;
      padding:2px;
      text-align:center;
      font-size:24px;
		color:black;
      cursor: pointer;
    }
    .show{
		position:relative;
      top:250px;
      margin:auto;
      color:black;
		border:5px solid black;
      border-radius: 30px 30px 30px 30px;
      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:black;
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
		display:none;
    }
    #action2{
      position:relative;
      top:250px;
      margin:50px;
      color:black;
		border:5px solid black;
      padding:10px;
      text-align:center;
      cursor: pointer;
		display:none;
    }
    #action3{
      position:relative;
      top:250px;
      margin:50px;
      color:black;
		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;
      border-radius:30px 30px 30px 30px;
      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 class="action" id="action1" onclick='takeaction(1)'>อาสา(-300Money +Reputation)</div>
<div class="action" id="action2" onclick='takeaction(2)'>แชร์(+Follower)</div>
<div class="action" id="action3" onclick='takeaction(3)'>พาร์ทไทม์(+Money)</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 step = 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 && step == 1){
        step = step + 1;
			document.getElementById('txt').innerHTML = "<div style='text-align:center'><p1 class=\"head\">How to play </p1></div>" + 
      "<div style='text-align:left'><p1 class=\"subhead\">Follower </p1>:<p1 class=\"inhead\"> ผู้ที่คอยสนับสนุนและช่วยเหลือคุณทำอาสา</p1></div>" +
		"<div style='text-align:left'><p1 class=\"subhead\">Unfollower </p1>:<p1 class=\"inhead\">ผู้ที่เมินปัญหาขยะในเมืองไม่สนใจและไม่ใส่ใจเกี่ยวกับสิ่งนี้</p1></div>" +
      "<div style='text-align:left'><p1 class=\"subhead\">Junk </p1>:<p1 class=\"inhead\"> จำนวนขยะในเมือง</p1></div>" +
      "<div style='text-align:left'><p1 class=\"subhead\">Money </p1>:<p1 class=\"inhead\"> เงินที่คุณมี</p1></div>" +
      "<div style='text-align:left'><p1 class=\"subhead\">Reputation </p1>:<p1 class=\"inhead\"> ชื่อเสียงจากการที่คุณทำอาสาทำให้สังคมมองคุณในด้านดี </p1></div>" +
      "<div style='text-align:left'><p1 class=\"subhead\">Time :<p1 class=\"inhead\"> เวลาปัจจุบัน</p1></div>";
        
      }
      else if(introduce == 1 && step == 2){
        introduce = introduce + 1;
        document.getElementById('txt').innerHTML = "<div style='text-align:center'><p1 class=\"head\">How to play</p1> </div>" + 
      "<div style='text-align:left'><p1 class=\"subhead\">อาสา</p1> :<p1 class=\"inhead\"> เพิ่ม Reputation ให้กับคุณ แต่ก็ต้องใช้เงินซื้ออุปกรณ์</p1></div>" +
		"<div style='text-align:left'><p1 class=\"subhead\">แชร์</p1> : <p1 class=\"inhead\">เพิ่ม Follower ยิ่ง Follower เยอะการกำจัดขยะจะเร็วขึ้น</p1></div>" +
      "<div style='text-align:left'><p1 class=\"subhead\">พาร์ทไทม์</p1> : <p1 class=\"inhead\">ทำงานพาร์ทไทม์เพื่อหาเงิน</p1></div>";

}
      else if(introduce == 2){
         introduce = introduce + 1;
			document.getElementById('txt').innerHTML = "<p1 class=\"head\">Goal</p1><br>คุณจะต้องกำจัดขยะทั้งหมดออกไปจากเมืองนี้เพื่อให้เมืองนี้ยังคงสะอาดและต้องเพิ่ม Follower ทั้งหมด 125 คน เพื่อให้พวกเขามา support คุณ";
      }
      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/845217790352556032/happy-volunteers-collecting-garbage-city-park_179970-771.jpg)";
      document.getElementById('background').style.backgroundRepeat = "no-repeat";
      document.getElementById('background').style.backgroundPosition = "center";
      
      document.getElementById('background').style.backgroundSize = "cover";
      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('background').style.backgroundRepeat = "no-repeat";
      
      document.getElementById('background').style.backgroundSize = "cover";
      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/844939204869619732/konbini.png?width=364&height=559)";
      document.getElementById('background').style.backgroundRepeat = "no-repeat";
      
      document.getElementById('background').style.backgroundSize = "50% auto";
      document.getElementById('background').style.backgroundPosition = "center";
      /*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>