/    Sign up×
Community /Pin to ProfileBookmark

Problem updating new stage image (shooter game)

I got 1 problem when i try to get from my homescreen to the playscreen by an image.onclick function i get the next error:
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)

this is the 3rd day i am trying i can’t figure it out can anyone help me?

[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;
}

[/CODE]

PS. “start” is the picture/button on the first screen
“achtergrond1” is the first background
“startachtergrond” is also the first background

because it is in dutch i think it would be better to tell this

And it does not matter where i click in the screen i get the same error over and over, it looks like that it does not even recognize the png because it responds on mouseclick on the whole screen.

And i don’t know if it matters but the backgrounds are .PNG

FUNCTION LAADSPEL loads the second background removing the first and the start button, but it never comes to that point..

HTML piece:

[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>

[/CODE]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @Yamitommie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...