我做了一个游戏,玩家按下随机位置移动的矩形 会增加分数。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id = "c" width = "500" height = "500"></canvas>
<canvas id = "d" width = "60" height = "60" onclick = "inc()"></canvas>
<style>
body {
margin:0;
padding:0;
background-color:blue;
}
#d {
position:absolute;
}
</style>
<script>
var can = document.getElementById("c");
var can2 = document.getElementById("d");
can.height = window.innerHeight;
can.width = window.innerWidth;
can2.height = window.innerHeight;
can2.width = window.innerWidth;
var s = can.getContext("2d");
var s2 = can2.getContext("2d");
var points = 0;
function move() {
h = Math.ceil(Math.random()*(can2.height-60))+20;
w = Math.ceil(Math.random()*(can2.width-50))+20;
s2.clearRect(0, 0, window.innerHeight, window.innerWidth);
s2.fillRect(this.w, this.h, 60, 60);
}
function inc() {
s.clearRect(0, 0, window.innerHeight, window.innerWidth);
s.fillText(points++, 300, 40);
return points;
}
s.font = "bold 35px Arial";
s.textAlign = points;
s.fillText(points, 300, 40);
s2.fillStyle = "#DEF012";
s2.fillRect(60, 60, 58, 55);
setInterval(move, 200);
</script>
</body>
</html>
&#13;
但是当矩形移动时,侧面的矩形颜色会卡住。如何在没有这个问题的情况下移动矩形?
答案 0 :(得分:1)
您对clearRect的调用中的参数是向后的。
另请注意,似乎您可能意味着#c canvas也是position:absolute也是。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id = "c" width = "500" height = "500"></canvas>
<canvas id = "d" width = "60" height = "60" onclick = "inc()"></canvas>
<style>
body {
margin:0;
padding:0;
background-color:blue;
}
#d {
position:absolute;
}
</style>
<script>
var can = document.getElementById("c");
var can2 = document.getElementById("d");
can.height = window.innerHeight;
can.width = window.innerWidth;
can2.height = window.innerHeight;
can2.width = window.innerWidth;
var s = can.getContext("2d");
var s2 = can2.getContext("2d");
var points = 0;
function move() {
h = Math.ceil(Math.random()*(can2.height-60))+20;
w = Math.ceil(Math.random()*(can2.width-50))+20;
s2.clearRect(0, 0, window.innerWidth, window.innerHeight);
//s2.clearRect(0, 0, window.innerHeight, window.innerWidth);
s2.fillRect(this.w, this.h, 60, 60);
}
function inc() {
s.clearRect(0, 0, window.innerHeight, window.innerWidth);
s.fillText(points++, 300, 40);
return points;
}
s.font = "bold 35px Arial";
s.textAlign = points;
s.fillText(points, 300, 40);
s2.fillStyle = "#DEF012";
s2.fillRect(60, 60, 58, 55);
setInterval(move, 200);
</script>
</body>
</html>
答案 1 :(得分:0)
我创建一个盒子对象并检查其坐标,而不是将一个画布移到另一个上面 这样的事情:
xAxis: {
min: min,
max: max,
type: 'datetime',
},
来源: