Menekan tombol untuk memindahkan kotak merah:
Dapatkan di Control
Sekarang kita ingin mengontrol lapangan merah.
Tambahkan empat tombol, atas, bawah, kiri, dan kanan.
Menulis fungsi untuk setiap tombol untuk memindahkan komponen dalam arah yang dipilih.
Membuat dua properti baru di component konstruktor, dan memanggil mereka speedX dan speedY . Properti ini digunakan sebagai indikator kecepatan.
Menambahkan fungsi dalam component konstruktor, disebut newPos() , yang menggunakan speedX dan speedY properti untuk mengubah posisi komponen.
The newpos fungsi dipanggil dari fungsi updateGameArea sebelum menggambar komponen:
Contoh
<script>
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;
}
</script>
<button
onclick="moveup()">UP</button>
<button
onclick="movedown()">DOWN</button>
<button
onclick="moveleft()">LEFT</button>
<button
onclick="moveright()">RIGHT</button> Cobalah sendiri " berhenti Pindah
Jika Anda ingin, Anda dapat membuat persegi berhenti merah saat Anda melepas tombol.
Menambahkan fungsi yang akan mengatur indikator kecepatan untuk 0.
Untuk menghadapi kedua layar normal dan layar sentuh, kita akan menambahkan kode untuk kedua perangkat:
Contoh
function
stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button
omousedown="moveup()" onmouseup="stopMove()"
ontouchstart="moveup() ">UP</button>
<button
omousedown="movedown()" onmouseup="stopMove()"
ontouchstart="movedown()" >DOWN</button>
<button
omousedown="moveleft()" onmouseup="stopMove()"
ontouchstart="moveleft()" >LEFT</button>
<button
omousedown="moveright()" onmouseup="stopMove()"
ontouchstart="moveright()" >RIGHT</button>
Cobalah sendiri " Keyboard sebagai Pengendali
Kami juga dapat mengontrol lapangan merah dengan menggunakan tombol panah pada keyboard.
Menciptakan metode yang memeriksa apakah tombol ditekan, dan mengatur key milik myGameArea objek untuk kode kunci. Ketika tombol dilepaskan, mengatur key properti untuk false :
Contoh
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) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}Kemudian kita bisa memindahkan persegi merah jika salah satu tombol panah ditekan:
Contoh
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY =
0;
if (myGameArea.key && myGameArea.key == 37)
{myGamePiece.speedX = -1; }
if (myGameArea.key &&
myGameArea.key == 39) {myGamePiece.speedX = 1; }
if
(myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
} Cobalah sendiri " Beberapa Keys Ditekan
Bagaimana jika lebih dari satu tombol ditekan pada saat yang sama?
Dalam contoh di atas, komponen hanya bisa bergerak secara horizontal atau vertikal. Sekarang kami ingin komponen untuk juga bergerak secara diagonal.
Buat keys array untuk myGameArea objek, dan memasukkan satu elemen untuk setiap tombol yang ditekan, dan memberikan nilai true , nilai tetap benar sampai kunci tidak lagi ditekan, nilai menjadi false dalam fungsi keyup pendengar acara:
Contoh
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) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY =
0;
if ( myGameArea.keys && myGameArea.keys[37] )
{myGamePiece.speedX = -1; }
if ( myGameArea.keys &&
myGameArea.keys[39] ) {myGamePiece.speedX = 1; }
if
( myGameArea.keys && myGameArea.keys[38] ) {myGamePiece.speedY = -1; }
if ( myGameArea.keys && myGameArea.keys[40] ) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
} Cobalah sendiri " Menggunakan Mouse Cursor sebagai Controller
Jika Anda ingin mengontrol lapangan merah dengan menggunakan kursor mouse, menambahkan metode dalam myGameArea objek yang update x dan y koordinat kursor mouse :.
Contoh
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //hide the original cursor
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousemove', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
},
clear :
function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}Kemudian kita bisa memindahkan kotak merah menggunakan kursor mouse:
Contoh
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
} Cobalah sendiri " Sentuh Layar Kontrol Game
Kami juga dapat mengontrol kotak merah pada layar sentuh.
Menambahkan metode dalam myGameArea objek yang menggunakan x dan koordinat y dari mana layar disentuh:
Contoh
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('touchmove', function (e) {
myGameArea.x = e.touches[0].screenX;
myGameArea.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
Kemudian kita bisa memindahkan kotak merah jika pengguna menyentuh layar, dengan menggunakan kode yang sama seperti yang kita lakukan untuk kursor mouse:
Contoh
function updateGameArea() {
myGameArea.clear();
if (myGameArea.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
Cobalah sendiri " Controller di The Canvas
Kami juga dapat menarik tombol kita sendiri di kanvas, dan menggunakannya sebagai pengendali:
Contoh
function startGame() {
myGamePiece = new component(30, 30, "red" , 10,
120);
myUpBtn = new component(30, 30,
"blue" , 50, 10);
myDownBtn = new
component(30, 30, "blue" , 50, 70);
myLeftBtn = new component(30, 30, "blue" , 20,
40);
myRightBtn = new component(30, 30,
"blue" , 80, 40);
myGameArea.start();
}Menambahkan fungsi baru yang angka keluar jika komponen, dalam hal ini sebuah tombol, diklik.
Mulailah dengan menambahkan event pendengar untuk memeriksa apakah tombol mouse diklik ( mousedown and mouseup ) . Untuk menghadapi layar sentuh, juga menambahkan acara pendengar untuk memeriksa apakah layar diklik ( touchstart and touchend ) :
Contoh
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('mousedown', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
} Sekarang myGameArea objek memiliki sifat yang memberitahu kita x dan y-koordinat klik. Kami menggunakan theese properti untuk memeriksa apakah klik itu dilakukan pada salah satu tombol biru kita.
Metode baru ini disebut clicked , itu adalah metode yang component konstruktor, dan memeriksa apakah komponen tersebut diklik.
Dalam updateGameArea fungsi, kita mengambil tindakan neccessarry jika salah satu tombol biru diklik:
Contoh
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.clicked = function() {
var myleft = this.x;
var
myright = this.x + (this.width);
var mytop = this.y;
var
mybottom = this.y + (this.height);
var clicked = true;
if
((mybottom < myGameArea.y) || (mytop > myGameArea.y)
|| (myright < myGameArea.x) || (myleft > myGameArea.x)) {
clicked = false;
}
return clicked;
}
}
function
updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
if (myUpBtn.clicked()) {
myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) {
myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) {
myGamePiece.x += -1;
}
if (myRightBtn.clicked()) {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
} Cobalah sendiri "