Javascript game does not load sprites but loads arena - javascript

https://github.com/mliu95/quintus-tag
Source code is there.
I was following Liu's tutorial on this (https://mliu95.github.io/2014/09/16/Creating-an-online-multiplayer-web-game-using-Socketio-and-Quintus-Part2/)
Part 1 worked perfectly fine (single player with a movable sprite). However, upon introducing multiplayer (accomplished by opening multiple windows with localhost:8080), the sprites simply don't appear on the screen.
Also, you are dealing with a complete noob in terms of networking. I know a decent amount of Java but have no experience whatsoever. Any advice would be greatly appreciated.

You didn't give much information to go on, and didn't respond to my question in the comments that could clarify the issue.
But here is what I think is happening, in part one of the tutorial he lists his sprite paths here:
var files = [
'/images/tiles.png',
'/maps/arena.json',
'/images/sprites.png',
'/images/sprites.json'
];
I'm assuming your sprites are 404'ing (not being found), so here is a possible fix.
Your file structure is probably not the same as his, where are you storing the sprite images locally (on your pc)? It needs to be in the same paths as shown above. Sprites should be located in YourProjectFolder/images. Make sure your your sprite file is named sprites.png
After making sure all those files are placed correctly, open your developer tools (f12), head to the network tab, check the "disable cache" box (if you're on chrome). And refresh.
It should load your sprites after these changes, and if not, you need to post the specific errors you are running into. The errors will show up in developer tools after you refreshed, if it is still unable to find them.
Good luck

Related

Adobe Animate .fla Conversion and publish to HTML 5/JS

Adobe Animate .fla Conversion and publish to HTML 5/JS
The previous person we had doing this task is no longer with the company, and the instructions they left are minimal. They are probably enough to jog their memory but are not helpful for someone attempting with no Flash/Animate experience. In our attempts we get a few different results
The file works correctly in IE but not in any other browser.
The file opens in IE but cycles through each frame, never stops, and doesn’t load in any other browser.
The file opens in IE but has no animation, doesn’t respond to clicks, and doesn’t load in other browsers.
The file doesn’t open anywhere
With our lack of experience with Flash/ Animate, we can’t tell what is the problem. We did try using a file that is unmodified and has a current working HTML5/JS publish, however, when we publish that same file we get the same results as above, while the original works fine. We believe that it something in the publish of the JavaScript causing the failure. I attempted to take bad.html and bad.js and overwrite bad.js with the content of good js. This worked, it’s the wrong data, but it worked and is why we believe the publish of the JavaScript is the issue.
The instructions we are following are as follows.
Open .fla in Animate
Click File --> Convert to --> HTML 5 Canvas (save File)
Click File --> Publish Settings
Basic tab
Uncheck Loop Timeline
Check Export images assets (as spritesheet)
Uncheck Export Sounds
Uncheck Export CreateJS
HTML/JS tab (No changes)
Image Settings Tab (No changes)
Click Publish
I have shared the .fla at https://1drv.ms/u/s!ApKpIVR_uf25hd9MF6pzZPKZjukwQw?e=oEzxRV in the hopes that someone can help and spot the error of our ways.
Thank you for any assistance.

Using Chrome Dev Tools to find out what's causing FOUC

I have been fixing up a sites JS, moving it to the bottom, minifying, etc. And it's all gone okay except on the blog (of an e-commerce site), as the page loads it's causing the header to be un-styled for a second or so, but it isn't happening on any other part of the site, even though they share the same CSS/JS. The blog is image heavy, but with images disabled (and I've tried disabling scripts too), it still happens. It's only happened since I've made changes, which I can't revert simply, but the changes are all positive and should help if anything. I can't see any JS causing it (as I removed the scripts to see if it was in there) and it doesn't happen in FF.
I would share a link but it's behind a closed staging server. And I could provide code but I'm not sure what, and there's a lot.
So, I had hoped I could use Dev tools to figure out what's happening, possibly the timeline view or something. I just don't know how I'd go about doing that.
Any advice?
Ed: I used the network tab on both the staging and the live site, as you can see from the image, they're identical, the css is the first thing loaded after the actual page, and on the live site it's actually ga.js. So it's even more of a puzzle now...
Don't worry, figured it out... It was the Stylebot Chrome Extension.. No idea why it was causing it now after making those changes though, and why it didn't affect the live site. I had no styles defined in it for this domain. A bug I guess.
Cheers all the same :)
Timeline tab in the dev tools is for benchmarking / site performance testing. If you want to know what's happening as in what content is being loaded, when and where, you can use the network tab for that.
It's also a common practice to stuff console.log() everywhere with some relevant message so you know when some part of code is being run.

Finding an infinite (or very large) loop in JavaScript using Chrome Dev Tools

I'm using a third party statistics library which seems to have loads of issues. It's both large and compressed, so it's not particularly easy to debug. I'm using the Chrome Dev Tools and I was wondering what options there might be for ranking functions by the number of calls by their name, maybe? I thought the answer was the Profiler tab, but the profiles I captured are only documenting the JS files referencing "line 1" in long chains.
This thing is freezing my app and I'd rather avoid making changes to their code as much as possible, even if its for the sake of debugging. I'm happy to clarify anything that's not clear.
EDIT: I seem to remember a recent demo of chrome dev tools somewhere showing a timeline that depicted function blocks stacked vertically based on the time increment going horizontally called "flame charts" or something similar... That would be ideal, but I can't remember the link right now for the life of me. Not opposed to using Canary on this one at all if anyone knows what this tool is?
The latest video about DevTools is here http://youtu.be/x6qe_kVaBpg?t=19m44s
It covers different topics about DevTools and includes a section about CPU profile too.
So, you need to record a cpu profile and look into it.
Also you can use FlameChart view on it.
You can click on an item in BottomUp or TopDown or even a FlameChart bar and see the function body in the Sources panel.
If you sources are minified, as in the screenshot, then you can press a button in the status bar of Sources panel. It looks like two curly braces {}. Then DevTools will format the sources.
and that action will affect all the links to the source file in all other places like Timeline, CPUProfile etc. As example in the first snapshot you saw a function O.Pk that was at line 778 of minified version of the script. After pretty printing the source file the link to the function was changed automatically. Now it is pointing to the line 15871.
Looks like the answer is the "Timeline" tab. Seems to work in regular chrome. I set the tab to record just before I triggered the action that caused the hang, once the hang stopped (took about 20 seconds), I stopped recording and used the left and right selectors to zoom in on the master timeline (at the top) where I saw an longer execution period (at the top) with "Events" selected.
From there I just expanded the dropdown and I got what I was looking for. (I blurred out the js filenames to avoid singling out the library) but I'm including a screenshot.

CSS and JS fail when upgrade made to Drupal site

I've run into an issue that crops up when I make a change to a Drupal site - www.productworld.com
This is how the problem crops up:
Make a change to site, e.g. add javascript tracking code or adding a new static webpage.
When NOT logged in as admin (viewing the site as a regular visitor), the homepage is now screwed up. It appears that the CSS and JavaScript for the homepage aren't loaded. When logged in as an admin, I see a cached version of the site, looking as it should. I use two separate browsers to confirm the problem - one where I'm logged in as Drupal admin in Chrome, and two where I view the site in Firefox as a non-logged in site visitor.
Here's some screenshots of what the site looks like when the problem crops up:
http://imgur.com/xs3hF
http://imgur.com/wMBVq
http://imgur.com/Gksb9
http://imgur.com/eZPTE
Note: the company images that you see (iWatt, Roal, Assa Abloy etc) should be in a nodequeue (a jQuery image slideshow), but instead they appear one after the other. The blue box with the gold call to action appears way down the page. This is what leads me to believe that the CSS and JS isn't loading.
3.Clearing the Drupal cache fixes the issue.
It's obviously highly undesirable to have a site that gets screwed up everytime a simple change is made to it.
If anyone has run into a similar issue, please let me know.
Thanks.
When you make changes to the site with caching enabled it will cause problems. This is because it will be using some cached copies of earlier files.
I tend to make changes to a development version of the site, then roll them out to the live site and clear the cache.

HTML Desktop wallpaper

I am somewhat familiar with HTML and Javascript (I have had a few classes covering these in college and dabbled a little on my own). What I would like to do is create a desktop wallpaper on my Windows 7 x64 machine that uses HTML (or whatever I need to use) that runs only on my machine and allows me to use images as links to a few websites(have that working) and shortcuts to run applications that are on my machine. This is the part I am having problems with. I tried using an anchor tag and just placing the file path of the executable but when it is clicked my browser is opened and I am prompted to download the executable. Is there a way to run an executable using HTML, Javascript or something else on my local machine this way.
Also, I have read that this feature has been disabled on Windows 7. I found an application, AveDesktopSites from brothersoft.com that I think may allow me to use an html file as my wallpaper but I have not tried it. Any confirmation or recommendations for other software to do this would be appreciated.
Here is what I have so far(its very simple):
<body>
<a id="StackOverflow" href="websiteURL"> </a>
<a id="Excel" href="filepath to Excel Executable"> </a>
</body>
Then in the CSS file this HTML is using I adjusted the size of each of these anchor tags using their IDs to be the same size as the image and positioned them absolutely over the images to make the images appear to be clickable. I have only tested in my browser at this point.
Thanks in advance.
In windows XP and maybe even in versions before that it was possible to have a website as wallpaper.
You could just have a small block(resizable) with a custom given URL and it would stay on there you could just browse it like it was just another window.
However this option has been removed for Windows Vista and Windows 7.
So what you want now is not possible.
If you use Mozilla Firefox try downloading the addon "Speed dial."
It allows you to have a raster of 3x3 as your home page(you can create several groups all containing 3x3 or any other amount till a certain amount)
And every block in that raster can be a different website.
Gives you the same idea but not as wallpaper.
Its almost the same as bookmarks but just way faster.
I really dont know about any other software but they would have to do things to your windows that shouldnt be possible anymore. So im not sure if that really is what you want. There is probably a reason why Microsoft took it out.
Hope I could be of any help.
http://support.microsoft.com/default.aspx?scid=kb;EN-GB;q232077
I found a similar post containing this link. This looks like it could solve your dilemma if you never found a way.

Categories

Resources