www.webdeveloper.com
Results 1 to 1 of 1

Thread: Problem updating new stage image (shooter game)

Threaded View

  1. #1
    Join Date
    Jan 2013
    Posts
    4

    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;
    }
    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>
    Last edited by Yamitommie; 01-18-2013 at 04:59 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles