Javascript 2d游戏中的摄影机运动

我真的很想知道如何在html和javascript中进行2d相机移动，所以我写了这段代码，它只是一个字符和一个块，所以我可以测试相机移动是否正常。这是我的代码：

var c=document.getElementById（“屏幕”）；
var ctx=c.getContext（“2d”）；
var-rightspressed；
var左压；
var x=（c.宽度-75）/2；
无功转速=10；
功能块（）{
ctx.fillStyle=“#fff”；
ctx.fillRect（390225 80 25）；
}
函数字符（）{
ctx.fillStyle=“#00f”
ctx.fillRect（x，250，50，50）；
}
函数keyUpHandler（事件）{
如果（event.keyCode==37）{
leftPressed=false；
}else if（event.keyCode==39）{
右压=假；
}
}
函数keyDownHandler（事件）{
如果（event.keyCode==37）{
leftPressed=true；
}else if（event.keyCode==39）{
rightspressed=true；
}
}
文件。addEventListener（“keyup”，keyUpHandler，false）；
文档。addEventListener（“keydown”，keyDownHandler，false）；
函数绘图（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
block（）；
字符（）；
如果（右压和（x+50）0）{
x-=速度；
}
请求动画帧（绘制）；
}
请求动画帧（绘制）
#屏幕{
显示：块；
保证金：自动；
背景色：#0f0；
边框：2件纯黑；
}
#标题{
文本对齐：居中；
}
2d摄像机运动
我创建了两个类，一个是
游戏
和一个
球
。当球员按下左键或右键时，球会移动

球知道自己的位置和速度，比赛不在乎

只需告诉球根据游戏的当前状态进行更新


我从这里改编了一段很好的代码：

“”

我添加了ES6类、向量支持和动态游戏元素支持


演示

const canvasTxt=window.canvasTxt.default；
常量KeyCodeMap={
37:"左",，
38:"向上",，
39:"对",，
40:"倒",，
65:'左'，
68:"对",，
83:‘下跌’，
87:‘向上’
};
Object.assign（canvasTxt{
对齐：“左”，
vAlign:'顶部'，
字体：'monospace'，
字体大小：24
});
常量main=（）=>{
Game.DEBUG=true；//启用全局调试模式。
const ctx=document.getElementById（'screen'）.getContext（'2d'）；
康斯特游戏=新游戏（ctx）；
游戏。游戏元素。推送（[
新球({
速度：新维克多（10，0），
位置：新胜利者（game.getWidth（）/2，game.getHeight（）/2），
颜色：“红色”，
尺码：20
}),
新球({
速度：新维克多（20，0），
位置：新的胜利者（game.getWidth（）/2，game.getHeight（）/4），
颜色：“绿色”，
尺码：30
}),
新球({
速度：新维克多（20，50），
职位：新维克多（100140），
颜色：“青色”，
尺码：25
}),
]);
game.redraw（）；
};
班级舞会{
构造函数（选项）{
让opts=Object.assign（{}，Ball.defaultOptions，options）；
this.position=opts.position；
this.speed=opts.speed；
this.size=opts.size；
this.color=opts.color；
}
更新（容器、状态）{
如果（state.pressedKeys.left&！state.pressedKeys.right）{
这个位置减去（这个速度）；
}
如果（state.pressedKeys.right&！state.pressedKeys.left）{
此.位置.添加（此.速度）；
}
this.checkBounds（container）；//确保对象在边界中。。。
}
检查边界（容器）{
if（this.position.x>container.width）{
这个.position.x=0；
}
如果（该位置x<0）{
此.position.x=container.width；
}
if（this.position.y>container.height）{
此.position.y=0；
}
如果（该位置y<0）{
此.position.y=容器高度；
}
}
抽签（ctx）{
ctx.save（）；
ctx.beginPath（）；
ctx.arc（this.position.x，this.position.y，this.size/2,0,2*Math.PI，false）；
ctx.fillStyle=this.color；
ctx.fill（）；
//ctx.lineWidth=1；
//ctx.strokeStyle='#000000'；
ctx.stroke（）；
ctx.restore（）；
}
}
Ball.defaultOptions={
位置：新胜利者（0,0），
速度：新维克多（0,0），
尺寸：1，
颜色：“#FFFFFF”
};
班级游戏{
建造师（ctx）{
this.ctx=ctx；
this.gameElements=[]；
这是resize（）；
此.state={
按下按键：{}//按下捕获键
};
这是.\uu lastRender=0；
这是。uuu animationId=null；
window.onresize=（e）=>this.resize（e）；
document.addEventListener（'click'，（e）=>this.clickHandler（e），false）；
document.addEventListener（'keyup'，（e）=>this.keyUpHandler（e），false）；
document.addEventListener（'keydown'，（e）=>this.keyDownHandler（e），false）；
}
clickHandler（e）{
this.isRunning（）？this.pause（）：this.run（）；//如果正在运行，请暂停
}
keyUpHandler（事件）{
让key=KeyCodeMap[event.keyCode]；
删除此。状态。按按键[键]；
}
keyDownHandler（事件）{
让key=KeyCodeMap[event.keyCode]；
如果（键）此.state.pressedKeys[键]=真；
}
getWidth（）{
返回this.ctx.canvas.width；
}
getHeight（）{
返回this.ctx.canvas.height；
}
调整大小（事件）{
this.ctx.canvas.width=window.innerWidth*2
this.ctx.canvas.height=window.innerHeight*2
}
更新（进度）{
this.gameElements.forEach（gameElement=>gameElement.update（this.ctx.canvas，this.state））；
}
重画{
this.ctx.clearRect（0，0，this.getWidth（），this.getHeight（））；
this.gameElements.forEach（gameElement=>gameElement.draw（this.ctx））；
if（Game.DEBUG）{
此.renderDebugText（this.ctx）；
}
}
/*@private*/\uu renderDebugText（ctx）{
ctx.save（）；
let text='调试输出：\n\n'+JSON.stringify（Object.assign({
正在运行：this.isRunning（）
}，this.state），null，2）；
设offset={x:16，y:16}；
让边界={宽度：280，高度：320}；
ctx.fillStyle='rgba（16,16,16,0.8）'；
fillRect（offset.x，offset.y，bounds.width，bounds.height）；
ctx.lineWidth=1；
ctx.strokeStyle='#333'；
ctx.strokeRec