I am a student who is studying webview on android.
as I am a foreigner, I will thank you if you consider my mistakes on grammer...
I encountered a problem on making webview.
it is its "performance" when I use timer(setInterval method).
I am making a shooting game which is like "1945 strikers".
I made a effect which shows explosion-images using "Timer"(setInterval).
(This effect shows 14-pictures in order rapidly)
but, the problem is that my mobile phone can not show that effect naturally.
(it is stopped little by little)
I can not understand what is wrong.
exactly, I reduced "new" methods by using "pop" and turned off sounds.
I guess that the problem is based on the number of timer.
In my game, each bullet which hitted enemy occur explosion Timer.
and I duplicated this Timer to 10 as I thought it was not enough.
source code is like this.
=====call animation=======================
function drawCrash(x,y){
if (crashCount1 == 0) {
crashHereX = x;
crashHereY = y;
crashTimer1 = window.setInterval(crashAnimation1, interval);
crashCount1++;
}
else if (crashCount2 == 0) {
crashHereX2 = x;
crashHereY2 = y;
crashTimer2 = window.setInterval(crashAnimation2, interval);
crashCount2++;
}
... (total 10 methods)
======explosion animation==========================
function crashAnimation1() {
this.crashList=[crash01,crash02,crash03,crash04,crash05,
crash06,crash07,crash08,crash09,crash10,
crash11,crash12,crash13,crash14];
if (crashCount1 >= 13) {
window.clearInterval(crashTimer1);
crashCount1 = 0;
} else {
crashCount1+=1;
}
this.context.drawImage(this.crashList[crashCount1],crashHereX,crashHereY,50,50);
}
function crashAnimation2() {
this.crashList=[crash01,crash02,crash03,crash04,crash05,
crash06,crash07,crash08,crash09,crash10,
crash11,crash12,crash13,crash14];
if (crashCount2 >= 13) {
window.clearInterval(crashTimer2);
crashCount2 = 0;
} else {
crashCount2+=1;
}
this.context.drawImage(this.crashList[crashCount2],crashHereX2,crashHereY2,50,50);
}
... (total 10 methods)
is there anything which makes my game slow?
I have been debugging my source code using Chrome,(using F12 key)
but my laptop computer performs my source code well.
there isn't any problem!
you must hard to understand what I am saying...
what I want to know are like this.
should I reduce setInterval method to show the game performance naturally?
but, previous version (android 4.1.2) had NO problem! it performed naturally!
Now, I am using kitkat version(4.4.2)... I really hate this version.
Even I tried to downgrade my android phone!
it was hard for me to find "e.preventDefault();" it took 3-days for me to find...
is there anything which is better to debug JavaScript?(I am using Chrome F12 key)
is the "splice(index,1);" method occur "stopped phenomenon"(which I said above, "not natural")
when it is used many time? (in my game, many bullets are created and removed(new and splice))
I really want to know how to solve this problem...
Thank you very much.
Related
I am struggling with the fact that the flow of control in javascript is not what I'm used to. Not linear. Sometimes when I test I get the error message "A script is slowing down your browser" at times when everything should be stopped.
I spend ages looking for the bug. This time it was something really silly, a variable which stopped the function when it reached 350 px. Then I added a way to change the speed and sometimes this variable was incremented by 3 at each step. So it never reached 350, it went from 348 to 351.
So I was wondering if there was a "STOP!" command. Something which would leave the display of the web page in its current state but stop all running processes?
Debugger? It just creates a breakpoint, where you can analyse what's going on right now. I know it's not exactly what you're asking about, but it could work for your use case.
Usage
debugger; 😂
Can be used from within console too.
Learn more
https://www.w3schools.com/js/js_debugging.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
Depending on what you want here, the main answer is "no".
There are a few "hacks" (but they are quite intrusive and unreliable).
A good one (like mentioned in another answer here) is to throw the statement debugger; (that's all). Example:
let eggCount = 0;
function makeEggs(eggCount){
//Stop! The user is eating too much!!!
if(eggCount > 5){
debugger;
}
else{
make_egg("Over-hard");
return eggCount++;
}
}
However, this only works (or at least for chrome) if the console is open.
The second big one is to throw an error in your script (as shown by this post). It's hacky, and you can't have any try...catch loops (if you do then you have to throw an error, so you'd to re-throw that error).
let eggCount = 0;
function makeEggs(eggCount){
//Stop! The user is eating too much!!!
if(eggCount > 5){
throw "Egg overflow!";
}
else{
make_egg("Sunny side up");
return eggCount++;
}
}
The last big thing you can do (as mentioned by a comment here) is to re-write your logic.
From the looks of it, you have something like this:
let eggCount = 0;
function makeEggs(eggCount){
//Stop! The user is eating too much!!!
if(eggCount === 5){
throw "STOP!"
}
else{
make_egg("Over-hard");
return eggCount++;
}
}
Well, what if we did this?
eggCount = makeEggs(eggCount);
eggCount = 6;
eggCount = makeEggs(eggCount);
Since the equals sign checks for if it's just five, you can always bypass it.
This isn't a good idea, so we can re-wire our logic to do this instead:
let eggCount = 0;
function makeEggs(eggCount){
//Stop! The user is eating too much!!!
if(eggCount >= 5){
throw "STOP!"
}
else{
make_egg("Over-hard");
}
}
Now it will stop if it's 5 or greater.
This:
eggCount = makeEggs(eggCount);
eggCount = 6;
eggCount = makeEggs(eggCount);
will still throw the "STOP" error, even though it's greater than 5.
Sometimes, it's as simple as re-writing your logic.
You don't need the big hack-y stuff if it's as simple as just making your program smarter ;)
I've ran into this type of problem before.
I haven't encountered an incident yet where re-writing my logic doesn't help!
I am writing a website for one of my friends, and as a joke I want one page to have javascript that uses as much CPU as possible. The javascript doesn't actually have to do anything, just needs to somehow make computers as slow as possible while hes on the page. What is the best way to do this?
Just a simple infinite loop will already do wonders. You can top that off with spinning off a few web-workers that also do the same:
If you set x=0n this will use up more memory (due to BigInts allowing much larger numbers and much more memory)
let x=0;
while(true){
++x;
}
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
Keep in mind that a website by default only uses 1 thread of your CPU. Hence why web-workers to block more threads would be good. :)
You could also add a setInterval/setTimeout in the loop or other things to let the browser have time to repaint to be responsive if you want to hide it better to prevent the browser from prompting to end the unresponsive page.
Edit: You might want to consider adding some actual IO tasks (especially to the harddrive) to really slow it down.
If I remember correctly, there was a bug at one point that was being abused by downloading nearly infinite 0byte files to the host computer to essentially crash it.
This will hold up the CPU less than the initial infinite loop, but will leave the page responsive enough for the browser to not prompt to kill the script.
const wait = () => new Promise((res) => setTimeout(() => res(), 0));
async function timeWaster() {
let x = 0n;
while (true) {
x++;
if (x % 10000000n === 0n) {
await wait();
}
}
}
timeWaster()
I was making this hack for the google dinosaur game:
function speed(n) {
Runner.instance_.setSpeed(n);
}
function noHit() {
Runner.prototype.gameOver = function() {
console.log("");
}
}
function notNoHit() {
Runner.prototype.gameOver = function() {
this.playSound(this.soundFx.HIT);
vibrate(200);
this.stop();
this.crashed = true;
this.distanceMeter.acheivement = false;
this.tRex.update(100, Trex.status.CRASHED);
}
}
it is meant to be typed into the console, that way you don't have to edit the html of the page, which is pretty complicated (at least to me.) so, when i type it in, it returns undefined, as usual. when I use speed(n), it sets the speed to n. when i use noHit(), it makes it so i can't get hit. when i say notNoHit(), it returns undefined, as usual, but when i hit a cactus, it gives me an error:
Uncaught RefrenceError: vibrate is not defined
at Runner.gameOver (<anonymous>:14:3)
at Runner.update (data:text/html,chromewebdata:2005)
this kinda surprised me, because the way I did notNoHit() was to simply set the function back to what it was, instead of a junk command, (console.log("");) so i'm not really sure how to fix this.
Open the console of chrome browser write the below code it is working fine for me.
Runner.instance_.gameOver=()=>{}
Try this code by this Dinosaur will automatically jump when he will be near the obstacles
Runner.instance_.gameOver = function () {
this.playSound ( this.soundFx.HIT);
vibrate(500);
this.crashed = false;
//this.tRex.endJump ();
this.tRex.startJump (200);
// console.log (this.tRex)
}
I'm writing a decent sized JavaScript animation library, that I would like to include debugging code in. I could easily do a check :
if(myLib.debugger){
console.warn('warning message');
}
However if this runs a couple thousand times a second, it would eventually cause performance issues. Add in a few more checks throughout the code and the effect will be even more noticeable.
What I'm wondering is if it would be possible to check onload if the debugger should be enabled, and if so... turn something like this:
//debugger if(!this.name) console.warn('No name provided');
into:
if(!this.name) console.warn('No name provided');
Leaving the code commented if its not enabled, and uncommenting it if it is, thus removing any possible performance issues. Could this be done somehow with a regular expression on the entire script if loaded in through ajax? I'm trying to avoid the need for 2 versions of the same code, lib.dbug.js and a lib.js.
Cross browser compatibility is not of great importance for this (I'm really only worried about new browsers), I see it as nice to have item. If its possible however, it would be a great thing to have.
Any insight would be greatly appreciated.
The simplest way to do this would be to check if the debugger should be disabled and if so, replace it with a mock object that does nothing at the very start of your script:
if (!myLib.debugger) {
window.console = (function () {
var newConsole = {};
var key;
for (key in window.console) {
if (typeof window.console[key] === 'function') {
newConsole[key] = function () {};
}
}
return newConsole;
}());
}
The overhead of this approach should be negligible.
If this is a JavaScript library... then I'd expect as a 3rd party developer that I could download/use 2 versions. The production version (no debug, AND minimized). If I wanted to debug, I would point to the debug version of the library instead.
e.g.
<script src="foo-lib-min.js"></script>
<!-- swap to this for debugging <script src="foo-lib-full.js"></script>-->
function loopthrough (i) {
i++;
if (i <= 20) {
play_multi_sound("aud"+i);
$("#debug").html(i);
setTimeout("loopthrough("+i+");",242); }
else {
loops++;
$("#debug").html("rest");
$("#loops").html(loops);
setTimeout("loopthrough("+0+");",1000);
}
}
Does my code look like it is forking? since after about 3 loops it is litrally crashing the browser. I am using excessive HTML5 audio since I like to test new features and whilst im still a newbie at Javascript I really need this code to work. (Im making a simple beat game in canvas where you use a pong style paddle and each ball you hit of varying speed it will play a sound, thus making a cool beat)... Atm im just testing the capabilities of alot of audio being looped through at once.
So yeah my basic question is "Is my code efficient, is it forking and is there anyway of improving this greatly if you know of a better way?"
Thanks,
Tom C.
EDIT:
Just removed my loops++; (for some reason it was returning NaN even though it was defined as global) and it actually successfully looped 20 times without flaws.
I just did some tests, and I am sticking it here so that the code is clear.
function loopthrough (i) {
i++;
if (i <= 20) {
console.log("bla");
setTimeout(function(){ loopthrough(i); }, 242); }
else {
console.log("lala");
setTimeout(function(){ loopthrough(0); }, 1000);
}
}
loopthrough(0);
That worked fine and it never crashed. And it didn't fork either.
So, it's crashing on something else.
I would try this in another browser as well, and see if it crashes - could just be the FF beta 8 crashing.
Try removing 1 bit at a time from it and see if it starts to work - it's a good way to narrow down the culprit.
I bet it's the audio that's crashing it...
* update *
Try bumping up the timeout delay - it could be that the audio doesn't finish and then attempts to play again and is somehow backlogging.