In Adobe Animate HTML5 Canvas (Create.js/Easel.js), I am trying to set the state of a button, but not working with various code:
this.retinoscopeButton.addEventListener("click", retinoscope.bind(this));
/*function retinoscope(evt) {
var retinoscopeButtonState = evt.currentTarget.state = !evt.currentTarget.state;
if (retinoscopeButtonState) {
alert(retinoscopeButtonState);
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
} else {
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
}
}*/
var retinoscopeButtonState = 'up';
function retinoscope(evt){
if (retinoscopeButtonState == 'up'){
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
retinoscopeButtonState = 'down';
} else if (retinoscopeButtonState == 'down'){
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
retinoscopeButtonState = 'up';
}
}
This works for me...
Note that this is using a MovieClip with three keyframes for the different 'states' in the button MC retinoscopeButton
var toggle;
if (!root.retinoscopeButton.hasEventListener("click")) {
toggle = false;
root.retinoscopeButton.addEventListener("click", retinoscopeButtonClickHandler.bind(this));
}
root.retinoscopeButton.addEventListener("mouseover", retinoscopeButtonRollOverHandler.bind(this));
root.retinoscopeButton.addEventListener("mouseout", retinoscopeButtonRollOutHandler.bind(this));
function retinoscopeButtonClickHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(2);
toggle = true;
} else if (toggle == true) {
root.retinoscopeButton.gotoAndStop(0);
toggle = false
}
}
function retinoscopeButtonRollOverHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(1);
}
}
function retinoscopeButtonRollOutHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(0);
}
}
Modular refactoring of javascript is in progress. When executing the codes below in the game class start method, an error like this.initTimer is not a function is output. Not only initTimer but also the code below shows an error like is not a function. How can I solve this?
game.js
'use strict';
import * as sound from './sound.js';
import Field from './field.js';
export default class Game{
constructor(gameDuration){
this.gameDuration = gameDuration;
this.gameTimer = document.querySelector('.game__timer');
this.gameField = new Field();
this.gameField.setClickListener(this.onFieldClick);
this.startBtn = document.querySelector('.game__startBtn');
this.startBtn.addEventListener('click', this.start);
this.started = false;
this.timer = undefined;
this.level = 0;
}
onFieldClick = (stage, win) => {
if(!this.started){
return;
}
if(this.level == 0){
if(stage == 'first' && win == 'win'){
this.finish('win');
}else if(stage == 'first' && win == 'lose'){
this.finish('lose');
}
}
if(this.level == 1){
if(stage == 'second' && win == 'win'){
this.finish('win');
}else if(stage == 'second' && win == 'lose'){
this.finish('lose');
}
}
if(this.level == 2){
if(stage == 'third' && win == 'win'){
this.finish('finish');
}else if(stage == 'third' && win == 'lose'){
this.finish('lose');
}
}
}
onItemClick(button) {
if(button == 'next'){
++this.level;
}
if(button == 'finish'){
this.level = 0;
}
start();
}
setGameStopListener(onGameStop){
this.onGameStop = onGameStop;
}
start() {
this.started = true;
this.initTimer();
this.gameField.hideStartContent;
this.setBackgroundImg();
this.showTimer();
sound.playBackground();
this.startTimer();
}
finish(win){
this.started = false;
this.stopTimer();
sound.stopBackground();
if(win == 'win' || win == 'finish'){
sound.playWin();
}
if(win == 'lose') {
sound.playAlert();
}
this.onGameStop && this.onGameStop(win);
}
initTimer(){
this.timer = undefined;
}
setBackgroundImg(){
let imgPath = `url(img/game__field/stage${this.level}.jpg)`;
this.gameField.setBackgroundImage(imgPath);
}
showTimer() {
this.gameTimer.style.visibility = 'visible';
}
startTimer() {
let remainingTimeSec = this.gameDuration;
this.updateTimerText(remainingTimeSec);
this.timer = setInterval(() => {
if(remainingTimeSec <= 0) {
clearInterval(timer);
sound.stopBackground();
this.finish('lose');
return;
}
this.updateTimerText(--remainingTimeSec);
}, 1000);
}
updateTimerText(time) {
const minutes = Math.floor(time / 60);
const seconds = time % 60;
this.gameTimer.innerHTML = `${minutes}:${seconds}`;
}
stopTimer() {
clearInterval(this.timer);
}
}
OutPut
game.js:60 Uncaught TypeError: this.initTimer is not a function
at HTMLImageElement.start (game.js:60)
Expected
Sequencing of code inside start
I believe a problem is in event 'click' handler. Without binding, 'this' is prebound to clicked element, in your case to some img inside button.
this.startBtn.addEventListener('click', this.start.bind(this));
I have some problem when I check the function validation, I need when checking all the cassis is true hide the parent div * errors message *
var error_pass = false;
$('#pass').focusout(function(){
check_pass();
error_pass = false;
if(error_pass !== true){
console.log('its showing!');
}else{
$('.test').fadeOut('522');
}
});
function check_pass() {
var fpass= $('#pass').val();
switch(error_pass = true){
case(fpass.length < 6 ? $('#pass-error-message3').css('color','red'):$('#pass-error-message3').css('color','green') ):
$('#pass-error-message3').show();
case(fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1 ? $('#pass-error-message4').css('color','red') : $('#pass-error-message4').css('color','green')):
$('#pass-error-message4').show();
case(fpass.search(/\d/) == -1 ? $('#pass-error-message2').css('color','red'):$('#pass-error-message2').css('color','green')):
$('#pass-error-message2').show();
default:break;
}
}
Use if else statements like this
function validation() {
var error = false;
if (fpass.length < 6) {
error = true;
$('#pass-error-message3').css('color', 'red').show();
} else {
$('#pass-error-message3').css('color', 'green');
}
if (fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1) {
error = true;
$('#pass-error-message4').css('color', 'red').show();
} else {
$('#pass-error-message4').css('color', 'green')
}
if(fpass.search(/\d/) == -1){
error = true;
$('#pass-error-message2').css('color','red').show();
}else{
$('#pass-error-message2').css('color','green');
}
if(error === false){
hideParentDiv(); // Here hide the div
}
}
Much cleaner approach
Hello fellow programmers.
I'm here to ask you a very unusual question. I have created a game and in it when you hit a wall you bounce back but if you are still holding the key to go the direction you were going when you hit it it will just stay still, so I need to tell Unity that an Axis isn't being used anymore, is there a way to do this? Please note that I am using JavaScript and I am aware that it will be removed from Unity and that C# is better so don't comment that I should write code in C# please.
Code--
The movement:
if(Input.GetAxis("Forward") && isMovingBackward == false) {
if(lastDir == "backward") {
deaccelerate();
brake();
braking = true;
canRotLeft = false;
canRotRight = false;
} if(!(lastDir == "backward") && canMoveForw == true) {
accelerate();
isMoving = true;
isMovingForward = true;
isMovingBackward = false;
canRotLeft = true;
canRotRight = true;
lastDirForw();
transform.Translate(Vector3(1, 0, 0) * speed * Time.deltaTime);
}
}
if(!(Input.GetAxis("Forward"))) {
isMovingForward = false;
}
if(!(Input.GetAxis("Backward"))) {
isMovingBackward = false;
}
if(Input.GetAxis("Backward") && isMovingForward == false) {
if(lastDir == "forward") {
deaccelerate();
brake();
braking = true;
canRotLeft = false;
canRotRight = false;
} if(!(lastDir == "forward") && canMoveBack == true) {
accelerate();
isMoving = true;
isMovingBackward = true;
ifMovingForward = false;
breakingBack = false;
canRotLeft = true;
canRotRight = true;
lastDirBack();
transform.Translate(Vector3(1, 0, 0) * -speed * Time.deltaTime);
}
}
The lastDir functions:
function lastDirForw() {
if(collided == true) {
brake();
canMoveBack = false;
lastDir = "backward";
} else {
canMoveBack = true;
lastDir = "forward";
}
}
function lastDirBack() {
if(collided == true) {
brake();
canMoveForw = false;
lastDir = "forward";
} else {
canMoveForw = true;
lastDir = "backward";
}
}
I tried making a jsFiddle for this, but it's not working right (I think because of the alerts I have set up to test my code), so hopefully someone can simply look at my JS and see the problem.
The issue is that when you close the div with the form (#verizoni516) and then re-open it, you get as many alerts as times you have closed the div and re-opened it, instead of the ONE alert I'm intending. Does that make any sense?
Here's the JS:
/*--------------Validation Functions-------------------*/
function chkradio() {
var elem = document.forms['vzi5'].elements['element_0'];
len = elem.length - 1;
chkvalue = '';
sevenPlus = false;
fourToSix = false;
threeMin = false;
for (i = 0; i <= len; i++) {
if(elem[i].checked) chkvalue = elem[i].value;
}
if (chkvalue == '') {
$('#radio-error').fadeIn('fast').effect("bounce", {times:3}, 'fast', function(){
setTimeout(function(){
$('#radio-error').fadeOut('slow');}, 2000);
});
}
if (chkvalue >= 7) {
sevenPlus = true;
} else if (chkvalue >= 4 && chkvalue <= 6) {
fourToSix = true;
} else {
threeMin = true;
}
};
function chkselect() {
var elem = document.forms['vzi5'].elements['element_1'];
len = elem.length - 1;
chkvalue = '';
likeNew = false;
minProb = false;
nonFunc = false;
for (i = 0; i <= len; i++) {
if (elem[i].selected) chkvalue = elem[i].value;
}
if (chkvalue == '') {
elem.focus();
$('#select-error').fadeIn('fast').effect("bounce", {times:3}, 'fast', function(){
setTimeout(function(){
$('#select-error').fadeOut('slow');}, 2000);
});
} else if (chkvalue === 'Like New - No Functional Problems') {
likeNew = true;
} else if (chkvalue === 'Minor Functional Problems') {
minProb = true;
} else {
nonFunc = true;
}
};
function chkbox() {
var elem = document.forms['vzi5'].elements['element_2[]'];
chkvalue = elem.checked;
iUnderstand = true;
if (chkvalue === true) {
iUnderstand;
} else {
iUnderstand = false;
elem.focus();
$('#check-error').fadeIn('fast').effect("bounce", {times:3}, 'fast', function(){
setTimeout(function(){
$('#check-error').fadeOut('slow');}, 2000);
});
}
};
//Calling the validation functions---------------------------
$('#verizon img.apple, #unlocked img.apple').click(function(){
$(this).closest('div').fadeOut(500).animate({"top": "-414px"}, 100).fadeIn('fast', function(){
});
$('#verizon516').animate({"top": "+=557px"}, 500, function(){
$(this).animate({"top": "-=20px"}, 200);
});
$('div.next').click(function(){
chkradio();
chkselect();
chkbox();
if (sevenPlus === true) {
if (likeNew === true && iUnderstand === true) {
alert('Condition is 7+ and functions like new.');
} else if (minProb === true && iUnderstand === true) {
alert('Condition is 7+ and has minor functional problems');
} else if (nonFunc === true && iUnderstand === true) {
alert('Condition is 7+ and device does NOT function.');
} else {
};
};
if (fourToSix === true) {
if (likeNew === true && iUnderstand === true) {
alert('Condition is 4-6 and functions like new.');
} else if (minProb === true && iUnderstand === true) {
alert('Condition is 4-6 and has minor functional problems');
} else if (nonFunc === true && iUnderstand === true) {
alert('Condition is 4-6 and device does NOT function.');
} else {
};
};
if (threeMin === true) {
if (likeNew === true && iUnderstand === true) {
alert('Condition is 1-3 and functions like new.');
} else if (minProb === true && iUnderstand === true) {
alert('Condition is 1-3 and has minor functional problems');
} else if (nonFunc === true && iUnderstand === true) {
alert('Condition is 1-3 and device does NOT function.');
} else {
};
};
});
});
Move the div.next click handler out of the other click handler, it will cause a new handler to get registered every time you click on one of the #verizon img.apple, #unlocked img.apple elements which intern gets called one after another.
/*--------------Validation Functions-------------------*/
function chkradio() {
var elem = document.forms['vzi5'].elements['element_0'];
len = elem.length - 1;
chkvalue = '';
sevenPlus = false;
fourToSix = false;
threeMin = false;
for (i = 0; i <= len; i++) {
if (elem[i].checked) chkvalue = elem[i].value;
}
if (chkvalue == '') {
$('#radio-error').fadeIn('fast').effect("bounce", {
times: 3
}, 'fast', function () {
setTimeout(function () {
$('#radio-error').fadeOut('slow');
}, 2000);
});
}
if (chkvalue >= 7) {
sevenPlus = true;
} else if (chkvalue >= 4 && chkvalue <= 6) {
fourToSix = true;
} else {
threeMin = true;
}
};
function chkselect() {
var elem = document.forms['vzi5'].elements['element_1'];
len = elem.length - 1;
chkvalue = '';
likeNew = false;
minProb = false;
nonFunc = false;
for (i = 0; i <= len; i++) {
if (elem[i].selected) chkvalue = elem[i].value;
}
if (chkvalue == '') {
elem.focus();
$('#select-error').fadeIn('fast').effect("bounce", {
times: 3
}, 'fast', function () {
setTimeout(function () {
$('#select-error').fadeOut('slow');
}, 2000);
});
} else if (chkvalue === 'Like New - No Functional Problems') {
likeNew = true;
} else if (chkvalue === 'Minor Functional Problems') {
minProb = true;
} else {
nonFunc = true;
}
};
function chkbox() {
var elem = document.forms['vzi5'].elements['element_2[]'];
chkvalue = elem.checked;
iUnderstand = true;
if (chkvalue === true) {
iUnderstand;
} else {
iUnderstand = false;
elem.focus();
$('#check-error').fadeIn('fast').effect("bounce", {
times: 3
}, 'fast', function () {
setTimeout(function () {
$('#check-error').fadeOut('slow');
}, 2000);
});
}
};
//Calling the validation functions---------------------------
$('#verizon img.apple, #unlocked img.apple').click(function () {
$(this).closest('div').fadeOut(500).animate({
"top": "-414px"
}, 100).fadeIn('fast', function () {});
$('#verizon516').animate({
"top": "+=557px"
}, 500, function () {
$(this).animate({
"top": "-=20px"
}, 200);
});
});
//move this out of the other click handler
$('div.next').click(function () {
chkradio();
chkselect();
chkbox();
if (sevenPlus === true) {
if (likeNew === true && iUnderstand === true) {
alert('Condition is 7+ and functions like new.');
} else if (minProb === true && iUnderstand === true) {
alert('Condition is 7+ and has minor functional problems');
} else if (nonFunc === true && iUnderstand === true) {
alert('Condition is 7+ and device does NOT function.');
} else {
};
};
if (fourToSix === true) {
if (likeNew === true && iUnderstand === true) {
alert('Condition is 4-6 and functions like new.');
} else if (minProb === true && iUnderstand === true) {
alert('Condition is 4-6 and has minor functional problems');
} else if (nonFunc === true && iUnderstand === true) {
alert('Condition is 4-6 and device does NOT function.');
} else {
};
};
if (threeMin === true) {
if (likeNew === true && iUnderstand === true) {
alert('Condition is 1-3 and functions like new.');
} else if (minProb === true && iUnderstand === true) {
alert('Condition is 1-3 and has minor functional problems');
} else if (nonFunc === true && iUnderstand === true) {
alert('Condition is 1-3 and device does NOT function.');
} else {
};
};
});
Demo: Fiddle
This is because you are binding the click event for div.next inside the click event for #verizon img.apple, #unlocked img.apple, so every time the outer event is clicked, you are re-binding the inner click event. Fix this by moving the event binding for div.next outside the click event for #verizon img.apple, #unlocked img.apple
$('#verizon img.apple, #unlocked img.apple').click(function(){
// .. contents here
});
$('div.next').click(function(){
// ... contents here
});
You are binding the click event to $('div.next') every time $('#verizon img.apple, #unlocked img.apple') is clicked. Which means it will fire once for each time it is bound. Move the code for $('div.next') out of the $('#verizon img.apple, #unlocked img.apple') click handler.