PDA

View Full Version : Can't find the error! Please help!



xiMontyx
05-20-2014, 10:40 AM
I'm trying to make a simple game and my code isn't working. I checked in the Inspect Element console tool in chrome, and it says the error is an unexpected end of input on line 1, but line 1 is a comment. I'm pretty sure it's in the javascript section, but I included my HTML and CSS just in case (separated by ===LanguageName====). Please help, here's my code:

===================JAVASCRIPT======================================================================= ===============

// important stuff
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var canvasJet = document.getElementById('canvasJet');
var ctxJet = canvasJet.getContext('2d');

var canvasEnemy = document.getElementById('canvasEnemy');
var ctxEnemy = canvasEnemy.getContext('2d');

var jet1 = new Jet();

var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;
var isPlaying = false;
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var enemies = [];
var spawnAmount = 3;


var imgSprite = new Image();
imgSprite.src = 'Images/Pics/sprite.png';
imgSprite.addEventListener('load',init,false);

// main functions
function init() {
spawnEnemy(spawnAmount);
drawBg();
startLoop();
document.addEventListener('keydown',checkKeyDown,false);
document.addEventListener('keyup',checkKeyUp,false);
}

function spawnEnemy (number) {
for (var i=0; i<number; i++) {
enemies[enemies.length] = new Enemy();
}
}

function drawAllEnemies() {
clearCtxEnemy();
for (var i=0; i<enemies.length; i++) {
enemies[i].draw();
}
}

function loop() {
if (isPlaying) {
jet1.draw();
drawAllEnemies();
requestAnimFrame(loop);
}
}

function startLoop() {
isPlaying = true;
loop();
}

function stopLoop() {
isPlaying = false;
}

function drawBg() {
var srcX = 0;
var srcY = 0;
var drawX = 0;
var drawY = 0;
ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight)
}

function clearCtxBg() {
ctxBg.clearRect(0,0,gameWidth,gameHeight);
}
// end of main functions




// jet functions

function Jet() {
this.srcX = 100;
this.srcY = 500;
this.drawX = 220;
this.drawY = 200;
this.noseX = this.drawX + 100;
this.noseY = this.drawX + 20;
this.width = 100;
this.height = 40;
this.speed = 2;
this.isUpKey = false;
this.isRightKey = false;
this.isDownKey = false;
this.isLeftKey = false;
this.isSpacebar = false;
this.isShooting = false;
this.bullets = [];
this.currentBullet = 0;
}

Jet.prototype.draw = function() {
clearCtxJet();
this.checkDirection();
this.noseX = this.drawX + 100;
this.noseY = this.drawX + 20;
this.checkShooting();
this.drawAllBullets();
ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.wid th,this.height);
};

Jet.prototype.checkDirection = function() {
if (this.isUpKey) {
this.drawY -= this.speed;
}
if (this.isRightKey) {
this.drawX += this.speed;
}
if (this.isDownKey) {
this.drawY += this.speed;
}
if (this.isLeftKey) {
this.drawX -= this.speed;
}
};

Jet.prototype.drawAllBullets = function() {
for (var i=0; i<this.bullets.length; i++) {
if (this.bullets[i].drawX >= 0) this.bullet[i].draw();
}
};

Jet.prototype.checkShooting = function() {
if(this.isSpacebar) {
this.bullets[this.currentBullet].fire(this.noseX, this.noseY);
this.currentbullet++;
if (this.currentBullet >= this.bullets.length) this.currentBullet = 0;
}
};

function clearCtxJet() {
ctxJet.clearRect(0,0,gameWidth,gameHeight);
}

// end of jet functions





// bullet functions

function Bullet() {
this.srcX = 200;
this.srcY = 500;
this.drawX = -20;
this.drawY = 0;
this.width = 40;
this.height = 10;
}

Bullet.prototype.draw = function() {
this.drawX += 3;
ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.wid th,this.height);
if (this.drawX > gameWidth) this.drawX = -20;
};

Bullet.prototype.fire = function(startX, startY) {
this.drawX = startX;
this.drawY = startY;
};


// end of bullet functions




// enemy functions
function Enemy() {
this.srcX = 0;
this.srcY = 500;
this.width = 100;
this.height = 40;
this.speed = 2;
this.drawX = Math.floor(Math.random()*1000+gameWidth);
this.drawY = Math.floor(Math.random()*gameHeight);
}

Enemy.prototype.draw = function() {
this.drawX -= this.speed;
ctxEnemy.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.w idth,this.height);
this.checkEscaped();
};

Enemy.prototype.checkEscaped = function() {
if (this.drawX + this.width <= 0) {
this.recycleEnemy();
}
};

Enemy.prototype.recycleEnemy = function() {
this.drawX = Math.floor(Math.random()*1000+gameWidth);
this.drawY = Math.floor(Math.random()*gameHeight);
};

function clearCtxEnemy() {
ctxEnemy.clearRect(0,0,gameWidth,gameHeight);
}
// end of enemy functions


// event functions
function checkKeyDown(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38 || keyID === 87) { // up arrow or W key
jet1.isUpKey = true;
e.preventDefault();
}
if (keyID === 39 || keyID === 68) { // right arrow or D key
jet1.isRightKey = true;
e.preventDefault();
}
if (keyID === 40 || keyID === 83) { // down arrow or S key
jet1.isDownKey = true;
e.preventDefault();
}
if (keyID === 32) { // spacebar
jet1.isSpacebar = true;
e.preventDefault();
}
if (keyID === 38 || keyID === 87) { // left arrow or w key
jet1.isUpKey = true;
e.preventDefault();
}

function checkKeyUp(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38 || keyID === 87) { // up arrow or W key
jet1.isUpKey = false;
e.preventDefault();
}
if (keyID === 39 || keyID === 68) { // right arrow or D key
jet1.isRightKey = false;
e.preventDefault();
}
if (keyID === 40 || keyID === 83) { // down arrow or S key
jet1.isDownKey = false;
e.preventDefault();
}
if (keyID === 37 || keyID === 65) { // left arrow or A key
jet1.isLeftKey = false;
e.preventDefault();
}
if (keyID === 32) { // spacebar
jet1.isSpacebar = false;
e.preventDefault();
}
}
//end of event functions

======================HTML========================================================================== ===

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple Game</title>
<link rel="stylesheet" href="game.css">
</head>
<body>

<canvas id="canvasBg" width="800" height="500"></canvas>
<canvas id="canvasEnemy" width="800" height="500"></canvas>
<canvas id="canvasJet" width="800" height="500"></canvas>

<script src="game.js"></script>
</body>
</html>

=============CSS==========================================================================

body {
background:#303030;
}

#canvasBg {
display:block; background: #ffffff;
margin: 100px auto 0px;
}

#canvasJet, #canvasEnemy {
display:block;
margin: -500px auto 0px;
}

Philip M
05-20-2014, 11:17 AM
When posting here please help us to help you by making it easier to view, copy, modify, test and debug your scripts by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar.

You code is too incoherently presented to enable anyone to test it. Try using the error console in Internet Explorer (F12 key).

See also http://www.codingforums.com/javascript-programming/2090-must-read-how-post-javascript-question.html para 3

var canvasBg = document.getElementById('canvasBg');
It is a bad idea to use the same name for an HTML element and a Javascript variable.

The doctype declaration must be exact (both in spelling and in case). Should be <!DOCTYPE html>

low tech
05-20-2014, 12:18 PM
missing end closing brace } on checkKeyDown function

you have a space in this.w idth, on various lines


checkKeyDown function left arrow key has a problem (copy paste issue probably)


and after playing and hitting space bar I get


Uncaught TypeError: Cannot read property 'fire' of undefined on this line
this.bullets[this.currentBullet].fire(this.noseX, this.noseY);



not sure if any of that helps

xiMontyx
05-21-2014, 08:05 AM
Thanks everyone who replied, I managed to fix it. All the parts said worked before, so I must have accidentally changed it or deleted some of it. Also I will make sure to put it in the code brackets next time.