游戏控制器
按下按钮移动红色方块
掌握控制
现在我们想要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以指定的方向移动组件。
在 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()">上</button>
<button onclick="movedown()">下</button>
<button onclick="moveleft()">左</button>
<button onclick="moveright()">右</button>
自己动手试一试 »
停止移动
如果您愿意，可以在释放按钮时让红色方块停止。
添加一个函数来将速度指示器设置为 0。
为了同时处理普通屏幕和触摸屏，我们将为这两个设备添加代码
示例
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">上</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">下</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">左</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">右</button>
自己动手试一试 »
键盘作为控制器
我们也可以通过使用键盘上的箭头键来控制红色方块。
创建一个方法来检查是否按下了某个键，并将 myGameArea 对象的 key 属性设置为键码。当释放按键时，将 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();
}
自己动手试一试 »
同时按下多个键
如果同时按下多个键怎么办？
在上面的示例中，组件只能水平或垂直移动。现在我们希望组件也能对角线移动。
为 myGameArea 对象创建一个 keys 数组，为按下的每个键插入一个元素，并将其值设置为 true，该值会一直保持为 true 直到按键不再被按下，在 keyup 事件监听器函数中，该值变为 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.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"; //隐藏原始光标
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();
}
自己动手试一试 »
画布上的控制器
我们也可以在画布上绘制自己的按钮，并将它们用作控制器
示例
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 对象具有指示单击坐标的属性。我们使用这些属性来检查单击是否发生在我们的蓝色按钮之一上。
新方法名为 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();
}
自己动手试一试 »
