Hướng dẫn tạo game online (tự lập web riêng) đơn giản nhất
Khi kể tới phát triển các ứng dụng Game, bọn họ đều nghĩ ngay lập tức tới Android. Dẫu vậy có bao giờ bạn nghĩ rằng chưa đến HTML và JavaScript bạn cũng có thể phát triển ra hồ hết game dễ dàng hấp dẫn?Trước phía trên tôi cũng nghĩ là không cho tới lúc đọc được bài về game Tutorial bên trên HTML trò chơi Tutorial - w3schools.com mà lại tôi vẫn giới thiệu cho chính mình sau đây.
Bạn đang xem: Hướng dẫn tạo game online (tự lập web riêng) đơn giản nhất
1. Trò chơi HOME
Để mày mò về quy trình làm Game, trước hết tôi mời chúng ta chơi 1 trò chơi sau đây được làm bằng HTML để gia công quen cùng với HTML Games. Dưới đấy là hình ảnh của 1 trò chơi xây dựng bởi HTML.
Mô tả về game :
Như trong hình mẫu vẽ trên chúng ta có thể thấy có 3 một số loại vật thể : tập hợp các khối màu xanh tạo thành 1 mặt hàng rào, 1 chấm vuông màu đen và 1 thanh color đỏ.
Chấm black sẽ di chuyển từ dưới lên bên trên chạm vào khối màu xanh lá cây nào sẽ có tác dụng khối blue color đó biến đổi mất. Sau đó chấm đen này lại rơi xuống dưới theo hành trình lên xuống tự do không áp theo 1 quy phép tắc nào. Nhiệm vụ của khách hàng là phải di chuyển thanh red color (sang trái hoặc phải) để ngăn cản chấm màu sắc đen cấm đoán nó xúc tiếp với viền biên phía dưới. Nếu như bạn không chắn được chấm màu đen rơi xuống thì đang "Game over" - trò chơi kết thúc.
Trong quá trình chơi chúng ta cũng có thể tạm ngừng và tiếp tục sau đó.
Để tạo thành được 1 Game hoàn chỉnh của riêng bạn thì bạn sẽ cần nên học và tuân theo những ví dụ những phần dưới đây nữa.
2. Game Canvas
Thành phần HTML được hiển thị như 1 đối tượng người dùng hình chữ nhật trong trang web (đóng phương châm là trò chơi area - vùng không gian của game)
HTML Canvas
là thành phần hoàn hảo và tuyệt vời nhất để tạo nên game trong HTML.
hỗ trợ tất cả các công dụng mà bạn cần để chế tạo ra 1 trò chơi.
Sử dụng JavaScript nhằm vẽ, viết, chèn hình hình ảnh và nhiều không dừng lại ở đó nữa.
.getContext("2d")
Thành phần tất cả một đối tượng built-in (xây dựng mặt trong) được call là getContext("2d"), đối tượng người tiêu dùng này bao hàm các method (phương thức) và những property (thuộc tính) để vẽ.
Bạn tất cả thể tham khảo thêm về nguyên tố và đối tượng người dùng getContext("2d") làm việc trong nội dung bài viết về Canvas Tutorial này.
Get Started
Để tạo nên game trước hết cần tạo 1 không khí cho trò chơi :
function startGame() //Hàm startGame() call đến method start() của đối tượng người tiêu dùng myGameArea myGameArea.start();var myGameArea = canvas : document.createElement("canvas"), start : function() // khẳng định độ rộng lớn của vùng game this.canvas.width = 480; // xác định độ cao của vùng game this.canvas.height = 270; // nội dung phía bên trong của vùng không khí này là những gì được vẽ từ đối tượng người tiêu dùng getContext("2d") this.context = this.canvas.getContext("2d"); //Method start() tạo thành 1 canvas> và chèn nó như childnode trước tiên của body> document.body.insertBefore(this.canvas, document.body.childNodes<0>); Trong ví dụ như trên :
Đối tượng myGameArea sẽ có rất nhiều property cùng method được ra mắt sau trong bài bác này.
Hàm startGame() hotline đến method start() của đối tượng người dùng myGameArea.
Method start() tạo nên 1 thành phần với chèn nó như childnode trước tiên của thành phần .
Để nắm rõ hơn phần này chúng ta cũng có thể vào xem lấy ví dụ như sau : http://www.w3schools.com/games/tryit.asp?filename=trygame_canvas , ở đó chúng ta có thể thấy được buổi giao lưu của nó và tùy chỉnh cho canvas.
3. Game Components - những thành phần của Game
Trong phần này chúng ta sẽ tìm hiểu về phương pháp thêm yếu tắc vào trong vùng không gian game, các Frame của nó và cách tạo cho component đó gửi động, chuyển đổi kích khuôn khổ và màu sắc ....
Add a Component - Thêm component vào vùng Game
Tạo một component constructor (hàm chế tác - là hầu như hàm đặc biệt có thể chấp nhận được thực thi, tinh chỉnh và điều khiển chương trình ngay trong khi khởi chế tạo đối tượng), được cho phép bạn thêm các component vào vùng gamearea.
Trong lấy một ví dụ sau đây, đối tượng người dùng hàm tạo được gọi là component, với component trước tiên tạo ra vào vùng gamearea bọn họ gọi nó là myGamePiece :
// khai báo biến đổi cho componentvar myGamePiece;function startGame() //Hàm startGame() gọi đến method start() của đối tượng người tiêu dùng myGameArea myGameArea.start(); // khởi tạo ra component cùng set giá chỉ trị cho (độ rộng, chiều cao, màu, hoành độ x (khoảng cách của component cho tới biên trái của vùng game), tung độ y (khoảng bí quyết của component tới biên phía bên trên của vùng game)) // call tới hàm component dưới và gán giá trị cho các thuộc tính bằng những đối số truyền vào myGamePiece = new component(30, 30, "red", 10, 120);function component(width, height, color, x, y) this.width = width; this.height = height; this.x = x; this.y = y; ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height);Các component với trong mình nó rất nhiều thuộc tính và cách làm để tự kiểm soát sự xuất hiện và vận động của nó.
Đây là hình ảnh của 1 component dễ dàng được thêm vào bằng đoạn mã trên (khối vuông màu đỏ nằm trong vùng gamearea)
Bạn bao gồm thấy khối hình bên trên thật đối kháng điệu cùng không bắt mắt không? Để hoàn toàn có thể tự tạo nên những vật dụng thể thiệt cute, đã mắt cho riêng mình các bạn có thể đọc thêm về Canvas nhằm tự xây cất component.
Xem thêm: Cái De Minecraft 1 - Các Công Thức Chế Tạo Của Minecraft
Frames
Để game sẵn sàng chuẩn bị hoạt động chúng ta sẽ update hiển thị (update the display) 50lần/giây, giống như các khung người (frame) trong 1 bộ phim.
Các bước thực hiện (Step) :
Tạo hàm updateGameArea() để update hiển thị. Trong hàm này điện thoại tư vấn đến 2 method clear() (clear myGameArea) với update() (cập nhật mang lại myGamePiece).
Trong đối tượng myGameArea, thêm một interval - hứa giờ thời gian, sẽ auto chạy hàm updateGameArea() sau mỗi trăng tròn ms/lần (50 lần/s). Trong khi thêm 1 hàm clear() để xóa sạch cục bộ canvas.
Trong hàm tạo component thêm 1 hàm update() để xử lý bài toán vẽ component.
Hàm updateGameArea() hotline tới cách thức clear() với update()
var myGamePiece;function startGame() myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start();var myGameArea = canvas : document.createElement("canvas"), start : function() this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes<0>); // hứa hẹn giờ nhằm chạy hàm updateGameArea() sau mỗi đôi mươi ms/lần this.interval = setInterval(updateGameArea, 20); , // hàm clear() để triển khai sạch canvas 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.x = x; this.y = y; // sản xuất hàm update() vào hàm sinh sản component() nhằm update số liệu khi vẽ component this.update = function() ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); function updateGameArea() myGameArea.clear(); myGamePiece.update();
Làm mang lại component chuyển động (Make it Move)
Để minh chứng hình vuông red color (component) được vẽ ra 50 lần/s, họ sẽ biến hóa vị trí x (hoành độ - ở ngang) ở các lần update quanh vùng game area là 1 px (điểm ảnh).function updateGameArea() myGameArea.clear(); // vào hàm updateGameArea() thêm mẫu lệnh nhằm tăng tọa độ x lên 1px nghỉ ngơi mỗi lần cập nhật myGamePiece.x += 1; myGamePiece.update();Bạn rất có thể xem kỹ hơn quy trình update và hoạt động của khối màu đỏ tại đây
Why Clear The trò chơi Area? - vì sao lại bắt buộc làm sạch vùng Game?
Chắc hẳn chúng ta có thắc mắc vì sao lại cần được làm sạch mát vùng Game các lần update và hành động này có thực sự phải thiết?
Việc này tưởng chừng như không quan trọng nhưng nếu chúng ta bỏ method clear() đi thì tất cả các hoạt động của component (khối vuông màu đỏ) sẽ để lại dấu vết vị trí mà chúng đã đi qua (các ảnh của khối hình này sẽ được lưu lại dọc đường nó đi qua). Bạn cũng có thể quan tiếp giáp trực quan liêu tại đây
Thay đổi kích thước, color sắc, vị trí của component
function startGame() myGameArea.start(); // set giá chỉ trị đến component sinh hoạt đây. MyGamePiece = new component(width-chiều rộng, height-chiều cao, color-màu, x-tạo độ ngang, y-tọa độ dọc);Khi biến đổi màu sắc bạn cũng có thể sử dụng text ("red", "blue", "pink"...) hoặc các đơn vị định màu khác (hex - "#ff0000", rgb - "rgb(255, 0, 0)" hoặc rgba - "rgba(0, 0, 255, 0.5)" ....)
Thay đổi vị trí :
Sử dụng tọa độ x, y để xác định các component trên vùng game. Góc trái phía bên trên của canvas bao gồm tọa độ là (0, 0).
Bạn cũng có thể vào trên đây để trải nghiệm các sự biến đổi này
Nhiều component trong 1 canvas và làm cho những component này chuyển động
Trong 1 game có thể có khá nhiều vật thể (component) cùng chuyển động. Chúng ta cũng có thể dễ dàng tạo những vật thể bạn muốn thật solo giản bằng cách khai báo các component bắt đầu trong hàm startGame() và update chuyển động của nó ở hàm updateGameArea()var redGamePiece, blueGamePiece, yellowGamePiece;function startGame() redGamePiece = new component(75, 75, "red", 10, 10); yellowGamePiece = new component(75, 75, "yellow", 50, 60); blueGamePiece = new component(75, 75, "blue", 10, 110); myGameArea.start();function updateGameArea() myGameArea.clear(); redGamePiece.update(); yellowGamePiece.update(); blueGamePiece.update();Để làm cho những component này vận động theo phần lớn quỹ đạo khác nhau cũng thật đối kháng giản, chỉ bằng cách tăng sút tọa độ x, y của từng component tùy ý (1 hoặc những px tùy bạn):function updateGameArea() myGameArea.clear(); redGamePiece.x += 1; yellowGamePiece.x += 1; yellowGamePiece.y += 1; blueGamePiece.x += 1; blueGamePiece.y -= 1; redGamePiece.update(); yellowGamePiece.update(); blueGamePiece.update();Bạn hoàn toàn có thể vào trên đây để tạo những component và quỹ đạo cho cái đó theo ý bạn.
4. Game Controllers
Trong phần này, họ sẽ học cách để điều khiển vận động của component (trái-phải, lên-xuống), bạn cũng có thể click vào đường link tôi gắn thêm kèm tại phần tiêu đề của mục này để thử điều khiển hoạt động của khối component như trong hình ảnh :
Để tạo nên các chức năng điều khiển đó bọn họ cần sinh sản Controller theo quá trình sau :
Nhận trong Controller - Get in Control
Để tinh chỉnh và điều khiển khối red color (trái-phải, lên-xuống) thứ nhất cần thêm trên giao diện 4 button nhằm điều khiển vận động của khối màu đỏ.
Với từng button (1 chức năng) họ viết 1 hàm nhằm thực hiện tính năng di chuyển khối hình red color theo hướng tương ứng.
Trong hàm sản xuất của mỗi component bọn họ thêm 2 nằm trong tính mới là speedX cùng speedY được sử dụng làm những chỉ số tốc độ. Đồng thời vào hàm chế tác này viết hàm newPos() để chuyển đổi vị trí của khối color (component), hàm newPos() này được gọi từ hàm updateGameArea trước khi vẽ component.
Ý tưởng việc :
Khởi chế tạo ra 2 trực thuộc tính speedX và speedY để bộc lộ giá trị độ chênh lệch giữa giá bán trị new và cực hiếm khởi sinh sản của toạ độ ngang(x) và dọc(y) của khối hình. Ban đầu khởi chế tạo ra component do chưa tồn tại sự dịch chuyển của khối hình yêu cầu giá trị của 2 ở trong tính này = 0.Ở các hàm điều hướng hoạt động ta tăng giảm ngay trị của speedX với speedY mang đến phù hợp.Sau lúc tăng bớt speedX và speedY tương ứng trong mỗi chuyển động, ngơi nghỉ hàm xác định vị trí bắt đầu của khối component(toạ độ mới) newPos, toạ độ x mới bằng toạ độ x cũ cộng với speedX, toạ độ y mới bởi toạ độ y cũ cùng với speedY.Sau đó là đoạn js nhằm điều hướng chuyển động của khối hình :
script>function component(width, height, color, x, y) this.width = width; this.height = height; // vào hàm tạo nên của component khởi chế tạo ra 2 thuộc tính ```speedX``` cùng ```speedY``` 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() // toạ độ bắt đầu của khối hình bởi toạ độ cũ cộng với chỉ số tốc độ tương ứng // toạ độ x mới bằng toạ độ x cũ cùng với speedX this.x += this.speedX; //toạ độ y mới bởi toạ độ y cũ cùng với speedY this.y += this.speedY; function updateGameArea() myGameArea.clear(); // các lần update trò chơi ta sẽ call hàm newPos 1 lần để xác định lại địa điểm của khối hình sau mỗi lần thay đổi. MyGamePiece.newPos(); myGamePiece.update();// hàm vận động lênfunction moveup() // từng khi dịch rời khối hình lên phía trên thì toạ độ y sẽ bị giảm đi 1, tương ứng với bài toán speedY sụt giảm 1. MyGamePiece.speedY -= 1;// hàm chuyển động xuốngfunction movedown() // mỗi khi dịch chuyển khối hình xuống bên dưới thì toạ độ y sẽ tăng lên 1, tương ứng với vấn đề speedY tạo thêm 1. MyGamePiece.speedY += 1;// hàm thanh lịch tráifunction moveleft() // mỗi khi di chuyển khối hình thanh lịch trái thì toạ độ x sẽ giảm xuống 1, tương xứng với vấn đề speedX sụt giảm 1. MyGamePiece.speedX -= 1;// hàm quý phái phảifunction moveright() // mỗi khi dịch rời khối hình sang yêu cầu thì toạ độ x sẽ tăng lên 1, tương xứng với câu hỏi speedX tạo thêm 1. MyGamePiece.speedX += 1;script>// khi click vào button UP trên bối cảnh thì hàm moveup() sẽ được gọibutton onclick="moveup()">UPbutton>// khi click vào button DOWN trên giao diện thì hàm movedown() sẽ tiến hành gọibutton onclick="movedown()">DOWNbutton>// khi click vào button LEFT trên bối cảnh thì hàm moveleft() sẽ được gọibutton onclick="moveleft()">LEFTbutton>// lúc click vào button RIGHT trên bối cảnh thì hàm moveright() sẽ được gọibutton onclick="moveright()">RIGHTbutton>
Stop Moving - Dừng đưa động
Sau mỗi dịch rời của khối hình xong, chúng ta cần giới hạn lại chuyển động của khối hình, để gia công được điều này họ thêm 1 hàm stopMove() để đưa chỉ số tốc độ (speedX cùng speedY) về 0. (dùng được cả trong màn hình bình thường và màn hình hiển thị cảm ứng):script>...// hàm dừng vận động của khối hìnhfunction stopMove() myGamePiece.speedX = 0; myGamePiece.speedY = 0;script>button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UPbutton>button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWNbutton>button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFTbutton>button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHTbutton>
Sử dụng keyboard như bộ tinh chỉnh để gameplay - Keyboard as Controller
Chúng ta hoàn toàn có thể điều khiển khối red color bằng các phím trên keyboard máy tính.Set một số ít phím có tác dụng key, từng 1 key tương xứng với 1 vận động nhất định của khối màu (lên-xuống, trái-phải) và bắt sự kiện cho những phím key này nhằm khi những key này được click thì gọi hàm vận động tương ứng.Tạo 1 method để đánh giá xem phím key đã có được nhấn tuyệt không(bắt sự khiếu nại addEventListener) cùng set nằm trong tính key của myGameArea thành key code (mã key - biểu thị mã ASCII của ký kết tự tương ứng với từng phím). Lúc key được nhả ra (ở tâm lý released) thì set ở trong tính key thành false.var myGameArea = canvas : document.createElement("canvas"), start : function() this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes<0>); this.interval = setInterval(updateGameArea, 20); // bắt sự kiện keydown (nhấn xuống) của phím key window.addEventListener("keydown", function (e) // khi key nào đó được nhấn thì key của myGameArea = mã ASCII của phím key được dìm myGameArea.key = e.keyCode; ) // bắt sự kiện keyup (nhả ra) của phím key window.addEventListener("keyup", function (e) // lúc key nào đó được nhả ra sau thời điểm nhấn thì key của myGameArea = false myGameArea.key = false; ) , clear : function() this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); Di gửi khối red color khi 1 key nào này được nhấn (trong hàm updateGameArea):
function updateGameArea() myGameArea.clear(); myGamePiece.speedX = 0; myGamePiece.speedY = 0; // giả dụ phím mũi thương hiệu trái (mã ASCII = 37) được nhấn, thì speedX = -1 (dịch trái 1 điểm ảnh) if (myGameArea.key && myGameArea.key == 37) myGamePiece.speedX = -1; // giả dụ phím mũi tên bắt buộc (mã ASCII = 39) được nhấn, thì speedX = 1 (dịch phải 1 điều ảnh) if (myGameArea.key && myGameArea.key == 39) myGamePiece.speedX = 1; // nếu như phím mũi tên lên (mã ASCII = 38) được nhấn, thì speedY = -1 (dịch lên 1 điều ảnh) if (myGameArea.key && myGameArea.key == 38) myGamePiece.speedY = -1; // trường hợp phím mũi tên xuống (mã ASCII = 40) được nhấn, thì speedY = 1 (dịch xuống 1 điểm ảnh) if (myGameArea.key && myGameArea.key == 40) myGamePiece.speedY = 1; myGamePiece.newPos(); myGamePiece.update();Bạn rất có thể vào link sau để thử dùng và đổi khác phím key theo ý mình : http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_keys
Multiple Keys Pressed - Ấn các key cùng 1 lúc
Bạn có tự hỏi sẽ như thế nào nếu họ nhấn nhiều key cùng 1 lúc?
Trong ví dụ trên, component chỉ rất có thể di gửi theo chiều ngang hoặc chiều dọc. Hiện thời chúng ta ý muốn nó có thể di chuyển được theo đường chéo. Để có tác dụng được điều này chúng ta cần sử dụng phương pháp Multiple Keys sẽ đề cập trên.
Ý tưởng bài xích toán:
Tạo 1 mảng keys cho đối tượng người tiêu dùng myGameArea, mỗi phần tử của mảng bộc lộ giá trị một key được nhận hay không. Giả dụ key được dấn thì phần tử tương ứng của mảng keys có mức giá trị là true, quý giá true này được duy trì cho đến khi phím không thể được nhấn nữa, lúc bắt sự kiện keyup của phím thì quý hiếm của thành phần tương ứng này quay trở lại false.
Cách thức di chuyển khối hình cũng tương đối đơn giản, phương thức gán key và đo lường và tính toán tăng bớt tọa độ của khối hình không không giống gì so với dịch rời lên-xuống-trái-phải; chỉ không giống thay do bắt sự của một phím tuyệt nhất thì ở đó là bắt sự kiện dìm keydown của toàn bộ các phím keys.
Trên đây là hình ảnh minh họa cho các hướng chéo cánh mà khối màu rất có thể di chuyển, để làm cho khối hình dịch rời :
Theo hướng (1), dấn đồng thời tổng hợp phím left-arrow (mũi tên trái, --X) + up-arrow (mũi thương hiệu lên, --Y).Theo hướng (2), nhấn đồng thời tổng hợp phím right-arrow (mũi thương hiệu phải, ++X) + up-arrow (mũi tên lên, --Y).Theo phía (3), dấn đồng thời tổng hợp phím right-arrow (mũi thương hiệu phải, ++X) + down-arrow (mũi thương hiệu xuống, ++Y).Theo hướng (4), dìm đồng thời tổng hợp phím left-arrow (mũi tên trái, --X) + down-arrow (mũi tên xuống, ++Y).Dưới đó là đoạn code để tiến hành ý tưởng trên :
var myGameArea = canvas : document.createElement("canvas"), start : function() this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes<0>); this.interval = setInterval(updateGameArea, 20); window.addEventListener("keydown", function (e) // key đến myGameArea là số các (keys) và được lưu dưới dạng mảng tên là keys myGameArea.keys = (myGameArea.keys ) window.addEventListener("keyup", function (e) // bắt sự kiện keyup tựa như với keydown bên trên myGameArea.keys
Có 1 điểm thú vị về độ ưu tiên khi tất cả cặp phím đối ngẫu (cặp phím có 2 phía ngược nhau : trái - phải, lên - xuống) được dấn là phím theo chiều dương so với gốc tọa độ sẽ được ưu tiên hơn (++X với ++Y). Từ đó :
phím right-narow sẽ tiến hành ưu tiên rộng left-narrow : khi bạn cùng dấn phím di chuyển khối hình sang trái và cần thì phía phải sẽ tiến hành ưu tiên hơn.phím down-narow sẽ được ưu tiên hơn up-narrow : khi chúng ta cùng dấn phím di chuyển khối hình lên trên cùng xuống bên dưới thì hướng xuống dưới sẽ được ưu tiên hơn.còn nếu bạn nhấn 3 hoặc 4 phím trong cùng 1 thời gian thì quy vẻ ngoài sẽ tinh vi hơn.Xem thêm: Tải Ứng Dụng Xem Anime Vietsub Trên Điện Thoại Android, Anime Tv Cho Android
Di gửi khối hình bằng con trỏ loài chuột - Using The Mouse Cursor as a Controller
Để dịch chuyển khối hình bởi con trỏ chuột bạn cần thêm một method vào đối tượng người tiêu dùng myGameArea để update tọa độ x cùng y của component theo tọa độ của con trỏ chuột:
var myGameArea = canvas : document.createElement("canvas"), start : function() this.canvas.width = 480; this.canvas.height = 270; this.canvas.style.cursor = "none"; //ẩn bé trỏ cội this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes<0>); this.interval = setInterval(updateGameArea, 20); bắt sự kiện mousemove - trải qua của bé trỏ window.addEventListener("mousemove", function (e) // tọa độ x của component (tọa độ x mới của khối hình) được gán bằng tọa độ pageX của nhỏ trỏ myGameArea.x = e.pageX; // tọa độ y của component (tọa độ x new của khối hình) được gán bởi tọa độ pageY của nhỏ trỏ myGameArea.y = e.pageY; ) , clear : function() this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); Sau đó gán tọa độ của khối hình bằng tọa độ mới được cập nhật:
function updateGameArea() myGameArea.clear(); if (myGameArea.x && myGameArea.y) myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; myGamePiece.update();Demo : http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_mouse
5. Lời kết
Ở phần 1 này tôi xin giới hạn tại GameComtroller. Ở phần sau họ sẽ cùng nhau đọc thêm về cách tạo chướng ngại vật vật (Game Obstacles), phương pháp tính điểm mang đến game (Game Score), hình ảnh trong trò chơi (Game Images), âm thanh, đồ gia dụng hoạ, cách làm đồ vật thể trôi lên (Game Bouncing), quay đồ thể (Game Rotation), hoạt động theo hành trình của đồ gia dụng thể (Game Movement).
