Converting ActionScript to HTML5 Canvas

Many thanks!

I've spent the past 48 hours slowly going through the ActionScript code (400 lines) and I'm determined to give it a go in relation to converting this to JavaScript for use in HTML5 Canvas.

However, some of the sections seem quite daunting to me - for instance, I've chosen three random original ActionScript code examples below:  

-----------------------------------------------

function rotateUp(event:MouseEvent):void {
switch (currentState) {
case "hot1" :
dialMC.hot1.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.hot1,dialMC.cold2)) {
dialMC.hot1.rotation+=3.75;
} else {
dialMC.hot1.rotation+=-3.75;

if (dialMC.hot1.timeValue==24) {
dialMC.hot1.timeValue=0.5;
} else {
dialMC.hot1.timeValue+=0.5;
}
}
break;
case "hot3" :
dialMC.hot3.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.hot3,dialMC.cold4)) {
dialMC.hot3.rotation+=3.75;
} else {
dialMC.hot3.rotation+=-3.75;
if (dialMC.hot3.timeValue==24) {
dialMC.hot3.timeValue=0.5;
} else {
dialMC.hot3.timeValue+=0.5;
}
}
break;
case "cold4" :
dialMC.cold4.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.cold4,dialMC.hot1)) {
dialMC.cold4.rotation+=3.75;
} else {
dialMC.cold4.rotation+=-3.75;
if (dialMC.cold4.timeValue==24) {
dialMC.cold4.timeValue=0.5;
} else {
dialMC.cold4.timeValue+=0.5;
}
}
break;
case "cold2" :
dialMC.cold2.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.cold2,dialMC.hot3)) {
dialMC.cold2.rotation+=3.75;
} else {
dialMC.cold2.rotation+=-3.75;
if (dialMC.cold2.timeValue==24) {
dialMC.cold2.timeValue=0.5;
} else {
dialMC.cold2.timeValue+=0.5;
}
}
break;
case "time" :
dialMC.rotation+=7.5;
time+=0.5;
if (time==24.5) {
time=0.5;
}
break;

default :
trace("None of the above were met");
}
}

-----------------------------------------------

var feedbackText:TextField = new TextField();
feedbackText.multiline=true;
feedbackText.wordWrap=true;
feedbackText.defaultTextFormat=feedbackTextFormat;
feedbackText.embedFonts=true;//added
feedbackText.antiAliasType=AntiAliasType.ADVANCED;
//feedbackText.autoSize="left";
feedbackText.selectable=false;
feedbackText.x=50;
feedbackText.y=455;
feedbackText.width=500;
addChild(feedbackText);

-----------------------------------------------

function submitAnswer(e:MouseEvent):void {
/*trace("start");
trace(dialMC.hot1.timeValue);
trace(dialMC.hot3.timeValue);
trace(dialMC.cold2.timeValue);
trace(dialMC.cold4.timeValue);*/
trace(time);
if (dialMC.hot1.timeValue==5&&dialMC.hot3.timeValue==18&&dialMC.cold2.timeValue==8&&dialMC.cold4.timeValue==23&&time==20&&heatingSlide.x==475) {
feedbackText.text="Correct";

} else if (dialMC.hot1.timeValue==5&&dialMC.hot3.timeValue==18&&dialMC.cold2.timeValue==8&&dialMC.cold4.timeValue==23&&time==20) {
incorrectAttempts+=1;
feedbackText.text="You've correctly set the time and tappets, but you need to select the correct heating setting";
} else {
incorrectAttempts+=1;
feedbackText.text="That's not right, please try again";
}
if (incorrectAttempts>=3) {
feedbackText.text="You may want to go back to the previous screen for an explanation on how the programmer works";
incorrectAttempts=0;
}
}

-----------------------------------------------

I have looked around for resources/information in relation to converting Actionscript to EaselJS/Javascript but at the moment I am wondering whether I am out of my depth in trying this rewrite?

Really would like to try mind!

Cheers,

John

Many thanks for replying - I'll start this interesting journey today!

I'm not quite a novice in scripting (but not far off!) but I'll immerse myself in Actionscript and easeljs/JavaScript, and give it a go. At least I know the Actionscript version works, so this gives me a grounding to, hopefully, rewrite section by section.

Cheers,

John