Javascript 如何制作；“你死了”；当你死的时候

我试着做一个游戏，但我不能让“你死了”这个符号起作用。我不知道如何使用JavaScript在画布中创建文本

另外，有没有一种方法可以创建一个

myBlockPad

变量来阻止您通过它，但仍然可以让您移动到其他地方

var-myGamePiece；
肌障；
MYVAR区块板；
函数startName（）{
myGamePiece=新组件（40,40，#00ff00ff），50,140）；
myObstacle=新组件（10200，#cf0000ff），300120）；
myBlockPad=新组件（40,80，#7e3f00），0,120）；
myGameArea.start（）；
}
var myGameArea={
画布：document.createElement（“画布”），
开始：函数（）{
this.canvas.width=560；
this.canvas.height=320；
this.context=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
this.interval=setInterval（updateGameArea，20）；
window.addEventListener（'keydown'，函数（e）{
myGameArea.key=e.keyCode；
})
window.addEventListener（'keyup'，函数（e）{
myGameArea.key=false；
})
},
清除：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
},
停止：函数（）{
clearInterval（这个.interval）；
document.createElement（“/*这是文本上的游戏的地方*/”）.innerHTML；
}
}
功能组件（宽度、高度、颜色、x、y）{
这个。宽度=宽度；
高度=高度；
这是0.speedX=0；
该值为0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
ctx.fillStyle=颜色；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
this.crashWith=函数（otherobj）{
var myleft=this.x；
var myright=this.x+（this.width）；
var mytop=this.y；
var mybottom=this.y+（this.height）；
var otherleft=otherobj.x；
var otherright=otherobj.x+（otherobj.width）；
var othertop=otherobj.y；
var otherbottom=otherobj.y+（otherobj.height）；
var-crash=true；
如果（（mybottomotherbottom）| |（myrightotherright））{
崩溃=错误；
}
返回碰撞；
}
}
函数updateGameArea（）{
如果（我的游戏片.撞击物（我的障碍物））{
myGameArea.stop（）；
}否则{
myGameArea.clear（）；
myObstacle.update（）；
myGamePiece.x+=myGamePiece.speedX；
myGamePiece.y+=myGamePiece.speedY；
}
if（myGameArea.key&&myGameArea.key==37 | | myGameArea.key&&myGameArea.key==65）{
myGamePiece.speedX=-3；
}else if（myGameArea.key&&myGameArea.key==39 | | myGameArea.key&&myGameArea.key==68）{
myGamePiece.speedX=3；
}else if（myGameArea.key&&myGameArea.key==38 | | myGameArea.key&&myGameArea.key==87）{
myGamePiece.speedY=-3；
}else if（myGameArea.key&&myGameArea.key==40 | | myGameArea.key&&myGameArea.key==83）{
myGamePiece.speedY=3；
}否则{
myGamePiece.speedX=0；
myGamePiece.speedY=0；
}
myGamePiece.update（）；
}

帆布{
边框：1px实心#D3；
背景色：#f1f1；
}

例如，

ctx.fillText（“你死了”，50,50）

更改颜色为ctx.fillStyle=“红色”
更改字体和大小=
ctx.font=“30px Arial”
如何更改颜色、字体系列和大小？我已编辑了我的答案，以包括您的其他请求。
ctx.fillText（“you Death”，50,50）后1行那么填充文本是否有效？它们应该在fillText行之前。是的，但是
fillStyle
和
font
不是。
ctx.fillText(text,xAxis,yAxis);