Нажмите на кнопки, чтобы переместить красный квадрат:
Получить в контроле
Теперь мы хотим контролировать красный квадрат.
Добавьте четыре кнопки, вверх, вниз, влево и вправо.
Напишите функцию для каждой кнопки, чтобы переместить компонент в выбранном направлении.
Сделайте два новых свойства в 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
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>
Попробуй сам " Клавиатура в качестве контроллера
Мы также можем контролировать красный квадрат с помощью клавиш со стрелками на клавиатуре.
Создайте метод , который проверяет , является ли клавиша нажата, и установите 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 значение не остается верным до тех пор пока клавиша не нажата, то значение становится 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 объекта , который обновляет х и у координаты курсора мыши :.
пример
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 объекта , который использует х и у координаты , где касании экрана:
пример
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.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
Попробуй сам " Контроллеры на холсте
Мы также можем сделать наши собственные кнопки на холсте, и использовать их в качестве контроллеров:
пример
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 and mouseup ) . Для того, чтобы иметь дело с сенсорными экранами, а также добавить обработчики событий , чтобы проверить , если экран нажал на ( touchstart and 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 объект обладает свойствами , которые говорит нам х- и у-координаты мыши. Мы используем theese свойства, чтобы проверить, если клик был выполнен на одном из наших синих кнопок.
Новый метод называется clicked , это метод component конструктора, и он проверяет , является ли компонент быть нажата.
В updateGameArea функции, мы берем neccessarry действия , если один из синих кнопок нажата:
пример
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();
} Попробуй сам "