0
Так что я делаю это пространство захватчиков в javascript. Моя проблема прямо сейчас заключается в том, что когда враги двигаются влево и вправо, они не очищают прямоугольник, поэтому вы можете увидеть их, как показано здесь: 
Почему не работает функция .clearRect?
Я просто хотел узнать, что я могу исправить, чтобы решить эту проблему. Я хотел бы, если вы могли бы помочь вот мой код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Space Invaders</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>
<style>
canvas{
position: absolute;
top:0px;
left:0px;
background: transparent;
}
#backgroundCanvas{
background-color: black;
}
</style>
</head>
<body>
<canvas id="backgroundCanvas" width="550" height="600"></canvas>
<canvas id="playerCanvas" width="550" height="600"></canvas>
<canvas id="enemiesCanvas" width="550" height="600"></canvas>
<script>
(function(){
$(document).ready(function(){
var game = {};
game.stars = [];
game.width = 550;
game.height = 600;
game.images = [];
game.doneImages = 0;
game.requiredImages = 0;
game.keys = [];
game.enemies = [];
game.count = 0;
game.division = 48;
game.left = false;
game.enemySpeed = 3;
game.contextBackground = document.getElementById("backgroundCanvas").getContext('2d');
game.contextPlayer = document.getElementById("playerCanvas").getContext('2d');
game.contextEnemies = document.getElementById("enemiesCanvas").getContext('2d');
game.player = {
x: game.width/2 -50,
y: game.height - 110,
width:100,
height:100,
speed: 3,
rendered: false
}
$(document).keydown(function(e){
game.keys[e.keyCode ? e.keyCode : e.which] = true;
})
$(document).keyup(function(e){
delete game.keys[e.keyCode ? e.keyCode : e.which];
})
/*
up -38
down-40
left -37
right-39
w-87
a-65
s-83
d-68
space-32
*/
function init(){
for(i=0; i<600;i++){
game.stars.push({
x:Math.floor(Math.random()* game.width),
y:Math.floor(Math.random()* game.height),
size: Math.random()*5
})
}
for(y=0;y<5;y++){
for(x =0;x<5;x++){
game.enemies.push({
x: (x*70) + (70*x) + 10,
y: (y*70) + (10*y) + 40,
width:70,
height: 70,
image:1
})
}
}
loop();
}
function addStars(num){
for(i=0; i<num;i++){
game.stars.push({
x:Math.floor(Math.random()* game.width),
y:game.height+10,
size: Math.random()*5
})
}
}
function update(){
addStars(1);
game.count++;
for(i in game.stars){
if(game.stars[i].y <= -5){
game.stars.splice(i,1);
}
game.stars[i].y--;
}
if(game.keys[37] || game.keys[65]){
if(game.player.x>=0){
game.player.x-=game.player.speed;
game.player.rendered = false;
}
}
if(game.keys[39] || game.keys[68]){
if(game.player.x<=500-50){
game.player.x+=game.player.speed;
game.player.rendered = false;
}
}
if(game.count % game.division == 0){
game.left = !game.left;
}
for(i in game.enemies){
if(game.left){
game.enemies[i].x-=game.enemySpeed;
}else{
game.enemies[i].x+=game.enemySpeed;
}
}
}
function render(){
game.contextBackground.clearRect(0,0,game.width,game.height)
game.contextBackground.fillStyle = "white";
for(i in game.stars){
var star = game.stars[i];
game.contextBackground.fillRect(star.x,star.y,star.size,star.size);
}
if(!game.player.rendered){
game.contextPlayer.clearRect(0, 0, game.width, game.height);
game.contextPlayer.drawImage(game.images[0], game.player.x, game.player.y, game.player.width, game.player.height);
game.player.rendered = true;
}
for(i in game.enemies){
var enemy = game.enemies[i];
game.contextEnemies.clearRect(enemy.x, enemy.y, enemy.width, enemy.height);
game.contextEnemies.drawImage(game.images[enemy.image], enemy.x, enemy.y, enemy.width, enemy.height);
}
}
function loop(){
requestAnimFrame(function(){
loop();
});
update();
render();
}
function initImages(paths){
game.requiredImages = paths.length;
for(i in paths){
var img = new Image;
img.src = paths[i];
game.images[i] = img;
game.images[i].onload = function(){
game.doneImages++;
}
}
}
function checkImages(){
if(game.doneImages>=game.requiredImages){
init();
}
else{
setTimeout(function(){
checkImages();
},1)
}
}
game.contextBackground.font = "bold 50px monaco"
game.contextBackground.fillStyle = "white";
game.contextBackground.fillText("loading" , game.width/2-100 ,game.height/2-25)
initImages(["player.gif", "enemy.png", "bullet.png","Image1.png","Image2.png"])
checkImages();
});
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000/60);
};
})();
})();
</script>
</body>
</html>
, вероятно, некоторое сглаживание глюк, лучше, чтобы очистить весь 'game.contextEnemies', так как вы перерисовывать каждый из врагов при каждом вызове. – Kaiido
Так как я могу это исправить? Вы видите проблему? –
Ну, ИМО самое лучшее решение - называть 'game.contextEnemies.clearRect (0,0, game.width, game.height)' один раз, прямо перед вашим вражеским циклом. – Kaiido