如何在画布中保留我的游戏角色？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在画布中保留我的游戏角色？相关的知识，希望对你有一定的参考价值。
我正在研究一个'类似蛙人'的游戏，并且有以下代码用于在canvas元素周围移动我的角色。代码可以工作，但角色可以“走出/离开”画布。我已经尝试将handleInput()放在嵌套在if语句（update(dt)）中的if player.x is > don't do this....（更新检查更新）中，但是我收到了语法错误。 switch中的三元语句 - 然而，这就是他们在我遵循的教程中如何做到这一点，我正在努力不要只是'复制'教程。任何建议都非常感谢！
window.allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
const allowedKeys = window.allowedKeys;
update(dt){
}
handleInput(input){
switch(input) {
case 'left':
allowedKeys['left'] = this.x -= 1;
break;
case 'up':
allowedKeys['up'] = this.y -= 1;
break;
case 'right':
allowedKeys['right'] = this.x += 1;
break;
case 'down':
allowedKeys['down'] = this.y += 1;
break;
default:
break;
}
}
document.addEventListener('keyup', function(e) {
player.handleInput(allowedKeys[e.keyCode]);
});
答案
将此添加到update（）修复了问题:)以及左/右屏幕滚动的有趣额外好处！
update(dt){
if(player.x > 5){
player.x = 0;
}
if(player.x < 0){
player.x = 5;
}
if(player.y > 4.5){
player.y -= 1;
}
}
另一答案
我认为你想验证用户的关键是什么，按这里是一个例子，我使用原型但我相信你正在使用es6类。您不需要声明全局变量allowedKeys也不需要更新它。我希望能帮助你
// movements with javascript
const allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
function Player(target) {
this.x = 0
this.y = 0
this.target = target
}
Player.prototype.handleInput = function(input){
switch(input) {
case 'left':
this.x -= 1;
break;
case 'up':
this.y -= 1;
break;
case 'right':
this.x += 1;
break;
case 'down':
this.y += 1;
break;
default:
break;
}
}
Player.prototype.update = function (dt){
}
const player = new Player("player1")
document.addEventListener('keyup', function(e) {
player.handleInput(allowedKeys[e.keyCode]);
const element = document.getElementById(player.target)
element.innerhtml = "x:" + player.x + " y:" + player.y
});<div id="player1"> Press an Arrow </div>以上是关于如何在画布中保留我的游戏角色？的主要内容，如果未能解决你的问题，请参考以下文章