向JavaScript平台游戏添加按钮

我制作了一个javascript平台游戏，玩家可以使用 键盘上的箭头键。我希望能够使用 我做的不是键盘上的箭头键

这些是我的javascript按钮

左
跳跃
右

通过将事件监听器添加到按钮“

onmousedown

和

onmousedup

事件”，您可以相当轻松地添加这些控件

您还应该避免在

player.update（）

中使用

new

创建新对象，因为浏览器搜索更多内存和垃圾收集器花费时间清理旧对象会导致创建速度变慢

下面是一个剪下来的，应该做你想做的事

身体{
背景色：黑色；
}
帆布{
显示：块；
保证金：自动；
边缘底部：15px；
边框：纯色1px白色；
边界半径：10px；
}
div{
显示：块；
保证金：自动；
宽度：170px；
高度：30px；
}
钮扣{
宽度：75px；
高度：30px；
文本对齐：居中；
字体：-样式：Lucida控制台；
字体大小：20px；
边框：纯色1px白色；
边界半径：10px；
颜色：#FFFFFFFF；
背景色：#333 ff；
过渡时间：0.1s；
}
按钮：悬停{
背景色：#777777 ff；
}
按钮：激活{
背景色：#AAAAA FF；
}
.顶{
显示：块；
保证金：自动；
边缘底部：10px；
}
.底部{
显示：内联块；
保证金：自动；
左边距：5px；
右边距：1px；
}
↑
←
→
空函数（）{
“严格使用”；
//变数
var canvasWidth=180；
var canvasHeight=160；
var=null；
var-ctx=null；
var-player=null；
var jumpButton=null；
var leftButton=null；
var rightButton=null；
//班级
函数播放器（x，y）{
//位置
this.x=x | | 0.0；//在JS中使用| |意味着如果第一个值为null或未定义，则使用第二个值
这个.y=y | | 0.0；
//速度
该值为0.dx=0.0；
这是0.dy=0.0；
//输入
this.isJumping=false；//用于阻止玩家在空中跳跃的额外布尔值
this.isJumpDown=false；
this.isLeftDown=false；
this.isRightDown=false；
}
Player.prototype={
宽度：10.0，
身高：20.0，
侧面速度：1.0，
跳跃速度：4.0，
下降速度：0.2，
勾选：函数（）{
//输入
如果（此.isLeftDown）{
this.dx=-this.SIDE_速度；
}否则如果（此.isRightDown）{
this.dx=+this.SIDE_速度；
}否则{
该值为0.dx=0.0；
}
if（this.isJumpDown&&！this.isJumping）{
this.isJumping=true；
this.dy=-this.JUMP\u速度；
}
//坠落
如果（this.isJumping）{
this.dy+=this.FALL\u速度；
if（this.y+this.dy>画布高度-this.HEIGHT）{
this.y=画布高度-this.HEIGHT；
这是0.dy=0.0；
this.isJumping=false；
}
}
//左/右边界
如果（此.x<-此.WIDTH）{
x=画布宽度；
}else if（this.x>画布宽度）{
this.x=-this.WIDTH；
}
this.x+=this.dx；
this.y+=this.dy；
},
渲染：函数（ctx）{
ctx.strokeStyle=“黑色”；
ctx.fillStyle=“darkred”；
ctx.beginPath（）；
ctx.rect（this.x，this.y，this.WIDTH，this.HEIGHT）；
ctx.fill（）；
ctx.stroke（）；
}
};
//功能
//按钮事件侦听器
跳下功能（e）{
player.isJumpDown=true；
}
跳上功能（e）{
player.isJumpDown=false；
}
函数onLeftDown（e）{
player.isLeftDown=true；
}
函数onLeftUp（e）{
player.isLeftDown=false；
}
函数onRightDown（e）{
player.isRightDown=true；
}
函数onRightUp（e）{
player.isRightDown=false；
}
//游戏循环
函数循环（）{
//滴答声
player.tick（）；
//渲染
ctx.fillStyle=“灰色”；
ctx.fillRect（0,0，画布宽度，画布高度）；
播放器渲染（ctx）；
//
请求动画帧（循环）；
}
//入口点（此函数首先运行，window.onload）
onload=函数（）{
canvas=document.getElementById（“canvas”）；
canvas.width=画布宽度；
canvas.height=画布高度；
ctx=canvas.getContext（“2d”）；
jumpButton=document.getElementById（“jumpButton”）；
leftButton=document.getElementById（“leftButton”）；
rightButton=document.getElementById（“rightButton”）；
jumpButton.onmousedown=onJumpDown；
jumpButton.onmouseup=onJumpUp；
leftButton.onmousedown=onLeftDown；
leftButton.onmouseup=onLeftUp；
rightButton.onmousedown=onRightDown；
rightButton.onmouseup=onRightUp；
玩家=新玩家（85.0140.0）；
loop（）；
}
}();

谢谢。它自己工作。但是，我无法让它与我的代码片段中的代码一起工作。