การบ้าน WebAudio กัปตัน-อาชัญ

✨ ARCHAN PHALANUPHAT

<html>
  <head>
    <style>
      @keyframes tacklepikachu{
        0% {
          
          transform: translate(0px, 0px);}
      
      100% { 
        transform: translate(350px, -200px);}
      }
      body{
         width: 100%;
  			height: 100%;
			margin:0;
        	background-color:hsl(175, 9%, 25%);
         overflow: hidden;
      }
      @font-face {
    		font-family: '8BIT WONDER';
    		font-style: normal;
    		font-weight: 400;
    		src: local('8BIT WONDER'), url('https://fonts.cdnfonts.com/s/19901/8-BIT WONDER.woff') format('woff');
		}
       .box{
         width: 1000px;
         height: 700px;
         background: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2fb2821a-1406-4a1d-9b04-6668f278e944/d83u1bh-86ca117d-835e-455d-b9ad-108ba1e60f80.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzJmYjI4MjFhLTE0MDYtNGExZC05YjA0LTY2NjhmMjc4ZTk0NFwvZDgzdTFiaC04NmNhMTE3ZC04MzVlLTQ1NWQtYjlhZC0xMDhiYTFlNjBmODAucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.j8yvsWVPhx9gK8QnaO6ezpN8FN4c4v1oZK3YOJYigDo');
         margin: auto;
         position: absolute;
         background-size: cover;
         background-position:center;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         border-radius: 10px;
    	}
      .center {
			width: 15px;
        height: 100px;
      }
      .pika{
			position: absolute;
        	left: 15%;
        	top: 40%;
      }
      .tackle{
         position: absolute;
        	left: 15%;
        	top: 40%;
			animation: tacklepikachu .25s 2 alternate linear ;
      }
      .senikame{
      	position: absolute;
        	left: 59%;
        	top: 1%;
         z-index:-1;
      }
      .hppika{
			position: absolute;
        	left: 72.5%;
        	top: 56.7%;
        	font-size: 30px;
         font-family: '8BIT WONDER', sans-serif; 	
      }
      .levelpika{
			position: absolute;
        	left: 83%;
        	top: 45%;
        	font-size: 30px;
         font-family: '8BIT WONDER', sans-serif; 	
      }
      .namepika{
			position: absolute;
        	left: 60%;
        	top: 45%;
        	font-size: 30px;
         font-family: '8BIT WONDER', sans-serif; 
      }
      .hpseni{
			position: absolute;
        	left: 19.9%;
        	top: 14%;
        	font-size: 30px;
         font-family: '8BIT WONDER', sans-serif; 	
      }
      .levelseni{
			position: absolute;
        	left: 31%;
        	top: 3%;
        	font-size: 30px;
         font-family: '8BIT WONDER', sans-serif; 	
      }
      .nameseni{
			position: absolute;
        	left: 5%;
        	top: 3%;
        	font-size: 30px;
         font-family: '8BIT WONDER', sans-serif; 
      }
      .senifloor {
          height: 100px;
          width:500px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          left: 48.4%;
        	 top: 28%;
          z-index: -2;
        }
      .senifloor2 {
          height: 120px;
          width:550px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          left: 46%;
        	 top: 27%;
          z-index: -3;
        	 background-color:hsl(175, 9%, 25%);
      	}
      .pikafloor {
          height: 100px;
          width:500px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          left: 4%;
        	 top: 60%;
          z-index: -3;
        }
      .pikafloor2 {
          height: 120px;
          width:550px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          left: 1.5%;
        	 top: 59%;
          z-index: -4;
        	 background-color:hsl(175, 9%, 25%);
      	}
        
      .senisquare {
          left: 4%;
          height: 20%;
          width: 40%;
          background-color: #f8f7d8;
          position: absolute;
        	 top: 5%;
          border-radius: 25px;
        	 z-index: -1;
          }
      .senisquare1 {
          left: 3%;
          height: 23%;
          width: 42%;
          background-color: #0e1612;
          position: absolute;
        	 top: 3.5%;
          border-radius: 25px;
        	 z-index: -2;
          }
      .pikasquare {
          left: 58%;
          height: 20%;
          width: 40%;
          background-color: #f8f7d8;
          position: absolute;
        	 top: 47%;
          border-radius: 25px;
        	 z-index: -1;
          }
      .pikasquare1 {
          left: 57%;
          height: 23%;
          width: 42%;
          background-color: #0e1612;
          position: absolute;
        	 top: 45.5%;
          border-radius: 25px;
        	 z-index: -2;
          }
      .hppikasq{
			 left: 64%;
          height: 3%;
          width: 32%;
          background-color: #111;
          position: absolute;
        	 top: 56%;
          border-radius: 25px;
          }
       .hpsenisq {
          left: 11.5%;
          height: 3%;
          width: 32%;
          background-color: #111;
          position: absolute;
        	 top: 14%;
          border-radius: 25px;
      }
      
      .button1 {
          background-color: #ecf0cb;
          border: none;
          color: black;
          padding: 40px 50px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          margin: 5px 2px;
          cursor: pointer;
          font-size: 60px;
          border-radius: 50px;
          font-family: '8BIT WONDER', sans-serif; 
		}
      .hppika3{
			 left: 64.5%;
          height: 2%;
          width: 31%;
          background-color: #66c885;
          position: absolute;
        	 top: 56.5%;
          border-radius: 25px;
      }
      .hpseni3{
			 left: 12%;
          height: 2%;
          width: 31%;
          background-color: #66c885;
          position: absolute;
        	 top: 14.5%;
          border-radius: 25px;
      }
      .bg {
          background-color: #303030;
          border: none;
          color: #f2f2f2;
          padding: 15px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 15px;
          margin: 5px 2px;
          cursor: pointer;
          border-radius: 10px;
          font-family: '8BIT WONDER', sans-serif;
		}
      .backg{
			 left: 81%;
          height: 2%;
          width: 31%;
          position: absolute;
        	 top: 2%;
      }
      .tackle2{
			position: absolute;
        	left: 50%;
        	top: 75%;
      }
      .event_key{
		  position: absolute;
        left: 10%;
        top: 80%;
       }
      .event_key2{
		  position: absolute;
        left: 10.4%;
        top: 88%;
       }
      button{
        background-color: #ecf0cb;
		  font-size: 30px;
        font-family: '8BIT WONDER', sans-serif;
        border-radius: 5px;
        padding: 10px 10px;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box">
    	<div id="pika" class="pika">
        <img src="https://cdn.discordapp.com/attachments/881417596199649350/944178268037324870/pngfind.com-pikachu-png-transparent-3588113.png" alt="pokemon1" width="240" height="200">
      </div>
      <div class=levelpika>
        <P>LV.25</P>
      </div>
      <div class=hppika>
        <p>HP 43&nbsp/ 43</p>
      </div>
      <div class="namepika">
        <p>PIKACHU</p>
      </div>
      <div class="pikafloor"></div>
      <div class="pikafloor2"></div>
      <div class="pikasquare"></div>
      <div class="pikasquare1"></div>
      <div class="hppikasq"></div>
      <div class="senikame">
        <img src="https://media.discordapp.net/attachments/881417596199649350/944174241161547786/pngegg.png" alt="senikame" width="275" height="300">
      </div>
      <div class=levelseni>
        <P>LV.23</P>
      </div>
      <div class=hpseni>
        <p>HP 56&nbsp/ 56</p>
      </div>
      <div class="nameseni">
        <p>SENIKAME</p>
      </div>
      <div class="senifloor"></div>
      <div class="senifloor2"></div>
      <div class="senisquare"></div>
      <div class="senisquare1"></div>
      <div class="square"></div>
      <div class="square1"></div>
      <div class="hpsenisq"></div>
      <div class="hppika3"></div>
      <div class="hpseni3"></div>
		
		<div class="tackle2">
        <button  class="button1" onclick="tackelani()">Tackle</button>
      </div>
      
      <div class="backg" >
        <button  onclick="changebg()" class="bg">Background</button>
        <audio id="pikapika" src="https://play.pokemonshowdown.com/audio/cries/pikachu-starter.mp3"></audio>
      </div>
		 <div class = "event_key">
           <button  onclick="recorder(261.63)"> Do</button>&nbsp
           <button  onclick="recorder(293.66)"> Re</button>&nbsp
           <button  onclick="recorder(329.63)"> Mi</button>&nbsp
           <button  onclick="recorder(349.23)"> Fa</button>
      </div>
      <div class = "event_key2">
           <button  onclick="recorder(392.00)"> So</button>&nbsp
        
           <button  onclick="recorder(440)"> La</button>&nbsp
           <button  onclick="recorder(493.88)">Ti</button>&nbsp
           <button  onclick="recorder(523.25)">Do</button>
      </div>
      
    </div>
	<script>
      function changebg() {
        		var imgCount = 3;
        		var randomCount = (Math.floor(Math.random() * imgCount));
        		var images = ['https://cdn.discordapp.com/attachments/881417596199649350/944636114503860294/d83m36e-3b58ca48-fe8a-456e-9ffc-a5a84eca6613.png'
                          , 'https://images-ext-1.discordapp.net/external/Cyins7V7Th-Bd_fFVr2Ux49abTdZmFaKjAcUlfRYSMw/https/cutewallpaper.org/21/water-pokemon-background/Image-result-for-pokemon-water-background-in-2019-Water-.png?width=720&height=423'
                          , 'https://images-ext-2.discordapp.net/external/rOUqhVPWiQpAGCs73XSzeseemAQQYlpo8MP_ux-Bc6g/%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzJmYjI4MjFhLTE0MDYtNGExZC05YjA0LTY2NjhmMjc4ZTk0NFwvZDgzdTFiaC04NmNhMTE3ZC04MzVlLTQ1NWQtYjlhZC0xMDhiYTFlNjBmODAucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.j8yvsWVPhx9gK8QnaO6ezpN8FN4c4v1oZK3YOJYigDo/https/images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2fb2821a-1406-4a1d-9b04-6668f278e944/d83u1bh-86ca117d-835e-455d-b9ad-108ba1e60f80.png?width=720&height=432'];
        document.getElementById('box').setAttribute("style", "background: url(" + images[randomCount] + ");background-repeat: no-repeat;background-size: 1000px 700px");
        		pikapika.play();
}
     function growl() {
			growl.play();
     }
     function tackelani() {
			document.getElementById('pika').classList.add('tackle');
       	setTimeout(function() {
    			document.getElementById("pika").classList.remove('tackle');
         	}, 1000)
     }
let isStart = 0;
    audio = new(window.AudioContext || window.webkitAudioContext)()
    osci = audio.createOscillator()
    gain = audio.createGain()
    osci.connect(gain)
    gain.connect(audio.destination)
    
    function startSound() {
		if (isStart == 0) {
			osci.start();
         isStart = 1;
      }
      else {
			gain.gain.value = 1;
      }
    }
    
    function recorder(f) {
		console.log(f)
      let time = audio.currentTime
      let note_osci = audio.createOscillator()
      let note_gain = audio.createGain()
      note_osci.connect(note_gain)
      note_gain.connect(audio.destination)
      note_osci.frequency.value = f
      note_osci.start()
      note_gain.gain.setValueCurveAtTime([1,0], audio.currentTime, 0.08)
    }
    
    document.body.onkeydown = function(event) {
      console.log(event)
		let key = event.key
   	
    }
	</script>
  </body>
</html>