Ігрові контролери
Натискайте кнопки, щоб перемістити червоний квадрат:
Отримати контроль
Тепер ми хочемо контролювати червоний квадрат.
Додайте чотири кнопки: вгору, вниз, ліворуч і праворуч.
Напишіть функцію для кожної кнопки для переміщення компонента у вибраному напрямку.
Створіть дві нові властивості в конструкторі component і назвіть їх speedX та speedY. Ці властивості використовуються як показники швидкості.
Додайте функцію до конструктора component під назвою newPos(), яка використовує speedX і speedY, щоб змінити положення компонента.
Функція newpos викликається з функції updateGameArea перед малюванням компонента:
Приклад
<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>
Спробуйте самі »
Зупинити рух
Якщо хочете, ви можете зупинити червоний квадрат, коли відпустите кнопку.
Додайте функцію, яка встановлюватиме індикатори швидкості на 0.
Щоб працювати як зі звичайними, так і з сенсорними екранами, ми додамо код для обох пристроїв:
Приклад
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>
Спробуйте самі »
Клавіатура як контролер
Ми також можемо керувати червоним квадратом за допомогою клавіш зі стрілками на клавіатурі.
Створіть метод, який перевіряє, чи натиснуто клавішу, і встановіть властивість key об’єкту myGameArea коду ключа. Коли клавішу відпущено, установіть для властивості key значення 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);
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);
}
}
Тоді ми можемо перемістити червоний квадрат, якщо натиснути одну з клавіш зі стрілками:
Приклад
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();
}
Спробуйте самі »
Натиснуто декілька клавіш
Що робити, якщо одночасно натиснути кілька клавіш?
У наведеному вище прикладі компонент може рухатися лише горизонтально або вертикально. Тепер ми хочемо, щоб компонент також рухався по діагоналі.
Створіть keys масив для об’єкту myGameArea, та вставте один елемент для кожної натиснутої клавіші та присвойте їй значення true, значення залишається true, доки клавішу більше не буде натиснуто, значення стане false у функції прослуховування подій keyup:
Приклад
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();
}
Спробуйте самі »
Використання курсору миші як контролера
Якщо ви хочете керувати червоним квадратом за допомогою курсора миші, додайте метод в об’єкт myGameArea, який оновлює координати x та y курсора миші:
Приклад
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);
}
}
Потім ми можемо перемістити червоний квадрат за допомогою курсору миші:
Приклад
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Спробуйте самі »
Торкніться екрана, щоб керувати грою
Ми також можемо керувати червоним квадратом на сенсорному екрані.
Додайте метод в об’єкт myGameArea, який використовує координати x та y місця торкання екрана:
Приклад
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);
}
}
Тоді ми можемо перемістити червоний квадрат, якщо користувач торкнеться екрана, використовуючи той самий код, що й для курсора миші:
Приклад
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Спробуйте самі »
Контролери на Canvas
Ми також можемо намалювати власні кнопки на полотні та використовувати їх як елементи керування:
Приклад
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();
}
Додайте нову функцію, яка визначає, чи натиснуто компонент, у даному випадку кнопку.
Почніть із додавання прослуховувачів подій, щоб перевірити, чи натиснуто кнопку миші (mousedown та mouseup). Щоб працювати з сенсорними екранами, також додайте прослуховувачі подій, щоб перевірити, чи клацають по екрану (touchstart та touchend):
Приклад
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);
}
}
Тепер об’єкт myGameArea має властивості, які повідомляють нам x- та y- координати клацання. Ми використовуємо ці властивості, щоб перевірити, чи було натиснуто одну з наших синіх кнопок.
Новий метод називається clicked, це метод конструктора component і перевіряє, чи компонент натискається.
У функції updateGameArea ми виконуємо необхідні дії, якщо натиснути одну з синіх кнопок:
Приклад
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();
}
Спробуйте самі »
