Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Html5 Canvas Game Drawing

    I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari.

    Here is a picture of what it renders in Chrome:

    What is is supposed to look like and is in Firefox:


    Here is my set up for drawing on the canvas:
    Code:
    var canvas = null;
    var c2d = null;
    //...
    window.onload = init;
    function init() {
    	canvas = document.getElementById('canvas');
    	c2d = canvas.getContext('2d');
    	setInterval( step, 1000/FPS );
    	//...
    	//c2d.setTransform(1,0,0,1,0,0); // reset to identity <--Do I need this?
    }
    Below is the game loop function. Am I clearing the canvas correctly because it does not clear the screen? Also am I using the save and restore functions correctly? Each asteroid and player drawn is at a different of position and rotation so am I doing it correct to draw them?
    Code:
    function step() {
    	//...
    	canvas.width = canvas.width; //clear canvas PROBLEM
    
            //Things I have tried:
    	//canvas.height = canvas.height; //clear canvas 
    	//c2d.clearRect(0, 0, canvas.width, canvas.height);
    
    	for (u=0;u<asteroids.length;u++) {
    		c2d.save();
    		asteroids[u].draw();
    		c2d.restore();
    	}
    	c2d.save();
    	player.draw();
    	c2d.restore();
    	
    	c2d.strokeStyle = "#000000";
    	c2d.stroke();
    }
    Below is the Asteroid and Player drawing functions. The Asteroid is a polygon and the Player is a triangle. Both rotate and are draw correctly but should I be passing a reference to the drawing reference?
    Code:
    function Asteroid_draw() {
    	c2d.translate( this.x, this.y );
    	c2d.rotate(this.angle);
    	for (i=0;i<this.points_x.length-1;i++) {
    		c2d.moveTo(this.points_x[i],this.points_y[i]);
    		c2d.lineTo(this.points_x[i+1],this.points_y[i+1]);
    	}
    	c2d.moveTo(this.points_x[0],this.points_y[0]);
    	c2d.lineTo(this.points_x[this.points_x.length-1],this.points_y[this.points_x.length-1]);
    }
    function Player_draw() {
    	c2d.translate( this.x, this.y );
    	c2d.rotate(this.angle);
    	//Points {0,-12}{7,5}{-7,5}
    	c2d.moveTo(0,-12);
    	c2d.lineTo(7,5);
    	c2d.moveTo(7,5);
    	c2d.lineTo(-7,5);
    	c2d.moveTo(-7,5);
    	c2d.lineTo(0,-12);
    }
    Any help is appreciated.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I kinda winged it. You could post all your code for real solution.
    Sorry I renamed your c2d variable. I really like calling it ctx short for context

    Code:
    <script>
    <script>
    var canvas = null;
    var c2d = null;
    //...
    window.onload = init;
    function init() {
    asteroids=[{x:470,y:290,angle:1.71,points_x:[-30,-10,0,20,40,20,-10],points_y:[ 0,-20,-50,-30,0,20,20]},{x:270,y:290,angle:1.71,points_x:[-30,-10,0,20,40,20,-10],points_y:[ 0,-20,-50,-30,0,20,20]}]
    player={x:50,y:50,angle:1.71,inertia:0,inertiaAngle:0}
    	canvas = document.getElementById('canvas');
    	ctx = canvas.getContext('2d');
    	setInterval( step, 60 );
    }
    
    function step() {
    	for (i in asteroids){asteroids[i].angle+= i%2==0?.05:-.05}
    ctx.fillStyle="rgba(0,0,0,.5)"
    	ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    	for (u=0;u<asteroids.length;u++) {
    		ctx.save();
    ctx.beginPath()
    		Asteroid_draw(asteroids[u]);
    ctx.closePath()
    ctx.strokeStyle = "#00ff00";
    	ctx.stroke();
    		ctx.restore();
    	}
    	ctx.save();
    ctx.beginPath()
    	Player_draw(player);
    ctx.closePath()
    
    	ctx.restore();
    	
    	ctx.strokeStyle = "#00ff00";
    	ctx.stroke();
    
    player.x<0?player.x=canvas.width:player.x%=canvas.width
    player.y<0?player.y=canvas.height:player.y%=canvas.height
    
    if(player.inertia>0)player.inertia-=.01
    
    player.x+=Math.sin(player.inertiaAngle)*player.inertia;player.y+=-Math.cos(player.inertiaAngle)*player.inertia
    }
    function Asteroid_draw(obj) {
    
    	ctx.translate( obj.x, obj.y)
    	ctx.rotate(obj.angle);
    ctx.moveTo(obj.points_x[0],obj.points_y[0]);
    	for (i=0;i<obj.points_x.length-1;i++) {
    		
    		ctx.lineTo(obj.points_x[i],obj.points_y[i]);
    	}
    ctx.lineTo(obj.points_x[0],obj.points_y[0]);
    
    	//ctx.moveTo(obj.points_x[0],obj.points_y[0]);
    	//ctx.lineTo(obj.points_x[obj.points_x.length-1],obj.points_y[obj.points_x.length-1]);
    }
    function Player_draw(obj) {
    	ctx.translate( obj.x, obj.y );
    	ctx.rotate(obj.angle);
    	//Points {0,-12}{7,5}{-7,5}
    	ctx.moveTo(0,-12);
    	ctx.lineTo(7,5);
    	ctx.moveTo(7,5);
    	ctx.lineTo(-7,5);
    	ctx.moveTo(-7,5);
    	ctx.lineTo(0,-12);
    }
    document.onkeydown=function(event){keyDown(event)};
    
    function keyDown(event) { 
    
    		if (event.keyCode == 37) {player.angle-=.1}/*left*/
    	else 	if (event.keyCode == 39) {player.angle+=.1}/*right*/
    	else 	if (event.keyCode == 38) {player.inertia+=.1;player.inertiaAngle=(player.inertiaAngle+player.angle)/2}/* up*/
    	else 	if (event.keyCode == 40) {player={x:50,y:50,angle:1.71,inertia:0,inertiaAngle:0}}/*down*/
    
    }
    
    
    </script>
    <canvas id="canvas" width="600" height="600"></canvas>
    <canvas id="canvas" width="600" height="600"></canvas>
    Last edited by TinyScript; 03-21-2010 at 08:13 AM. Reason: added key events because I love asteroids!

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It worked! Thank you TinyScript so much!

    I guess the clearing wasn't causing the problem because any one I choose now works.

    My code now is:
    Code:
    c2d.save();
    c2d.beginPath();
    /* Drawing functions  */
    c2d.closePath();
    c2d.strokeStyle = "#000000";
    c2d.stroke();
    c2d.restore();
    The problem must have been caused by the repeated saving and storing of the paths without them being rendered or something.
    Last edited by JuliaF; 03-21-2010 at 05:05 PM. Reason: Mentioning TinyScript's name


  •  

    Tags for this Thread

    Posting Permissions

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