Copy link to clipboard
Copied
Hi friends,
I am transitioning from AS3 to HTML5 Canvas and javascript...I create programs with basic interactivity. I am trying to recreate a simple interactive action using Javascript that I achieved easily in AS3.
I have three buttons that must be clicked in consecutive order for an event to happen. This was very easy to do with AS3 using:
var checkString:String = "";
then,
checkString += "1";
check(); ...in button1 function
checkString += "2";
check(); ...in button2 function
checkString += "3";
check(); ...in button3 function
then,
function check():void
{
if(checkString == "123")
{
something happens
}
else
{
something else happens
if(checkString.length >= 3)
{
clearString();
}
}
}
function clearString():void
{
checkString = "";
}
I am trying to do the same thing in Javascript and this is what I have, could you please help me correct what is wrong?:
var code= "";
this.Note1.addEventListener("click", Note1go.bind(this));
this.Note2.addEventListener("click", Note2go.bind(this));
this.Note3.addEventListener("click", Note3go.bind(this));
function Note1go() {
code + "1";
check();
}
function Note2go() {
code + "2";
check();
}
function Note3go() {
code + "3";
check();
}
function check()
{
if(code == "123")
{
clearCode();
this.Note1.visible=false;
}
else
{
if(code.length >= 3)
{
clearCode();
}
}
}
function clearCode()
{
code = "";
}
Hi Benay
Did you make sure that the buttons are always pressed in that consecutive order? Not that your code string can be i.e. "213".
And you should code i.e.
function Note1go() {
code += "1";
check();
}
like you did in Actionscript.
Klaus
Copy link to clipboard
Copied
Hi Benay
Did you make sure that the buttons are always pressed in that consecutive order? Not that your code string can be i.e. "213".
And you should code i.e.
function Note1go() {
code += "1";
check();
}
like you did in Actionscript.
Klaus
Copy link to clipboard
Copied
Debugging 101: Always re-examine your assumptions. You haven't said exactly how your code is failing, but I'm guessing it has to do with code not being set correctly. In that case, your first response should have been to verify that all your functions and event handlers are scoping to the same variable by that name. You've assumed this would be the case, but it very possibly is not. So in every function that touches code, before it does so, insert console.log(code); Then run the project, open your browser's dev console, and see what it has to say.
Copy link to clipboard
Copied
This guidance was EXTREMELY helpful! Thank you!! I was able to complete my simple interactive game with the code in my reply.
Copy link to clipboard
Copied
Thank you both for your help! I was able to create my game and check the log with this successful code: (Small successes for a beginner!)
var code1= "";
this.Circle1Button.addEventListener("click", Circle1go.bind(this));
this.Circle5Button.addEventListener("click", Circle5go.bind(this));
this.Circle14Button.addEventListener("click", Circle14go.bind(this));
this.Circle18Button.addEventListener("click", Circle18go.bind(this));
function Circle1go() {
code1 += "1";
check1();
console.log(code1);
}
function Circle5go() {
code1 += "5";
check1();
console.log(code1);
}
function Circle14go() {
code1 += "A4";
check1();
console.log(code1);
}
function Circle18go() {
code1 += "A8";
check1();
console.log(code1);
}
function check1()
{
if(code1.match ("15A4A8")){
createjs.Sound.play("SELsound6", false, 0, 0, 0, 1);
clearCode();}
}
function clearCode()
{
code1 = "";
}