Jump to content

HTML5 canvas menu


2los4u

Recommended Posts

Hi everyone.-

 

I have downloaded a example of a HTML5 canvas menu, it works ok, but, the buttons have a alert message and i want to change that so that each button could open a new web page, the problem i find is that i dont know how to create a id for each button at code i know that with html you can acheve this but i need it to be with code, can someone please help me, heres also the code, thanks

source.zip

Link to comment
Share on other sites

Go to line 184 of fire_menu.js and add something like this...

//alert(buttons[i].text + ' was pushed');

switch (i){
 case 0:
   location.assign('page1.html');
   break;
 case 1:
   location.assign('page2.html');
   break;
 case 2:
   location.assign('page3.html');
   break;
 case 3:
   location.assign('page4.html');
   break;   
 default:
   alert('[' + buttons[i].text + ' unknown]');
   break;
}

--updated 8/23--

Link to comment
Share on other sites

Why not use what's already available

 

add extra parameter 'url'

 

// Button object

function Button(x, y, w, h, state, image, text, url) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.state = state;
this.imageShift = 0;
this.image = image;
this.text = text;
this.url = url;
}

 

// Prepare 3 different buttons
buttons.push(new Button(0, 10, 245, 62, 'normal', buttonImage, 'button #1', 'page1.html'));
buttons.push(new Button(250, 10, 245, 62, 'normal', buttonImage, 'button #2', 'page2.html'));
buttons.push(new Button(500, 10, 245, 62, 'normal', buttonImage, 'button #3', 'page3.html'));
buttons.push(new Button(750, 10, 245, 62, 'normal', buttonImage, 'button #4', 'page4.html'));

 

// Onmouseup event handler
canvas.onmouseup = function(e) {
var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

for (var i = 0; i < buttons.length; i++) { // Reset states for buttons
if (mouse.x > buttons.x && mouse.x < buttons.x + buttons.w && mouse.y > buttons.y && mouse.y < buttons.y + buttons.h) {
//alert(buttons.text + ' is pushed');
location.assign(buttons.url);
}

buttons.state = 'normal';
buttons.imageShift = 0;
}
}
}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...