ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

 

    HTML หรือ Hyper Text Markup Language คือ ภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลบน WebSite ส่วนมากใช้ในการจัดแต่งหน้า Website บทความนี้จะกล่าวถึงการสร้างเกมควบคุมกล่องสี่เหลี่ยม โดยเราจะทำปุ่มเลือนขึ้น, ลง, ซ้าย, ขวา โดยเขียนฟังก์ชั่นควบคุมการทำงานแต่ละปุ่มแยกส่วนเอาไว้ตามทิศทางที่กำหนด สร้าง Properties  ใน Component 2 ตัว คือ speedX และ speedY โดยเพิ่มฟังก์ชั่นใน Component ชื่อ newPos() มี Properties 2 ตัว  speedX และ speedY  เพื่อเปลี่ยนตำแหน่งของ  Component   ฟังก์ชัน newPos() ถูกเรียกจากฟังก์ชัน updateGameArea ก่อนที่จะวาด Component  (สี่เหลี่ยมสีแดง) และเมื่อปล่อยปุ่มสี่เหลี่ยมสีแดงจะหยุด ให้เพิ่มฟังก์ชั่นชื่อ clearmove และกำหนดความเร็วเป็น 0 

 

ตัวอย่างโค้ด 

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d2d2d2;
    background-color: #ffff;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;

function startGame() {
    myGamePiece = new component(40, 40, "green", 210, 210);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 500;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY = -1; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">ขึ้น</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">ซ้าย</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">ขวา</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">ลง</button>
</div>


</body>
</html>

 

ผลลัพธ์

 

ก่อนกดปุ่ม

ผลลัพธ์
ผลลัพธ์

 

หลังกดปุ่ม1

 

ผลลัพธ์
ผลลัพธ์

อ้างอิง : w3schools 

 

ข่าวสารเพิ่มเติมเกี่ยวกับ HTML

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แสดงไอพีตัวหลังเป็น xx
โดย bankbonkbank พฤ 09 ส.ค. 2007 10:32 pm บอร์ด Programming - PHP
1
1285
ศ 10 ส.ค. 2007 6:49 am โดย mindphp
socket
โดย shutup พฤ 09 ส.ค. 2007 9:42 pm บอร์ด Programming - PHP
9
3095
ส 18 ส.ค. 2007 6:16 am โดย mindphp
การพิมแล้วขึ้นลิสให้เราเลือก กรุณาด้วยค่ะ
โดย moomawe พฤ 09 ส.ค. 2007 2:33 am บอร์ด Programming - PHP
7
2247
ส 18 ส.ค. 2007 9:28 am โดย Kobsoft
ผมอยากได้โค๊ดแสดงบทความล่าสุด
โดย ManFire พ 08 ส.ค. 2007 2:43 am บอร์ด Programming - PHP
1
1173
พ 08 ส.ค. 2007 3:53 am โดย mindphp
แสดงความกว้างเป็น...
โดย bankbonkbank พ 08 ส.ค. 2007 12:21 am บอร์ด Programming - PHP
11
2404
พ 08 ส.ค. 2007 10:44 am โดย Kobsoft
อยากทราบว่าWarning: Missing argument 7 เกิดจากอะไรบ้างค่ะ
โดย moomawe อ 07 ส.ค. 2007 11:53 pm บอร์ด Programming - PHP
2
1552
พ 08 ส.ค. 2007 1:11 am โดย moomawe
[u][b]อยากเขียน PHP เป็นแต่เวลามีไม่มากนัก ใครพอจะช่วยเหลือไ
โดย Macherie อ 07 ส.ค. 2007 11:50 pm บอร์ด Programming - PHP
1
1619
พ 08 ส.ค. 2007 10:59 am โดย Kobsoft
เขียน PHP ส่งเมลล์แบบ attach file แล้วภาพไม่มาต้องทำอย่างไรค
โดย tuay อ 07 ส.ค. 2007 7:12 pm บอร์ด Programming - PHP
3
2271
พ 08 ส.ค. 2007 12:48 am โดย mindphp
คือมีปัญหาเกี่ยวกับการล็อกอินน่ะครับ
โดย test6000 อ 07 ส.ค. 2007 8:17 am บอร์ด Programming - PHP
1
1236
อ 07 ส.ค. 2007 5:06 pm โดย mindphp
เว็บบอร์ด phpBB สามารถคัดการโพสไว้ก่อ่นได้รึเปล่าครับ
โดย mut อ 07 ส.ค. 2007 1:45 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
6
2803
พฤ 09 ส.ค. 2007 4:46 am โดย mut
อยากให้ค่า Id ให้กลับมาเป็น 1 ใหม่ ทำอย่างไรคัรบ
โดย chayaphol จ 06 ส.ค. 2007 5:12 am บอร์ด Programming - PHP
15
7218
พฤ 09 ส.ค. 2007 9:36 am โดย mindphp
......###.....มือใหม่จะทำโปรแกรมคำนวณค่างวดรถยนต์ ค่ะช่วยที
โดย smalldog007 ส 04 ส.ค. 2007 11:47 pm บอร์ด Programming - PHP
3
2970
อ 05 ส.ค. 2007 5:45 am โดย mindphp
ในMySQL จะแก้ไขให้File to import มากกว่า 2,048 ตรงไหน
โดย banana999 ส 04 ส.ค. 2007 1:57 pm บอร์ด SQL - Database
1
2737
ส 04 ส.ค. 2007 7:54 pm โดย mindphp
XAML = eXtensible Application Markup Language
โดย mindphp ส 04 ส.ค. 2007 7:35 am บอร์ด MindPHP News & Feedback
0
2236
ส 04 ส.ค. 2007 7:35 am โดย mindphp
ถามเรื่อง cookie คับ
โดย Kobsoft ศ 03 ส.ค. 2007 10:30 pm บอร์ด Programming - PHP
5
1605
อ 05 ส.ค. 2007 12:01 am โดย mindphp
ช่วยแก้ปัญหาหน่อยค่ะ
โดย kenjoy ศ 03 ส.ค. 2007 5:19 am บอร์ด Programming - PHP
7
1903
ศ 03 ส.ค. 2007 5:52 am โดย mindphp
กลับหน้าเดิมโดยมี get กลับมาด้วย
โดย bankbonkbank ศ 03 ส.ค. 2007 4:42 am บอร์ด Programming - PHP
4
1764
ส 04 ส.ค. 2007 3:21 pm โดย bankbonkbank
[b]ประกาศ ! รับสมัครงานตำแหน่งโปรแกรมเมอร์ ด่วนมาก !!!!!!!!!
โดย just20070 พฤ 02 ส.ค. 2007 11:14 pm บอร์ด MindPHP News & Feedback
1
3144
จ 14 ม.ค. 2008 8:55 pm โดย jetaped
เปิดหน้าใหม่เป็น pop-up
โดย ruti พฤ 02 ส.ค. 2007 8:06 pm บอร์ด Programming - PHP
3
2137
พฤ 02 ส.ค. 2007 10:45 pm โดย mindphp
ช่วยบอกวิธีลง MOD หน่อยนะครับ
โดย Pedbaa พฤ 02 ส.ค. 2007 1:42 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
54
11643
อ 26 ส.ค. 2007 5:02 am โดย mindphp