如何在javascript中重新绘制文本？
我在比赛中遇到了一个问题，我确信这与重新上漆有关。所以这个游戏是，如果你用箭头键手动控制你的黑色立方体来触摸蓝色立方体，你每次都会得到一分。好吧，当你这样做，因为它加起来，新的分数提请它自己。这张照片是一个更好的解释（谢谢）： 下面是，单击右上角的“编辑”来编辑代码。警告：你需要点击游戏才能工作 代码如下：如何在javascript中重新绘制文本？,javascript,repaint,Javascript,Repaint,我在比赛中遇到了一个问题，我确信这与重新上漆有关。所以这个游戏是，如果你用箭头键手动控制你的黑色立方体来触摸蓝色立方体，你每次都会得到一分。好吧，当你这样做，因为它加起来，新的分数提请它自己。这张照片是一个更好的解释（谢谢）： 下面是，单击右上角的“编辑”来编辑代码。警告：你需要点击游戏才能工作 代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Basic styling, centering the canvas -->
<style>
</style>
</head>
<body>
<canvas id = "game" width = "500" height = "500"></canvas>
<script>
$(document).ready(function(){
var WIDTH = 500;
var HEIGHT = 500;
var keys = {};
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var score=0;
var snake = {
x:null,
y:null,
width:15,
height:15,
speed : 7,
draw:function(){
ctx.save();
ctx.fillStyle = 'black'
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
},
/*
left arrow 37
up arrow 38
right arrow 39
down arrow 40
*/
update:function(){
if(keys[39]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.x += this.speed;
}
if(keys[37]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.x -= this.speed;
}
if(keys[38]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.y -= this.speed;
}
if(keys[40]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.y += this.speed;
}
//Checks if it is out of Bounds
if(this.x>WIDTH-this.width){
this.x=WIDTH-this.width;
}
if(this.x<0){
this.x=0;
}
if(this.y>HEIGHT-this.width){
this.y=HEIGHT-this.width;
}
if(this.y<0){
this.y=0;
}
//Checks Collision
var Collision = function(ax, ay, aw, ah, bx, by, bw, bh) {
return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah;
};
if(Collision(snake.x,snake.y,snake.width,snake.height,fruits.x,fruits.y,fruits.width,fruits.height)){
ctx.clearRect(fruits.x, fruits.y, fruits.width, fruits.height);
score +=1;
fruits.x = Math.floor(Math.random()*WIDTH);
fruits.y = Math.floor(Math.random()*HEIGHT);
}
}
}
var fruits = {
x:null,
y:null,
width:15,
height:15,
draw:function(){
ctx.save();
ctx.fillStyle = 'blue'
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
},
update:function(){
}
}
function main(){
document.addEventListener("keydown" , function(event){
keys[event.keyCode] = true;
})
document.addEventListener("keyup" , function(event){
delete keys[event.keyCode];
})
init();
var loop = function (){
update();
draw();
window.requestAnimationFrame(loop, canvas);
};
window.requestAnimationFrame(loop, canvas);
}
function init(){
snake.x = 20;
snake.y = 20;
fruits.x = (WIDTH)/2;
fruits.y = HEIGHT/2;
}
function draw(){
//Drawing the Square
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,HEIGHT);
ctx.lineTo(HEIGHT,WIDTH);
ctx.lineTo(WIDTH,0)
ctx.lineTo(0,0)
ctx.stroke();
ctx.save();
ctx.fillStyle = "red";
ctx.font = "bold 40px monaco";
ctx.fillText(score,60,100);
ctx.save();
snake.draw();
fruits.draw();
ctx.restore();
}
function update(){
snake.update();
fruits.update();
}
main();
})
</script>
</body>
</html>
蛇类游戏
$（文档）.ready（函数（）{
var宽度=500；
var高度=500；
var键={}；
var canvas=document.getElementById（'game'）；
var ctx=canvas.getContext（'2d'）；
var得分=0；
变量snake={
x:null，
y:空，
宽度：15，
身高：15，
速度:7,，
绘图：函数（）{
ctx.save（）；
ctx.fillStyle='黑色'
ctx.fillRect（this.x，this.y，this.width，this.height）；
ctx.restore（）；
},
/*
左箭头37
向上箭头38
右箭头39
向下箭头40
*/
更新：函数（）{
如果（键[39]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
这个.x+=这个.speed；
}
如果（键[37]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
这个.x-=这个速度；
}
如果（键[38]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
this.y-=this.speed；
}
如果（键[40]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
this.y+=this.speed；
}
//检查是否超出范围
if（this.x>宽度this.WIDTH）{
this.x=宽度-this.WIDTH；
}
if（this.xHEIGHT this.width）{
this.y=高度-this.width；
}
如果（this.y试试这个
ctx.save();
ctx.clearRect(1, 1, WIDTH - 2, HEIGHT - 2);
ctx.fillStyle = "red";
ctx.font = "bold 40px monaco";
ctx.fillText(score,60,100);
ctx.save();
在你的JSFIDLE中，它似乎对我很好。rect是整个屏幕，所以如果你愿意，你可以缩小它的大小。…天哪，如果这行得通，我真的很笨。你已经在代码中使用了clearRect
。所以你应该已经知道它清除了一个矩形。它可以工作。文本可以工作。当我使用clearRect（）分数文本不起作用，我把它放在填充文本样式的前面：ctx.clearRect（60100100）如果我用我的立方体在上面画画，虽然它会像铅笔一样被擦除，但它确实能用。谢谢！你能详细解释一下你是怎么做到的吗？这样我就不会再遇到这个问题了？谢谢这里只有一行，ctx.clearRect（）。参数是（startX，startY，width，height）.我使用了1,1和宽度-2和高度-2，所以我没有清除边界，但你可以很容易地清除整个内容并重新绘制边界。