More Related Content Similar to Java script เบื้องต้น (20) Java script เบื้องต้น2. ตัวแปรของจาวาสคริปต์
ในขั้นตอนของการพัฒนาโปรแกรมจะต้องมีการดาเนินการกับข้อมูล ซึ่งนักพัฒนา จาเป็นที่จะต้องทราบถึงหลักการและวิธีการของภาษานั้นๆ จาวาสคริปต์เป้ฯภาษที่ใช้ตัว แปรแบบ ไดนามิกกล่าวคือ เป็นภาษาที่สามารถเปลี่ยนชนิดของตัวแปรได้แบบด้วย ตัวเองเพื่อเพิ่มความยืดหยุ่นในการทางาน โดยปกติแล้วในการเขียนเกม เราจะใช้ตัวแปรที่ สาคัญ ได้แก่ ตัวแปรชนิดจานวนเต็ม (Integer) ตัวแปรชนิดทศนิยม (Float),ตัว แปรชนิดข้อความ (String), ตัวแปรชนิด Boolean, ตัวแปรแบบอาร์เรย์ (Array) และตัวแปรชนิดออปเจ็กต์(Object) 3. ตัวแปรของจาวาสคริปต์
เราสามารถประกาตัวแปรด้วยคาสั่ง
varชื่อของตัวแปร=ค่าของตัวแปร;
ข้อกำหนดในกำรตั้งชื่อตัวแปรของจำวำสคริปต์
1. อักษรแรกของชื่อตัวแปรจะต้องขึ้น_หรือตัวอักษรภาษาอังกฤษ หรือเครื่องหมาย $
2. ในกรณีที่ถ้าหากขึ้นต้นด้วยตัวเลขจะต้องมีตัวอักษรภาอังกฤษแทรกอยู่ในชื่อตัวแปร
3. ไม่ซ้ากับคาสงวน (Reversed word) ในภาษาจาวาสคริปต์ เช่น คาว่า function, var
หรือ return
4.ไม่มีการเว้นวรรคช่องว่างในชื่อตัวแปร
5.จาวาสคริปต์เป็นภาแบบ Case Sensitive ตัวอักษรพิมพ์เล็ก-ใหญ่ มีความหมายแตกต่าง กัน 4. ดังตัวอย่างการประกาตัวแปร
(game5-13.html)
<html>
<head><meta charset="utf-8">
<title> game5-13 </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
varx = 1.1;
alert(x);
document.write(x);
</script>
</body>
</html>
เมื่อเราต้องการดูค่าตัวแปร เราสามารถใช้คาสั่ง alert() 5. ตัวอย่างตัวแปรชนิดจานวนเต็ม (Integer)
(game5-14.html)
<html>
<head><meta charset="utf-8">
<title> game5-13 </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
vara=100;
varb=100;
varc=a+b;
alert(c);
</script>
</body>
</html>
ในกรณีที่ไม่ชอบการแสดงผลแบบแจ้งเตือน เราสามารถช้าสั่ง white ในการแสดงผลตัวแปรได้ เช่น document.write(x); หรือ document.writ(“Value x is”+x); 6. ตัวแปรชนิดทศนิยม (Float)
(game5-15.html)
<html>
<head><meta charset="utf-8">
<title> Game4-8 </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
vara = 1.01;
varb = 1.5;
varc=a+b;
alert(c);
</script>
</body>
</html> 7. ตัวแปรชนิดข้อความ(String)
(game5-16.html)
<html>
<head><meta charset="utf-8">
<title> Game4-8 </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
vara = "HTML5";
varb = " JavaScript";
varc=a+b;
alert(c);
</script>
</body>
</html> 8. ตัวแปรชนิด Boolean
ชนิดของตัวแปรที่สามารถเก็บค่าตรรกะจริง (True) หรือเท็จ (False)
(game5-17.html)
<html>
<head><meta charset="utf-8">
<title> game5-17 </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
vara = true;
varb = false;
alert("a : "+a+" , b : "+b);
</script>
</body>
</html> 9. ตัวแปรแบบอาร์เรย์ (Array)
ในการเขียนเกม เราอาจจะต้องเก็บชุดลาดับของคีย์เฟรม (Key Frame) เอาไว้ใน รูปแบบของตัวแปรชนิดอาร์เรย์ ซึ่งเป็นโครงสร้างพื้นฐานของการเก็บข้อมูล การเข้าถึง ข้อมูลที่เก็บไว้ เราจะใช้ ดัชนี หรือ Index เป็นตัวอ้างอิงข้อมูล จาวาสคริปต์จะเริ่มจาก Index ที่ 0ดังตัวอย่างต่อไปนี้ 10. ตัวแปรแบบอาร์เรย์ (Array)
(game5-18.html)
<html>
<head><meta charset="utf-8">
<title> game5-18</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
vararray_a=new Array();
array_a[0] = 10;
array_a[1] = 20;
alert(array_a);
</script>
</body>
</html> 12. ตัวแปรชนิดออปเจ็กต์(Object)
(game5-19.html)
<html>
<head><meta charset="utf-8">
<title> game5-19</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
varposition={x:10, y:50};
alert(position.x+", "+position.y);
</script>
</body>
</html> 13. คาสั่ง prompt()
เป็นคาสั่งที่ช่วยรับอินพุตและใส่ค่าให้ตัวแปร เพื่อความสะดวกในการทดสอบ โปรแกรมดังตัวอย่างนี้
(game5-20.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>prompt command</title>
</head>
<body>
<script type="text/javascript">
varinputString= prompt("What's your name?","putyour name here");
alert("Your name is :"+inputString);
</script>
</body>
</html> 15. ตัวอย่างการใช้งาน
(game5-21.html)
<body>
<p></p>
<script type="text/javascript">
varnow = new Date();
document.write("Today is "+now.getDate()+"<br>");
document.write("Today is "+now.getDay()+"<br>");
document.write("Today is "+now.getTime()+"<br>");
document.write("Today is "+now.getFullYear()+"<br>");
</script>
</body>
</html> 16. ประโยคคาสั่งแบบมีเงื่อนไข (If Condition- Statement)
เมื่อเราทาการเขียนโปรแกรมที่ต้องการแสดงผลตามเงื่อนไขที่แตกต่างกัน เราสามารถใช้การเขียน คาสั่งแบบมีเงื่อนไขเพื่อใช้ในการตัดสินใจได้ ซึ่งสามารถแบ่งออกเป็น 4ประเภท ได้แก่
1. If statement เป็นคาสั่งที่จะทางานต่อเมื่อประโยคเงื่อนไขเป็นจริง (true) แล้วโปรแกรมจะทา ตามคาสั่ง
2. If-else statement เป็นคาสั่งที่จะทางานก็ต่อเมื่อประโยคเงื่อนไขเป็นจริง (true) แล้วโปรแกรมจะ ทาตามคาสั่งแรก ถ้าประโยคเงื่อนไขเป็นเท็จโปรแกรมจะทาตามคาสั่งที่สอง
3. Nested-if เป็นคาสั่งที่ใช้สาหรับเงื่อนไขที่มีหลายกรณี เช่น การตัดลาดับเกรดตามคะแนนที่ได้
4. Switch statement ในกรณีที่เงื่อนไขมีหลายกรณี เราอาจใช้ Switch statement เข้าช่วย ซึ่งทา ให้โปรแกรมเราอ่านง่ายยิ่งขึ้น 17. If statement
(game5-22.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>X=10 , Y=5, If X > Y then X-Y </p>
<button onclick="myFunction()">Run</button>
<p id="myParagraph"></p>
<script>
function myFunction()
{
varx=10;
vary=5;
varz;
if (x>y){
z=x-y;
}
document.getElementById("myParagraph").innerHTML=z;
}
</script>
</body>
</html> 18. If-else statement
(game5-23.html)
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="input">65 </p>
<button onclick="myFunction()">Run</button>
<p id="myParagraph"></p>
<script>
function myFunction()
{
varage=65;
varz;
if (age>=60){
z="You are older";
}else{
z="You are younger";
}
document.getElementById("myParagraph").innerHTML=z;
}
</script>
</body>
</html> 19. Nested-if
(game5-24.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="input">55 </p>
<button onclick="myFunction()">Run</button>
<p id="myParagraph"></p>
<script>
function myFunction()
{
varscore=55;
vargrade;
if (score>=80){
grade="A";
}else if(score>=75){
grade="B+";
}else if(score>=70){
grade="B+";
}else if(score>=65){
grade="C+";
}else if(score>=60){
grade="C";
}else if(score>=55){
grade="D+";
}else if(score>=50){
grade="D";
}else{
grade="F";
}
document.getElementById("myParagraph").innerHTML=grade;
}
</script>
</body>
</html> 20. Switch statement
(game5-25.html)
<html>
<body>
<script type="text/javascript">
varx;
vard=new Date().getDay();
switch (d)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
default:
x="Looking forward to the Weekend";
}
alert(x);
</script>
</body>
</html> 21. การวนซ้าการทางาน (Loop)
การวนซ้าการทางานหรือลูป (Loop) เป็นเครื่องมือที่สามารถวนการทางานของโปรแกรมด้วยโค้ด ชุดเดิมตามรอบ หรือเงื่อนไขที่เรากาหนด ซึ่งในการทาเกมในหนังสือเล่มนี้นั้น เราจะใช้เพียงคาสั่ง for และ while เท่านั้น
1.การวนซ้าการทางานด้วยคาสั่ง For คาสั่ง For เป็นการวนลูปการทางานตามเงื่อนไขที่ยังเป็น จริง โดยเริ่มต้นจาค่าแรก (Initial-Value) โดยจะตรวจสอบว่าเงื่อนไขยังเป็นจริงอยู่หรือไม่ โดย เปรียบเทียบกับเงื่อนไข (Condition) ถ้าเป็นจริงจะทางานภายในลูป หลังจากนั้นจะทาการเปลี่ยนแปลงา ตัวแปรตาขั้น (Step)
For (varIntitial-value;Condition;Step){ statement1; … } 22. การวนซ้าการทางานด้วยคาสั่ง For
(game5-26.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Click</button>
<p id="myParagraph"></p>
<script type="text/javascript">
function myFunction(){
varx="";
for (vari=0;i<5;i++){
x=x + "<p>The number is " + i+ "</p>";
}
document.getElementById("myParagraph").innerHTML=x;
}
</script>
</body>
</html> 23. การวนซ้าการทางานด้วยคาสั่ง while
2. การวนซ้าการทางานด้วยคาสั่ง while เป็นคาสั่งวนการทางาน ซึ่งจะทางาน ต่อเนื่องกันไปจนกว่าเงื่อนไขจะเป็นเท็จ โยเราจะต้องทาการปรับเปลี่ยนค่าของตัวแปรที่ใช้ ตรวจสอบเงื่อนไข (Condition) มิฉะนั้นโปรแกรมจะทางานแบบอนันต์ (อินฟินิตี้)
While(Condition){
statement1;
} 24. การวนซ้าการทางานด้วยคาสั่ง while
(game5-27.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<button onclick="myFunction()">Click</button>
<p id="myParagraph"></p>
<script type="text/javascript">
function myFunction()
{varx="",i=0;
while (i<5){
x=x + "<p>The number is " + i+ "</p>";
i++;
}
document.getElementById("myParagraph").innerHTML=x;
}
</script>
</body>
</html> 25. ตัวดาเนินการของจาวาสคริปต์ (Arithmetic Operators)
ตัวดาเนินการ
คาอธิบาย
ตัวอย่าง
ผลลัพธ์ x
ค่าของ y
+
บวก
x=y+2
7
5
-
ลบ
x=y-2
3
5
*
คูณ
x=y*2
10
5
/
หาร
x=y/2
2.5
5
%
โมดูเลชั่น(หารเอาเศษ)
x=y%2
1
5
++
เพิ่มค่าที่ละ 1
x=++y
6
6
x=y++
5
6
--
ลดค่าที่ละ 1
x=--y
4
4
x=y--
5
4 26. ตัวอย่างการใช้ตัวดาเนินการของจาวาสคริปต์
(game5-28.html)
<body>
i= 4
<p id="myParagraph1">++i</p>
<p id="myParagraph2">--i</p>
<p id="myParagraph3">i+=1</p>
<p id="myParagraph4">i*=2 </p>
<p id="myParagraph5">6/3</p>
<p id="myParagraph6">9%2</p>
<button onclick="myFunction()"> Run</button>
<script>
function myFunction()
{
vari=4;
document.getElementById("myParagraph1").innerHTML="++i= "+(++i);
document.getElementById("myParagraph2").innerHTML="--i= "+(--i);
document.getElementById("myParagraph3").innerHTML="i+=1 ="+(i+=1) ;
document.getElementById("myParagraph4").innerHTML="i*=2 = "+(i*=2) ;
document.getElementById("myParagraph5").innerHTML="6/3 = "+(6/3);
document.getElementById("myParagraph6").innerHTML="9%2 = "+(9%2);
}
</script>
</body> 27. การเปรียบเทียบค่า
กาหนดให้ x มีค่าเท่ากับ 5
ตัวแปร
คาอธิบาย
การเปรียบเทียบ
ผลลัพธ์
==
เท่ากับ
x==8
FALSE
x==5
TRUE
===
เท่ากับ (ค่าและชนิดของตัวแปร)
x===”5”
FALSE
x===5
TRUE
!=
ไม่เท่ากับ
x!=8
TRUE
!==
ไม่เท่ากับ (ค่าและชนิดของตัวแปร)
x!==”5”
TRUE
x!==5
FALSE
>
มากกว่า
x>8
FALSE
<
น้อยกว่า
x<8
TRUE
>==
มากกว่าเท่ากับ
x>=8
FALSE
<==
น้อยกว่าเท่ากับ
x<=8
TRUE 28. ตัวอย่างการใช้การเปรียบเทียบค่า
(game5-29.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<p>a = 10, b=5, c=15</p>
<p id="myID1"></p>
<p id="myID2"></p>
<script type="text/javascript">
vara = 10;
varb = 5;
varc= 15;
vard;
vare;
if (a>=b){
d="a is more than b";
}
if (a<=c){
e="a is less than c";
}
document.getElementById("myID1").innerHTML= d;
document.getElementById("myID2").innerHTML=e;
</script>
</body>
</html> 31. เมธอดทางคณิตศาสตร์ที่สาคัญ
เมธอด Math.floor()
เป็นคาสั่งที่ใช้สาหรับการปัดเศษลง เช่น Math.floor(1.2)=1,Math.floor(1.6)=1 เป็นต้น
(game5-31.html)
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph1">Floor(1.2)</p>
<p id="myParagraph2">Floor(1.5)</p>
<p id="myParagraph3">Floor(-1.1)</p>
<p id="myParagraph4">Floor(-1.5)</p>
<button onclick="myFunction()"> Run</button>
<script>
function myFunction()
{
vara=Math.floor(1.2);
varb=Math.floor(1.5);
varc=Math.floor(-1.1);
vard=Math.floor(-1.5);
document.getElementById("myParagraph1").innerHTML="Floor(1.2) = "+a ;
document.getElementById("myParagraph2").innerHTML="Floor(1.5) = "+b;
document.getElementById("myParagraph3").innerHTML="Floor(-1.1) = "+c ;
document.getElementById("myParagraph4").innerHTML="Floor(-1.5) = "+d ;
}
</script>
</body>
</html> 32. เมธอด Math.round()
เป็นคาสั่งที่ใช้สาหรับการปัดเศษตามทศนิยม ถ้าทศนิยมน้อยกว่า 5 จะปัดเศษลง แต่ถ้ามากกว่า หรือเท่ากับ 5 จะปัดเศษขึ้น เช่น Math.round(1.4)=1, Math.round(1.5)=2 เป็นต้น
(game5-32.html)
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph1">Round(1.2)</p>
<p id="myParagraph2">Round(1.5)</p>
<p id="myParagraph3">Round(-1.1)</p>
<p id="myParagraph4">Round(-1.5)</p>
<button onclick="myFunction()"> Run</button>
<script>
function myFunction()
{
vara=Math.round(1.2);
varb=Math.round(1.5);
varc=Math.round(-1.1);
vard=Math.round(-1.5);
document.getElementById("myParagraph1").innerHTML="Round(1.2) = "+a ;
document.getElementById("myParagraph2").innerHTML="Round(1.5) = "+b;
document.getElementById("myParagraph3").innerHTML="Round(-1.1) = "+c ;
document.getElementById("myParagraph4").innerHTML="Round(-1.5) = "+d ;
}
</script>
</body>
</html> 33. เมธอด
เมธอด Math.rondom() เป็นคาสั่งหาสุ่มค่า เช่น ระหว่าง 0 ถึง 1
เมธอด Math.sqrt() เป็นคาสั่งหาค่า square root เช่น Math.sqrt(4)=2, Math.sqrt(3)=1.732 เป็นต้น
(game5-33.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<p id="myParagraph1">Math.random()</p>
<p id="myParagraph2">Random จานวน ระหว่าง 1ถึง 10</p>
<p id="myParagraph3">Random จานวน ระหว่าง 6ถึง 10</p>
<p id="myParagraph4">Square root of 4 </p>
<p id="myParagraph5">Square root of 3 </p>
<button onclick="myFunction()"> Run</button>
<script>
function myFunction()
{
vara=Math.random();
varb=Math.floor((Math.random()*10))+1;
varc=Math.floor((Math.random()*5))+6;
vard=Math.sqrt(4);
vare=Math.sqrt(3);
document.getElementById("myParagraph1").innerHTML="Math.random() = "+a ;
document.getElementById("myParagraph2").innerHTML="Random จานวน ระหว่าง 1ถึง 10 = "+b;
document.getElementById("myParagraph3").innerHTML="Random จานวน ระหว่าง 6ถึง 10 = "+c ;
document.getElementById("myParagraph4").innerHTML="Square root of 4 = "+d ;
document.getElementById("myParagraph5").innerHTML="Square root of 3 = "+e ;
}
</script>
</body>
</html> 34. การเขียนฟังก์ชั่น (Function)
ในการคานวณหรือวาดรูปซ้าๆ เราสามารถลดการเขียนโค้ดให้สั้นลงด้วยการเขียน ฟังก์ชั่นการทางาน เช่น ฟังก์ชั่นการวาดฉากหลัง ฟังก์ชั่นการวาดตัวละครหลัก แล้วทากร เรียกใช้เมื่อเราต้องการ
จาวาสคริปต์จะแตกต่างกับการเขียนฟังก์ชั่นในภาษาอื่น ตรงที่นักพัฒนาไม่ต้องระบุ ว่า จะ Return ค่าเป็นตัวแปรชนิดอะไร ทั้งนี้ก็เพื่อความคล่องตัวในการเขียนโค้ด แต่ ในทางกลับกันผู้เขียนควรระวังในการใช้งาน เพราะเราต้องทราบชนิดของตัวแปรด้วย ตนเอง 35. Function ไม่มีการ Return
Function ไม่มีการ Return ค่า เช่น ฟังก์ชั่นการแสดงข้อความเตือน
(game5-34.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<script type="text/javascript">
printHello();
function printHello(){
alert("Hello");
}
</script>
</body>
</html> 36. Function มีการ Return
Function มีการ Return เช่น ฟังก์ชั่นการหาผลคูณ
(game5-35.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<p id="myParagraph"></p>
<script type="text/javascript">
document.getElementById("myParagraph").innerHTML=myFunction(4,3);
function myFunction(a,b)
{
return a*b;
}
</script>
</body>
</html> 37. การเขียนฟังก์ชั่นสาหรับเปลี่ยนรูป (Swapping Images)
สามารถใช้ภาษาจาวาสคริปต์เปลี่ยน หรือสลับรูปบนเว็บเพจของเรา ในตัวอย่างนี้จะ เป็นรูปหลอดไปสองสถานะ คือ เปิดและปิด เมื่อผู้ใช้งานเอาเมาส์วางไว้ที่รูปฟังก์ชั่น swappingImageจะเริ่มการทางานโดยจะทาการสลับรูปจากปิดเปิดไฟ และเมื่อเราลาก เมาส์ออกจากบริเวณรูปฟังก์ชั่น initialImageจะทางานโดยการเปลี่ยนรูปกลับไปยัง สถานะเริ่มต้น 38. (Swapping Images)
(game5-36.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<p></p>
<body>
<imgid="myPic" src="light1.png" onMouseOver="swappingImage()" onMouseOut="initialImage()" width="50" height="100">
<script>
varpic=document.getElementById("myPic");
function swappingImage(){
pic.src="light2.png";
}
function initialImage(){
pic.src="light1.png";
}
</script>
</body>
</html> 39. การใช้ Pre-loading ของ Image
การใช้ Image Pre-loadingซึ่งประกอบด้วย 2 ขั้นตอน ดังนี้
ขั้นตอนที่ 1 การประกาศวัตถุให้เบราเซอร์ทราบ (create image object) ด้วยคาสั่ง
varชื่อตัวแปรรูป=new Image();
var= ชื่อตัวแปรรูป = new Image(ความกว้างของรูป, ความสูงของรูป);
เบราเซอร์จะทาการเตรียมหน่วยความจาสาหรับแสดงผลด้วยขนาดของความกว้างและความสูงของรูปที่ระบุ
ขั้นตอนที่ 2 อ้างอิงที่อยู่ของรูปภาพที่เราต้องการใช้
ชื่อตัวแปรรูป.src=”ไฟล์รูป”; 40. Pre-loading ของ Image
(game5-37.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<p></p>
<body>
<imgid="myPic" src="light1.png" onMouseOver="swappingImage()" onMouseOut="initialImage()" width="50" height="100">
<script>
varpic=document.getElementById("myPic");
varimg= new Image();
img.src="light2.png";
function swappingImage(){
pic.src=img.src;
}
function initialImage(){
pic.src="light1.png";
}
</script>
</body>
</html> 41. การเก็บข้อมูล (Storage Data)
HTML5 สามารถเก็บข้อมูลไว้ที่เครื่องของผู้ใช้งานได้ที่เบราเซอร์ของผู้ใช้งานผ่าน localstorageและ sessionStorageซึ่งมีข้อแตกต่างดังนี้ localstorageสามารถเก็บ ข้อมูลไว้ตลอดไม่มีวันหมดอายุแม้จะปิดเบราเซอร์ไปแล้ว ซึ่งเราสามารถอ้างอิงตัวแปร ชนิดนี้ได้ด้วยการพิมพ์ localStroageตัวแปร 42. การเก็บข้อมูล (Storage Data)
(game5-38.html)
<html>
<head><meta charset="utf-8">
<script>
function clickSetCounter()
{
localStorage.clickcount=0;
}
function clickCounter()
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount+ " time(s).";
}
</script>
</head>
<body>
<p><button onclick="clickSetCounter()" type="button">Set localStrorageto 0</button></p>
<p><button onclick="clickCounter()" type="button">Increasing value</button></p>
<p id="result"></p>
</body>
</html> 43. การเก็บข้อมูล (Storage Data)
ในส่วนของตัวแปรรูปแบบ sessionStorageจะสามารถเก็บข้อมูลได้จนกว่าผู้ใช้งานจะปิดเบราเซอร์เท่านั้น เราสามารถ เรียกใช้ตัวแปรชนิดนี้ได้โดยการพิมพ์ sessionStorage.ตัวแปร
(game5-39.html)
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script>
function clickSetCounter()
{
sessionStorage.clickcount=0;
}
function clickCounter()
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount+ " time(s).";
}
</script>
</head>
<body>
<p><button onclick="clickSetCounter()" type="button">Set localStrorageto 0</button></p>
<p><button onclick="clickCounter()" type="button">Increasing value</button></p>
<p id="result"></p>
</body>
</html> 44. การเปลี่ยนหน้าเว็บเพจ(Redirecting visitors to other pages)
ถ้าการพัฒนาเกมประกอบด้วยหลายเว็บเพจ(หลายไฟล์) โดยแต่ละหน้าแสดงส่วน ต่างๆ ของเกม เช่น หน้าเมนู หน้าวิธีการเล่น หน้าตัวเกม ฯลฯ โดยปกติแล้ว เราสามารถ เปลี่ยนเพจได้ด้วยปุ่มกด แต่บางครั้งเราก็จาเป็นต้องเปลี่ยนหน้าเพจโดยอัตโนมัติด้วยการ ทา redirecting ด้วยคาสั่ง window.localtion=”หน้าเพลที่ต้องการ.html” 45. การเปลี่ยนหน้าเว็บเพจ(Redirecting visitors to other pages)
(game5-40.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Redirecting</title>
</head>
<body>
<script type="text/javascript">
alert("Redirect to game5-1.html");
window.location= "game5-1.html";
</script>
</body>
</html> 47. Timing Events
ภาษาจาวาสคริปต์สามารถสั่งการทางานด้วยการกาหนดเวลาให้ Execute ฟังก์ชั่นผ่านเมธอดที่ สาคัญสองตัว ได้แก่
Setlnterval()-executes ฟังก์ชั่นแบบวนซ้ำตำมเวลำที่กำหนด
setInterval(“ฟังก์ชั่นที่ต้องการเรียกใช้”,เวลาหน่วยมิลลิวินาที);
setTimeout()-executes ฟังก์ชั่นทำนหลังจำกเวลำที่กำหนด
setTimeout(“ฟังก์ชั่นที่ต้องการเรียกใช้”,เวลาหน่วยมิลลิวินาที); 48. Timing Events
สามารถยกเลิกการทางานของฟังก์ชั่นด้วยคาสั่ง clearInterval() และ clearTimeout()
(game5-42.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<script type="text/javascript">
vartiming =setInterval(printHello,1000);//ทางานทุก 1วินาทีโดยการเรียกใช้ฟังก์ชันprintHello
varamount=0;
function printHello(){
alert("Hello : round : "+amount);
amount+=1; //ทุกรอบของการแสดงผล ค่า amount จะเพิ่มที่ละ 1
if (amount==4){// ถ้า amount มีค่าเท่ากับ 4
clearInterval(timing);//ยกเลิกการวนซ้า
}
}
</script>
</body>
</html> 49. Timing Events
(game5-43.html)
<html><meta charset="utf-8">
<body>
<p>เมื่อคลิกปุ่ม เริ่ม ผ่านไป 3วินาที บราวเซอร์จะ Alert "Hello"</p>
<p>เมื่อคลิกปุ่ม หยุด บราวเซอร์จะยกเลิกการคาสั่ง Alert </p>
<button onclick="setTimeoutFunction()">เริ่ม</button>
<button onclick="clearTimeoutFunction()">หยุด</button>
<script type="text/javascript">
function setTimeoutFunction()
{
timing = setTimeout(function(){alert("Hello")},3000);
}
function clearTimeoutFunction()
{
clearTimeout(timing);
}
</script>
</body>
</html> 50. การจัดเก็บไฟล์ไว้ตามหมวดหมู่
ไฟล์ที่ใช้สร้างเกมประกอบด้วยหลายประเภท เช่น ภาพ เสียง HTML จาวสคริปต์ ดั้ง นั้น เราจึงจาเป็นต้องมีการเก็บไฟล์ที่เป็นระบบเพื่อง่ายต่อการแก้อ้างอิง โดยเราจะเก็บ ไฟล์นามสกุล html ไว้ภายนอกสุดของโฟลเดอร์ และจัดเก็บไฟล์รูปภาพไว้ในโฟลเดอร์ชื่อ images ส่วนไฟล์เสียงจัดเก็บไว้ในโฟลเดอร์ sounds ส่วนที่เป็นภาษาจาวาสคริปต์ให้ จัดเก็บไว้ในโฟลเดอร์ชื่อ jsเพื่อง่ายต่อการเรียกใช้ ดังรูป