I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself.
Heres the code I'm using :
<script type="text/javascript">
// SETUP INICIAL
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var innerWidth = 360,
innerHeight = 620;
canvas.width = innerWidth;
canvas.height = innerHeight;
// VARIAVEIS
var score = 0,
lastTime = 0;
// TECLAS DE MOVIMENTAÇÃO
window.onkeydown = pressionaTecla;
function pressionaTecla(tecla){
if(tecla.keyCode == 38) {
player.y = player.y - 10;
}
if(tecla.keyCode == 40) {
player.y = player.y + 10;
}
if(tecla.keyCode == 39) {
player.x = player.x + 10;
}
if(tecla.keyCode == 37) {
player.x = player.x - 10;
}
}
// PERSONALIZAÇÃO DO PLAYER
var player = { },
player_width = 100,
player_height = 105,
player_img = new Image();
player_img.src = 'images/spaceship.png';
// OBJETO DO PLAYER
player = {
width : player_width,
height: player_height,
x : innerWidth/2 - player_width/2, // centralizar
y: innerHeight - (player_height+10), //deixar em baixo
power : 10,
draw: function(){
// FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS
if(this.x <= 0 ){
this.x = 0;
}else if (this.x >= (innerWidth - this.width)) {
this.x = (innerWidth - this.width);
}
if(this.y <= 0 ){
this.y = 0;
}else if (this.y >= (innerHeight - this.height)) {
this.y = (innerHeight - this.height);
}
ctx.drawImage(player_img, this.x, this.y, this.width, this.height);
}
};
// FUNDO DE GALAXIA *codigo fonte do fundo retirado do site codepen.io https://codepen.io/LeonGr/pen/fdCsI
var stars = [], // Array that contains the stars
FPS = 60, // Frames per second
x = canvas.width; // Number of stars
for (var i = 0; i < x; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random(),
vx: Math.floor(Math.random() * 10) - 5,
vy: Math.floor(Math.random() * 10) - 5
});
}
function updatefundo() {
for (var i = 0, x = stars.length; i < x; i++) {
var s = stars[i];
s.x += s.vx / FPS;
s.y += s.vy / FPS;
if (s.x < 0 || s.x > canvas.width) s.x = -s.x;
if (s.y < 0 || s.y > canvas.height) s.y = -s.y;
}
}
function drawfundo() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.globalCompositeOperation = "lighter";
for (var i = 0, x = stars.length; i < x; i++) {
var s = stars[i];
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
ctx.fill();
}
}
// PERSONALIZAÇÃO DO INIMIGO
var enemyArray = [],
enemyIndex = 0,
enemy_width = 35,
enemy_height = 43,
enemy_timer = 1000,
enemy_img = new Image ();
enemy_img.src = 'images/spaceship.png';
// OBJETO DO INIMIGO
function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.img = enemy_img;
this.width = enemy_width;
this.height = enemy_height;
this.rotation = rotation;
enemyIndex++;
enemyArray[enemyIndex] = this;
this.id = enemyIndex;
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
this.update = function(){
this.y+= this.dy;
this.x+= this.dx;
this.draw();
}
this.delete = function(){
delete enemyArray[this.id];
}
this.draw = function(){
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// FUNÇÃO DE CRIAR INIMIGOS
function create_enemy(){
var x = Math.random() * (innerWidth - enemy_width);
var y = -enemy_height;
var dx = 3;
var dy = 3;
var rotation = Math.random();
new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation);
}
// LOOPING DA ANIMAÇAO (MAINFRAME DO GAME)
function gameLoop(currentTime){
requestAnimationFrame(gameLoop);
ctx.clearRect (0,0, canvas.width, canvas.height);
drawfundo();
updatefundo();
// SCORE
ctx.font = '17px arial';
ctx.fillStyle = '#fff';
ctx.fillText('PONTOS: '+score , 15, 30);
// ENERGIA
ctx.font = '17px arial';
ctx.fillStyle = '#fff';
ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30);
// JOGADOR
player.draw();
if(currentTime >= lastTime + enemy_timer){
lastTime = currentTime;
create_enemy();
}
create_enemy();
}
gameLoop();
</script>
Everything is working fine except the enemies not showing.
Already checked the images folder and it's all set up like I've puted in the code. Dev tools console does not show any errors.
Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO"
Please help!