CANVAS GAME - TITLE SCREEN

  • (2 Pages)
  • +
  • 1
  • 2

20 Replies - 743 Views - Last Post: 13 February 2014 - 09:30 AM

#1 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 11:08 AM

Hey guys,
So i'm supposed to make a canvas game
which i did
but im having trouble with making a title screen to my game

var render = function () {
            if (bgReady) {
                ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
            }

            if (imageReady) {
                ctx.drawImage(image, i2.x, i2.y, image.width, image.height);
            }
            
        };



I have this code that draws my background image onto the canvas as well as the objects onto the screen


However, i cant get it to click on the title image and then load the game image

Any suggestions?

This post has been edited by PSCA: 12 February 2014 - 11:09 AM


Is This A Good Question/Topic? 0
  • +

Replies To: CANVAS GAME - TITLE SCREEN

#2 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1398
  • View blog
  • Posts: 3,094
  • Joined: 05-April 11

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 11:45 AM

What title image? Is the variable 'image' the title image?
Where are you listening for clicks?
I don't think you have provided enough code or details about your problem
Was This Post Helpful? 0
  • +
  • -

#3 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 12:26 PM

So the code i provided is only for tha actual game at this point
so the background image and the objects in the game

I need a image to come up before the game image
and then when you click on it.. it takes you to the actual game
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,865
  • Joined: 30-April 10

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 12:28 PM

You could create a click event listener on the canvas of the mouse is in a certain x,y area.
Was This Post Helpful? 0
  • +
  • -

#5 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 12:30 PM

How would i vbe able to do that

Thoughts:
i need the click event on the background image... and then after the click for the objects to come up
would i be able to do that under the render function/
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,865
  • Joined: 30-April 10

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 01:08 PM

If the mouse is in a certain area of the canvas you would allow the user to use the click event on the canvas.
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 383
  • View blog
  • Posts: 1,383
  • Joined: 15-January 14

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 01:34 PM

It sounds like you need to just draw the title image on top of everything else, and put a click handler on it to remove the image.
Was This Post Helpful? 0
  • +
  • -

#8 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 02:21 PM

yeah i have managed to get the image working
i cant get the mouse event
Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 383
  • View blog
  • Posts: 1,383
  • Joined: 15-January 14

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 02:27 PM

What happens when you click? Are there error messages in the console? How are you setting up the handler?
Was This Post Helpful? 0
  • +
  • -

#10 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 02:29 PM


var render = function () {
            if (bgReady) {
                ctx.drawImage(coverImage,0,0,canvas.width, canvas.height); //this is the title image
                ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
            }

            if (imageReady) {

                ctx.drawImage(image, i2.x, i2.y, image.width, image.height);
            }
        };



can i put the handler inside this function?
Was This Post Helpful? 0
  • +
  • -

#11 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 383
  • View blog
  • Posts: 1,383
  • Joined: 15-January 14

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 02:45 PM

You can put the handler wherever you want, just put a click handler on the coverImage element.
Was This Post Helpful? 0
  • +
  • -

#12 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 02:54 PM

I dont understand how i would do that if i have to call the same function
Was This Post Helpful? 0
  • +
  • -

#13 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 03:52 PM

var render = function () {
            if (bgReady) {
                ctx.drawImage(coverImage,0,0,canvas.width, canvas.height); //this is the title image
                
                coverImage.click = ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
            }
            if (imageReady) {
                ctx.drawImage(image, i2.x, i2.y, image.width, image.height);
            }
        };



Or shouuld i call it from my HTML page instead of jscript
Im quite confused at this point
Was This Post Helpful? 0
  • +
  • -

#14 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 383
  • View blog
  • Posts: 1,383
  • Joined: 15-January 14

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 04:03 PM

I see that. The idea is to draw the canvas as you already were, with the background, other game elements, etc. Then, after those are drawn (or I guess before, I don't think it matters), you draw the title image on top of everything else on the canvas. The title image needs a click handler to remove itself from the canvas, leaving the canvas with the other game stuff. Clicking on the title image shouldn't do anything else to the canvas, it should just remove itself.

coverImage.onclick = function() {coverImage.parentNode.removeChild(coverImage);}
Was This Post Helpful? 0
  • +
  • -

#15 PSCA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 10-October 12

Re: CANVAS GAME - TITLE SCREEN

Posted 12 February 2014 - 04:12 PM

var render = function () {
            if (bgReady) {
                                ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
				ctx.drawImage(coverImage,0,0,canvas.width, canvas.height);
				coverImage.onclick = function() {coverImage.parentNode.removeChild(coverImage);} 
            }
          if (imageReady) {
                ctx.drawImage(image, i2.x, i2.y, image.width, image.height);
            }
        };




So logically, i have my background image.. im loading a cover image on top.. and then the cover image should hide when i click
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2