Develop Reference

My HTML5 canvas game keeps blinking in between frames

I've started working on an HTML5 RPG canvas game recently, and decided to make a "text-box" sort of thing, but when once I programmed it, it started blinking between the blue and text box every other frame. What could have caused this?
Code: https://github.com/Codezters/RPG-Game-1
Important Code (I think most of the player movement stuff is irrelevant though):
function update() {
if (realm == 'overworld') {
cc.fillStyle='blue';
cc.fillRect(0,0,c.width,c.height);
cc.drawImage(bob, x, y);
// Player Walk Animations
if (direction == 'up' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveUP1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleUP.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveUP2.png"
}
}
else if (direction == 'right' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveRIGHT1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleRIGHT.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveRIGHT2.png"
}
}
else if (direction == 'left' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveLEFT1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleLEFT.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveLEFT2.png"
}
}
else if (direction == 'down' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveDOWN1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleDOWN.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveDOWN2.png"
}
}
if (idleframe == 8) {
if (direction == 'down') {
document.getElementById("source").src = "IdleDOWN.png"
idleframe = 0;
idleness = true;
}
else if (direction == 'up') {
document.getElementById("source").src = "IdleUP.png"
idleframe = 0;
idleness = true;
}
else if (direction == 'right') {
document.getElementById("source").src = "IdleRIGHT.png"
idleframe = 0;
idleness = true;
}
else if (direction == 'left') {
document.getElementById("source").src = "IdleLEFT.png"
idleframe = 0;
idleness = true;
}
if (talking == true) {
if (wordcount != textBoxTest.length) {
cc.drawImage(textBox, 0, 400);
cc.fillStyle = "white";
console.log("this is working")
cc.fillText(counted, 0, 100);
counted += textBoxTest[wordcount]
wordcount++;
}
else if (EnterToggle == true) {
EnterToggle = false;
talking = false;
}
Game so far: https://codezters.github.io/RPG-Game-1/
Solution:
I didn't need to clear the canvas when nothing was happening, so I made it clear less frequently and the problem was fixed.

The HTML is completely wrong for a start, with tags in the wrong places and obsolete elements. I mean no offense, we all have to start somewhere, but you should complete a basic course in HTML and JavaScript before attempting this. MDN is a great place to start.
You're changing the src attribute of img tags, you shouldn't be doing that at all. Use a different Image object for each file and make your code choose which image to draw instead. This ensures all images are loaded once before the game starts and not every time you change it. Loading can take place asynchronously and cause errors where the image is not ready to be drawn yet when you try to.
You also have this code:
window.onload= function() {
c=document.getElementById('gc');
document.addEventListener("keydown",keyPush)
cc=c.getContext('2d');
setInterval(update,1000/30);
};
Since you run update through setInterval, you both update and draw the game 33 times per second. You should have an independent function which takes care of drawing which is called with requestAnimationFrame(draw). This will make sure the browser only draws frames when it can, and skips drawing when the computer is having trouble keeping up. Go read the documentation on requestAnimationFrame for more info.

How can I avoid heap out of memory?

I wrote this code to get ended my homework as a practice.
This code controls browser with nightmare.js.It just iterates clicking button and waiting for a sec.
But this code issued an error of heap out of memory. I just tried out "--max-old-space-size=4096". but it didn't work...
ANYONE HELP ME??
I checked other than iterations can work. Then putting iterations..., it cannot work due to heap out of memory.
To be honest, I am not good at coding and English. If there are any miswriting, ask me please!
const Nightmare = require('nightmare');
const nightmare = Nightmare({show: true});
const LinguaURL = "";
const NumberOfMine = "";
const PwdOfMine = "";
var i,j = -1;
var selection, progress;
var radioSelect = -1;
function main() {
nightmare
.goto(LinguaURL)
.wait(1000)
.type("input[type='text']", NumberOfMine)
.type("input[type='password']", PwdOfMine)
.click("input[type='submit']")
.wait(5000)
.click('a[href="javascript:document.Study.submit()"]')
.wait(3000)
.click("input[type='button']")
.wait(3000);
for(i = 3;i<43;i++){
nightmare
.click('a[onclick="unit_view_page(\''+i.toString()+'\');"]');
while(true){
j++;
if(j % 4 == 0){
nightmare
.click('input[onclick="select_unit(\'drill\', \''+(1833+j).toString()+'\', \'\');"]')
.wait(1000);
while(true){
radioSelect++;
nightmare
.click('input[id="answer_0_' + radioSelect.toString() +'"]')
.wait(1000)
.click('input[id="ans_submit"]')
.wait(1000)
.evaluate(function (){
return selection = document.querySelector('.btn btn-answer-view form-font-size');
})
.evaluate(function (){
return progress = document.querySelector('btn btn-next-problem form-font-size');
});
if(selection == null && progress == null)break;
if(selection != null){
continue;
}else{
nightmare
.click('input[class="btn btn-next-problem form-font-size"]');
continue;
}
}
if((j + 1) % 10 == 0)break;
}
}
}
nightmare
.wait(100)
.end()
.then(console.log);
}
main();

If I'm not mistaken, I think this is the reason.
function main() {
for(i = 3;i<43;i++){
while(true){
j++;
if(j % 4 == 0){
while(true){
/**** break for the second while. ****/
if(selection == null && progress == null) break;
if(selection != null){
continue;
}else{
continue;
}
}
/**** break for the first while. ****/
// But this code will be run if 'j % 4 == 0',
// and I can't see any assigned the value to 'j' variable inside of 'if'.
// There's no way the result will be true.
if((j + 1) % 10 == 0) { break; }
}
}
}
}
var j = -1;
var limit = 2000 * 4;
while(true){
j++;
if(j != 0 && j % 1000 == 0) console.log("loop: " + j);
// here we go.
if(j % 4 == 0){
while(true){
break;
}
// But this code will be run if 'j % 4 == 0',
// and I can't see any assigned the value to 'j' variable inside of 'if'.
// There's no way the result will be true.
if((j + 1) % 10 == 0) { console.log("your if statement"); break; }
// limit
if (j == limit) { console.log("break using limit"); break; }
}
// Maybe (do you just want to run ten times?)
// if((j + 1) % 10 == 0) { console.log("[maybe] your if statement"); break; }
}
console.log("process end");

Why this jquery else if statements are not working?

Could you please take a look at this? It does not work. I can not figure out why.
$(document).ready(function() {
var result = parseInt($('#kmi').text());
if (result < 18, 5) {
$("#line1").css("background-color", "#eee");
} else if (result >= 18, 5 && result < 24, 9) {
$("#line2").css("background-color", "#eee");
} else if (result >= 25 && result = < 29, 9) {
$("#line3").css("background-color", "#eee");
} else if (result >= 30 && result = < 34.9) {
$("#line4").css("background-color", "#eee");
} else if (result >= 35 && result = < 39.9) {
$("#line5").css("background-color", "#eee");
} else if (result >= 40) {
$("#line6").css("background-color", "#eee");
} else {
$("#line1").css("background-color", "#fff");
}
}
});

first of all you should change comma to dot and you have used => instead of <= and don't use much else if statement you can use one class property for all lines because all CSS having same property background-color, "#eee" something like this , please check the condition for if statement
$(document).ready(function(){
var result = parseInt($('#kmi').text());
if(result<18.5 || result>=40){
$(".lines").css("background-color", "#eee");
}else{
$("#line1").css("background-color", "#fff");
}
}
});

You wrote => instead of <= where the former one will be considered as an assignment operator and there was an extra } closing braces.
$(document).ready(function() {
var result = parseInt($('#kmi').text());
if (result < 18, 5) {
$("#line1").css("background-color", "#eee");
} else if (result >= 18.5 && result < 24.9) {
$("#line2").css("background-color", "#eee");
} else if (result >= 25 && result <= 29.9) {
$("#line3").css("background-color", "#eee");
} else if (result >= 30 && result <= 34.9) {
$("#line4").css("background-color", "#eee");
} else if (result >= 35 && result <= 39.9) {
$("#line5").css("background-color", "#eee");
} else if (result >= 40) {
$("#line6").css("background-color", "#eee");
} else {
$("#line1").css("background-color", "#fff");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

do while doesn't work

I'm building a website but a JavaScript part doesn't work.
Look here the script:
do {
if (percen === 0) {
console.log();
} else if (percen === 1) {
document.getElementById("percen").innerHTML = "Text"
} else if (percen === 2) {
document.getElementById("percen").innerHTML = "Text"
} else if (clicks === 3) {
++percen;
} else if (clicks === 4) {
++percen;
} else if (clicks === 5) {
++percen;
} else if (clicks === 6) {
++percen;
} else if (clicks === 7) {
var percen = 0;
}
}
But when I run it in a HTML file it will not loop. The var "percen" will ++ when you use a button.

Try adding the 'while' portion of the 'do while' loop at the end:
do {
if (percen === 0) {
console.log();
}
// rest of your code
// ...
}
while (percen < 100);

You forgot the condition at the end.. It is while(condition) remember that the condition is checked at the end of the script so it will enter 1 time. If you want you can do a while syntax while(cond){yourscript}

How to move an element in javascript automatically with while loop?

I am making a Snake game so I'm trying to move my snake. It is moving with keys but it should move automatically on the screen. I tried doing that with while loops like in the code below but because of break; I have to press a key every time I want it to move. How can I make it move automatically? I tried removing break; an using an if statement but I didn't succeed.
Any other solutions or something else?
I'm new to programming so any advices would be helpful.
var main = function() {
var i = 0;
var j = 0;
$(document).keyup(function(event) {
var e = event.which;
while(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
while(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
while(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
while(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
//Which key is preesed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
});
};
$(document).ready(main);

I think you just have to organize a little bit your code.
First. You must put your code inside a function. You really don't need a while. You can use a simple if.
function move(i) {
if(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
if(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
if(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
if(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
}
Now you have to change the event, using keydown instead of keyup
function main() {
var interval;
$(document).keydown(function(event) {
if(interval) clearInterval(interval); // Clear the previous interval
var e = event.which;
var i;
//Which key is pressed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
interval = setInterval(function() {
move(i)
},1000); // repeat every 1 second
});
}
$(document).ready(main);