shooter spel, startbutton laden error (geen next screen in canvas)

Status
Niet open voor verdere reacties.

herowarfare

Gebruiker
Lid geworden
19 jan 2013
Berichten
5
Ik heb 1 probleem, wanneer ik van mijn 1ste background naar het spel background via een .png onlick functie wil komen dan krijg ik de volgende error in firebug:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught An error has occured. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
a._testHit
a._getObjectsUnderPoint
a._handleMouseDown
(anonymous function)

Code:
// JavaScript Document
//1267*400
var canvas = document.getElementById('Gamecanvas');
var stage = new Stage(canvas);
var canvas;
var stage;
var wolk1NaarRechts = -200;
var wolk2NaarRechts = -1024;
var wolk3NaarRechts = 0;
var wolk4NaarRechts = -800;
var wolk1imp = new Image();
var wolk2imp = new Image();
var wolk3imp = new Image();
var wolk4imp = new Image();
var cartmanimp = new Image(); 
var sterimp = new Image(); 
var startachtergrondimp = new Image();
var achtergrondimp = new Image();
var gameoverachtergrond = new Image(); 
var startimp = new Image();
var start;
var startimp;
var herlaadknop;
var herlaadknopimp;
var links = false;
var boven = false;
var rechts = false;
var onder = false;
var vuur = false;
var enter = false;
var game = false;
var startSpel = false;
var reloadSwitch = false;
var killsTxt = new Text(kills, "30px OrsonCasual", "#fff");
var livesTxt = new Text("30px OrsonCasual", "#fff");
var gameoverTxt = new Text(kills, "18px Arnold", "#292929");
var wolk1;
var wolk2;
var wolk3;
var wolk4;
var kills = 0;
var levens = 3;
var speed = 5;
var cartman;
var chaos;
var vijand;
var vijanddood;
var ster;
var e;
wolk1 = new Bitmap(wolk1imp);
wolk2 = new Bitmap(wolk2imp);
wolk3 = new Bitmap(wolk3imp);
wolk4 = new Bitmap(wolk4imp);
cartman = new Bitmap(cartmanimp);
ster = new Bitmap(sterimp);



cartmanimp.src = "images/Cartman.png";
sterimp.src = "images/ster.png";

// Aanmaken start
startimp = new Image()
startimp.src = "images/start.png";
herlaadknopimp = new Image()
herlaadknopimp.src = "images/herlaadknop.png";

// Aanmaken achtergronden
startachtergrondimp = new Image();  
startachtergrondimp.src = "images/startachtergrond.png";
achtergrondimp = new Image();  
achtergrondimp.src = "images/Achtergrond2.png";
gameoverachtergrondimp = new Image();  
gameoverachtergrondimp.src = "images/gameoverbackground.png";






// Laden van het spel
function laadSpel()
{
	//ales van canvas verwijderen
	stage.removeChild(achtergrond1);
	stage.removeChild(start);
	
	// Benodigde onderdelen aan canvas toevoegen
	//geluid
	
	achtergrond2 = new Bitmap(achtergrondimp);
	achtergrond2.x = achtergrond2.y = 0;
	stage.addChildAt(achtergrond2,0);
	
	cartman = new Bitmap(cartmanimp);
	cartman.x = 150;
	cartman.y = 390;
	stage.addChildAt(cartman,2);
	
	startSpel = true;
}	


new Ticker.setFPS(25);
Ticker.addListener(window);
window.onload = init;
stage.update();

//achtergrond plaatsen en speler plaatsen
function init()
{
	tick();
	laadSpeler();
	laadKills();
	laadLevens();
	checkKills();
	checkLevens();
	start = new Bitmap(startimp);
	start.x = 380;
	start.y = 20;
	stage.addChildAt(start,2);
	stage.addChildAt(gameoverTxt, 4);
	if (levens == 0) 
		{       
			endGame();
		}
		
		if(vuur == true && ster == null)
		{
			vuurSter();
		}
		if(ster != null)
		{
			beweegSter();
		}
	
	achtergrond1 = new Bitmap(startachtergrondimp);
	achtergrond1.x = achtergrond1.y = 0;
	stage.addChildAt(achtergrond1,0);
	
	start = new Bitmap(startimp);
	start.x = 380;
	start.y = 400;
	stage.addChildAt(start,2);
	stage.addChildAt(gameoverTxt, 4);
	
	
	//cookie
	getCookie();
	setCookie();
	checkCookie();
}





//tickfunctie maken
function tick()
{
	control();
	laadWolken();	
	beweegSpeler();
	beweegWolken();	
	if(start != null)
	{
		start.onClick = laadSpel; 
	}
	//reloadbutton
	if(herlaadknop != null)
	{
		herlaadknop.onClick = herlaadSpel;
	}
	if(startSpel == true)
	{
		laadKills();
		laadLevens();
		checkKills();
		checkLevens();
		beweegSpeler();
		
		if (lives == 0) 
		{       
			endGame();
		}
	if(vuur == true && ster == null)
		{
			vuurSter();
		}
		if(ster != null)
		{
			beweegSter();
		}
	if (vijand == null)
	{
	laadChaos();
	}
	else
	{
	beweegChaos();
	}
	}
	stage.update();
}


// Eerste keer laden van de game
function laadSpel()
{
	// Overbodige onderdelen van de stage verwijderen
	stage.removeChild(achtergrond1);
	stage.removeChild(start);
	
	
	achtergrond2 = new Bitmap(myBg2);
	background2.x = background2.y = 0;
	stage.addChildAt(background2,0);
	
	arrows = new BitmapAnimation(myArrows);
	arrows.x = 670;
	arrows.y = 380;
	arrows.gotoAndPlay("idle");
	stage.addChildAt(arrows,1);
	
	character = new BitmapAnimation(myChar);
	character.x = 150;
	character.y = 390;
	character.gotoAndPlay("right");
	stage.addChildAt(character,2);
	
	// Startgame op true zetten zodat de andere functies binnen de tick actief worden
	startGame = true;
}	

// Laden van de game na game over
function herlaadSpel()
{
	// Overbodige onderdelen van canvas verwijderen
	stage.removeChild(achtergrond3);
	//reloadbutton
	stage.removeChild(herlaadknop);
	stage.removeChild(gameoverTxt);
	
	// Benodigde onderdelen aan canvas toevoegen
	
	achtergrond2 = new Bitmap(achtergrondimp);
	achtergrond2.x = achtergrond2.y = 0;
	stage.addChildAt(achtergrond,0);
	
	cartman = new Bitmap(cartmanimp);	
	cartman.x = 512;
	cartman.y = 250;
	stage.addChildAt(cartman, 17);
	
	
	kills = 0;
	speed = 5;
	startSpel = true;
}


// Game over bij 0 levens
function endGame()
{	
	// Overbodige onderdelen van canvas verwijderen
	stage.removeChild(vijand);
	stage.removeChild(cartman);
	stage.removeChild(ster);
	stage.removeChild(killsTxt);
	stage.removeChild(livesTxt);
	stage.removeChild(usernameTxt);
	stage.removeChild(achtergrond2);
		
	// Benodigde onderdelen aan canvas toevoegen
	achtergrond3 = new Bitmap(gameoverachtergrondimp);
	achtergrond3.x = achtergrond3.y = 0;
	stage.addChildAt(achtergrond3,0);	
	
	gameoverTxt.text = getCookie("username") + ", Je hebt " + score + " X professor CHAOS verslagen";
	gameoverTxt.x = 150;
	gameoverTxt.y = 340;
	stage.addChild(gameoverTxt);
	
	herlaadknop = new Bitmap(herlaadknopimp);
	reloadSwitch = true;
	herlaadknop.x = 600;
	herlaadknop.y = 200;
	stage.addChildAt(herlaadknop,2);
	
	// Reset level en lives en zet de switch in de tikker om
	levens = 3;
	startSpel = false;
}







function vuurSter()
{
	if (ster == null)
	{
		ster = new Bitmap(sterimp);
		ster.x = cartman.x;
		ster.y = cartman.y;
		stage.addChild(ster);
		stage.update();
		console.log(ster);
	}
}
function beweegSter()
{
	if (ster.x < +700)
	{
		ster.x -= -20;
	}
	else
	{
		stage.removeChild(ster);
		ster = null;
	}
}




// Meet de afstand tussen 2 objecten
function distance(obj1, obj2) 
{          
	var difx = obj2.x - obj1.x;          
	var dify = obj2.y - obj1.y;                
	return Math.sqrt( (difx*difx) + (dify*dify) );  
}

function hitTest()
{
	if(ster != null && vijand != null)
	{
		if(distance(ster, vijand)<=100)
		{
			stage.removeChild(ster);
			ster = null;
			vijand.gotoAndPlay("dead");
			deadEnemy = true;
		}
	}

}
// vi
//cartman plaatsen
function laadSpeler()
{
	cartman.x = 512;
	cartman.y = 250;
	stage.addChildAt(cartman, 17);
}

// chaos laden
function laadChaos()
{
	vijand = new BitmapAnimation(chaos);
	vijand.gotoAndPlay("idle");
	stage.addChildAt(vijand,6);
	vijand.x = 900;
	vijand.y = Math.floor(Math.random() * 200) + 50;
}

function beweegChaos()
{
if(vijand.x > -10)
{
vijand.x += -6 ;
}
else
{
stage.removeChild(vijand);
vijand = null;
lives -= 1;

}
}

// Kills laden
function laadKills()
{
	killsTxt.x = 130;
	killsTxt.y = 49;
	stage.addChildAt(killsTxt, 4);
}

// Kills bijhouden
function checkKills()
{
	killsTxt.text = "" + kills;
	
	if(kills >= 10)
	{
		speed = 8;
	}
	if(kills >= 20)
	{
		speed = 12;
	}
	if(kills >= 30)
	{
		speed = 16;
	}
}

// Levens laden
function laadLevens()
{
	livesTxt.x = 316;
	livesTxt.y = 49;
	stage.addChildAt(livesTxt, 4);
}

// Levens bijhouden
function checkLevens()
{
	livesTxt.text = levens;
}

PS. "start" is het plaatje, dus waar de .onclick voor zou moeten werken
"achtergrond1" is the first background
"startachtergrond" is also the first background

en het maakt niet uit waar in het canvas ik klik ik krijg overal dezelfde error, het lijkt wel of hij het plaatje niet eens herkent dus kan het ook niet doorlinken..

Ben er al een paar dagen aan bezig maar kom er niet aan uit

HTML:
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js">
</script>

</head>
<body >
<div id="container">
<canvas id = "Gamecanvas"
width ="1267"
height="400"></canvas>
	<script src="Cartmancop.js"></script> 
    </div>
</body>
</html>
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan