Space Invaders Enachments Design

p5.js Coding Questions
1

Hi,
First of all, I’m a starter to P5 and I’ve started on my semester 2 Project “Space Invaders”, Source file Download link via One Drive = https://scuonline-my.sharepoint.com/:f:/g/personal/t_charles_12_student_scu_edu_au/Enov7q3YtOZNvSOG-EcBCskBkwOHhS_52uEr-QP78BBAQQ?e=mKxCLC.

I’ve tried adding some enactments to this game project such as images (Background,Ship,Enemy,Bullets) and Background sound but i kept on getting the error as below,

Use of the orientation sensor is deprecated. [p5.min.js:7:22195](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/p5/p5.min.js)

Use of the motion sensor is deprecated. [p5.min.js:7:22195](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/p5/p5.min.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:161:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:171:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:161:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:171:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:161:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:171:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:161:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:171:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:161:3](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

TypeError: ship is undefined[Learn More] [myInvaders.js:171:](file:///C:/Users/Tau%20Billy%20Charles/Downloads/myHome_Orignal/mygame/myInvaders.js)

can anyone help me ID and rectify these errors.
Thanks in advance.
TaVaz

2

Just post your code here.

3

Here are codes.

1----------------------- myInvaders.js------------------------------------

// Title: Space Invasion
// Programmer: Vazco18
// Date: Aug 2018
// Description: This is the tutorial for space invaders, before theming
// declare variables for the game
  var ship;
  var enemies = [];
  var enemyCount = 7;
  var playerFires = [];
  var enemyFires = [];
  var enemyHitCount = 0;
  var gameOver = false;
  var playerLives = 3;
  var enemyWave = 1;
  
  //Background Images & sounds
  var backgroundImage;
  var backgroundsound;
  var shipImage;
  var enemyImage;
  var missile;
  
  
  function preload()
   {
	   //load image
	   backgroundImage = loadImage("assets/background.jpg");
	   
	   //load sounds
	   backgroundsound = loadSound("assets/backgroundsound.mp3");
	   
	   //load jet image
	   shipImage = loadImage("assets/jet.png");
	   
	   //load  attacker image
	   enemyImage = loadImage("assets/alien.jpg")
	   //load  missile image
	   missileImage = loadImage("assets/missile.jpg")
   }

//run once at the start of the game
  function setup() {
    var canv =createCanvas(700,400);
	canv.parent('#game_div');
    ship = new Ship(shipImage);
	backgroundsound.loop();
    enemy = new Enemy(enemyImage);
      for (var i = 0; i < enemyCount; i++) 
      {
         enemies[i] = new Enemy(i*80 + 100,100,enemyImage);
      }
  }//END OF FUNCT

  function draw() {
    var hitsEdge = false;
    background(backgroundImage);
    if(gameOver == false) {
		ship.show();
		ship.move();
        // code to handle the enemy waves
		if (enemies.length == 0) {
			enemyWave ++;
			wave.innerHTML = "Wave: " + enemyWave;
			// add in another row of enemies
			for (var i = 0; i < enemyCount; i++) {
			console.log("adding new enemies");
				enemies[i] = new Enemy(i * 80 + 100,100,enemyImage);
			}
	} 
	else {
		for (var i = 0; i < enemies.length; i++){
			enemies[i].show();
			enemies[i].move();
		} 
    }
    // --------------PlayerFire Code------------
     // --------------PlayerFire Code------------
     //-------code for handles status-------
    for(var i=0; i< playerFires.length; i++) {
        playerFires[i].show();
        playerFires[i].move();   
		
		for (var j = 0; j < enemies.length; j++) {
			if (playerFires[i].hits(enemies[j])) {
				enemies[j].die();
				playerFires[i].die();
				enemyHitCount += 1;
				score.innerHTML = "Score:" + enemyHitCount;
			}
		}
	}
   
  // if the bullets /projectile hits the enemy
    for(var i=0; i< playerFires.length; i++) {
        if (playerFires[i].hit){
			playerFires.splice(i, 1);
		}
	}
 //loop through the enemy
    for(var i=0; i< enemies.length; i++) {
        if (enemies[i].hit){
           enemies.splice(i, 1);
		}
    }
    //-----------coding for check the edge position----------
     for(var i=0; i< enemies.length; i++) {
        if (enemies[i].x  > width || enemies [i].x < 0) {
			hitsEdge = true;
		}
	}
    //if it has hit the edge then move all the enemies down
    if(hitsEdge){
      for (var i=0; i< enemies.length; i++){
		enemies[i].moveDown();
      }
    }
    //EnemyFire Code
     for(var i=0; i< enemyFires.length; i++) {
        enemyFires[i].show();
        enemyFires[i].move();   
     }
     // gets random # from 0 to 100 if under 5/10, fire
    var randomTime = Math.random() * 60;
    if(randomTime <= 1){
        if (enemies.length > 0) {
			var randomEnemy = Math.floor(Math.random() * enemies.length);
			var enemyFire = new EnemyFire(enemies[randomEnemy].x, enemies[randomEnemy].y);
			enemyFires.push(enemyFire);
		}  
	}   
    //check for collision
    for(var i=0; i< enemyFires.length; i++) {
        if(enemyFires[i].hits(ship)){
			playerLives -= 1;
			lives.innerHTML = "Lives: " + playerLives;
			if (playerLives == 0) {
				gameOver = true;
				score.innerHTML = "GameOver";
			} 
			else {
				enemyFires[i].die();
			}
		}
    }
    // if bullets have hit the player, remove enemyFire
	for (var i = 0; i < enemyFires.length; i++) {
		if (enemyFires[i].hit) {
			enemyFires.splice(i, 1);
		}
	}
  }//
 }//END OF FUNCT

function keyPressed() { // event triggered every time a user hits a key
    if (keyCode === RIGHT_ARROW) {
	//ship moves right
		ship.setDirection(1);
	} 
	else if (keyCode === LEFT_ARROW) {
		//ship moves left
		ship.setDirection(-1);
	}
	if (key ===" ") {
		var playerFire = new Missile(ship.x, ship.y-25);
		playerFires.push(playerFire);
	}     
}// END OF FUNCT
  
function keyReleased(){
	if(keyCode === RIGHT_ARROW || keyCode === LEFT_ARROW){
		ship.setDirection(0);
	}
}//END OF FUNCT

2…Codes for Ship.js…

function Ship(img) {
this.x = width/2; // our ship will be half way across the screen
this.y = height - 40;
this.xDirection = 0; //sets initial direction to 0, i.e. Static
this.radius=20;
this.shipImage = img;

this.show = function() {
	image(this.shipImg, this.x, this.y)
    //fill(255);
    //rectMode(CENTER);
    //rect(this.x, this.y , 20, 40);
}

//function to move player left and right
this.move = function() {
	this.x += this.xDirection;
}

this.setDirection = function(direction) {
    this.xDirection = direction;
}

}//end of Ship
4

Right. See how your code didn’t format properly? Edit your post, select the code, and hit the format button. It looks like this: </>

No pineapples won here yet…

5

:tada:Thanks TfGuy44.

6

Hey, are the images displayed at all after your enhancements? Did you visit those lines that are shown in the error log? If images are not being shown, then your first task is to put a very small sketch together and try to load an image. Debugging tools in chrome/firefox/edge are your friend here.

Note we don’t have the images.

You can also load your code in codepen.

Kf

7

With the above code, it does not load the images but when i put comment on the declared function shipImage and backgroundImage, it loads the bullet image with the enemyimage and vice versa.

I can’t get past these errors.

8

I think the best you can do is to host your code in codepen and load the images there as well.

Focus first in getting the background image loaded and displayed. Either work in a smaller sketch or comment out most of your code in setup and draw related to other resources (images) or other actions there. Start building up bit by bit until you get everything working, addressing any issues that come up. For this debugging process, you need to keep your eye in the developers tools.

Kf