So for our project my group and I are trying to program a game. The objective of the game is to change the color of the other player's ship.
For example: If Player 1's ship is colored Red, and Player 2's ship is colored green, each bullet from player 1 that hits Player 2 will slowly turn player 2 from red to green. This is done by the help of bit shifts that is explained below. So for the majority of the time we have been encountering the Uncaught Type Error and we cannot find what the problem is. This file uses : https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js and http://craftyjs.com/release/0.4.2/crafty.js as dependencies to help run the program.
$(document).ready(function() {
Crafty.init();
Crafty.canvas();
Crafty.load(["player.png"], function() {
//splice the spritemap
Crafty.sprite(1, "player.png",
{
ship: [0,0]
});
//start the main scene when loaded
Crafty.scene("main");
});
//player entity for player 1
var player1 = Crafty.e("2D, Canvas, Controls, Collision, Color, ship, player")
.attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, decay: 0.9, h: 50, w: 50, radius: 50, start_time: 0, x: Crafty.viewport.width / 2, y: Crafty.viewport.height / 2 })
.color('red')
.bind("keydown", function(e) {
//on keydown, set the move booleans
if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
this.move.right = true;
} else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
this.move.left = true;
} else if(e.keyCode === Crafty.keys.UP_ARROW) {
this.move.up = true;
} else if(e.keyCode === Crafty.keys.SPACE) {
var d = new Date();
this.start_time = d.getTime();
}
}).bind("keyup", function(e) {
//on key up, set the move booleans to false
if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
this.move.right = false;
} else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
this.move.left = false;
} else if(e.keyCode === Crafty.keys.UP_ARROW) {
this.move.up = false;
} else if(e.keyCode === Crafty.keys.SPACE) {
var time = new Date().getTime();
if((time - this.start_time) >= 5000)
var charge = 5;
//else
//var charge = (time - this.start_time)/1000;
Crafty.e("2D, DOM, Color, bullet")
.attr({
x: this._x,
y: this._y,
w: 1.5,
h: 1.5,
rotation: this._rotation,
xspeed: 20 * Math.sin(this._rotation / 57.3),
yspeed: 20 * Math.cos(this._rotation / 57.3),
})
.color('red')
.bind("enterframe", function() {
this.x += this.xspeed;
this.y -= this.yspeed;
//destroy if it goes out of bounds
if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) {
this.destroy();
}
});
}
}).bind("enterframe", function() {
if(this.move.right) this.rotation += 5;
if(this.move.left) this.rotation -= 5;
//acceleration and movement vector
var vx = Math.sin(this._rotation * Math.PI / 180) * 0.3,
vy = Math.cos(this._rotation * Math.PI / 180) * 0.3;
//if the move up is true, increment the y/xspeeds
if(this.move.up) {
this.yspeed -= vy;
this.xspeed += vx;
} else {
//if released, slow down the ship
this.xspeed *= this.decay;
this.yspeed *= this.decay;
}
//move the ship by the x and y speeds or movement vector
this.x += this.xspeed;
this.y += this.yspeed;
//if ship goes out of bounds, put him back
if(this._x > Crafty.viewport.width) {
this.x = -64;
}
if(this._x < -64) {
this.x = Crafty.viewport.width;
}
if(this._y > Crafty.viewport.height) {
this.y = -64;
}
if(this._y < -64) {
this.y = Crafty.viewport.height;
}
}).collision()
.onHit("bullet", function(e) {
//basically the bullet is color A and hits ship B and changes the color to ship A
//bullets are based on ship A
//red to green
if(e.color() != 'red'){
/*
if(e.color() === "#FF0000" && this.start_color === "#00FF00")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
//red to blue
} else if(e.color === "#FF0000" && this.color === "#0000FF")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
}
*/
//green to red
if(e.color() === "#00FF00")
{
this.color(this.color() + ("#010000" - "#000001") * e.radius);
}
/*
//green to blue
else if(e.color === "#00FF00" && this.color === "#0000FF")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
}
*/
//blue to red
else if(e.color() === "#0000FF")
{
this.color(this.color() + ("#010000" - "#000001") * e.radius);
}
/*
//blue to green
else (e.color === "#0000FF" && this.color === "#00FF00")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
}
*/
if(this.color() === e.color()){
Crafty.scene("end");
}
this.xspeed = this.xspeed - .1*e.xspeed;
this.yspeed = this.yspeed - .1*e.yspeed;
e[0].obj.destroy();
}
}).onHit("player", function(e) {
var diff = "#ff" - (this.color()>>4);
this.color(this.color() + (.2*diff) << 4);
if(e.color() === "green") {
this.color(this.color() - (.2*diff) << 2);
}
else {
this.color(this.color() - .2*diff);
}
this.xspeed = this.xspeed - e.xspeed;
this.yspeed = this.yspeed - e.yspeed;
});
});
EDIT: I managed to take out the comments and some irrelevant code
I fixed the error by basically making a new read to main in the html file and deleting the $(document) prompt. Thanks for all your help!