เสร็จเเล้วฮะ
✨ CHATCHANON KEAWSUKKHO
<html> <head> <style> :root{ --w:20vw; --h:20vh; } body{ font-size:0; margin:0; } #wrap div{ width:var(--w); height:var(--h); display:inline-block; } #wrap div:nth-child(even){ background:#ffe; } #wrap div:nth-child(odd){ background:#ddc; } /* แก้โค๊ดใต้นี้ */ div.char{ width:var(--w); height:var(--h); background-image:url('http://i.imgur.com/bB2QuTT.gif'); background-size: 50% 100%; background-repeat:no-repeat; background-position:50%; position:fixed; top:var(--y, 0); left:var(--x, 0); transition: all 0.1s; } *[x="0"]{ --x: calc(0 * 20%); } *[x="1"]{ --x: calc(1 * 20%); } *[x="2"]{ --x: calc(2 * 20%); } *[x="3"]{ --x: calc(3 * 20%); } *[x="4"]{ --x: calc(4 * 20%); } *[y="0"]{ --y: calc(0 * 20%); } *[y="1"]{ --y: calc(1 * 20%); } *[y="2"]{ --y: calc(2 * 20%); } *[y="3"]{ --y: calc(3 * 20%); } *[y="4"]{ --y: calc(4 * 20%); } </style> </head> <body> <!-- == Exercise 6 == 1. ทุกๆ 1 วินาที จะมีการเปลี่ยนค่าของ char โดยค่านั้นจะระบุตำแหน่งบนหน้าจอ (โปรดอ่าน JS ที่เขียนไว้และทำความเข้าใจ) 2. ให้ตัวละคร (char) เลื่อนไปมาในหน้าจอ ตามที่ js สั่ง 3. สังเกต css ที่สั่ง char เพื่อทำความเข้าใจ css ให้มากขึ้น โดยใส่เพิ่มเติมที่ไม่ได้ระบุไว้ 4. ได้มีการประกาศตัวแปร css ไว้ จะใช้หรือไม่ใช้ก็ได้ Tips: ทำตัวละครให้ติดก่อน แล้วค่อยทำให้ขยับได้ เนื่องจากมี JS ขอให้ save แล้วเปิดเต็มหน้าจอเอา (ปุ่มด้านบนขวามืออันแรก) เพื่อดูผลลัพธ์เหมือนตอนทำเว็บจริงๆ นะคะ --> <!-- ห้ามแก้ HTML --> <div id="wrap"> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div class="char"> </div> <script> // ห้ามแก้ JS setInterval(function(){ x = Math.floor(Math.random() * 5); y = Math.floor(Math.random() * 5); document.querySelector('.char').setAttribute('x',x); document.querySelector('.char').setAttribute('y',y); } ,1000) </script> </body> </html>