Author Topic: HTML Games with JavaScript  (Read 9325 times)

0 Members and 1 Guest are viewing this topic.

Offline Galandros

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1140
  • Rating: +42/-10
    • View Profile
HTML Games with JavaScript
« on: January 31, 2010, 09:46:02 am »
Any of you has seen games in HTML, CSS and JavaScript? Web browsers can run JavaScript and show HTML pretty fast.
Plus there is keyboard and mouse ways to get input. Even ways to save data.

But I have only seen simple games like Tic Tac Joe, avoid obstacles with mouse, tower of hanoi... The most complicated was chess.
If you have seen something more interesting, share the game.

But some ASCII RPG could be doable. I am not thinking in doing one but I will try to come some nifty scripts to get keyboard and mouse input, and other stuff. One objective is to be most cross browsers compatible possible.
What I want to discuss is the enormous possibilities.

I have some ideas:
- through AJAX, we can have multi player through the Internet and a Web Server running PHP, for instance. A RPG with single player and multiple player could be nice.
- ASCII mapper (BW and colours)
- Raycasting with ASCII and colours (Ben Ryves has actually done that already, see his gamedev or site journal)

I know some disadvantages:
- Cross browser problems
- With only JavaScript it is impossible to avoid cheating because the source code is a available. Cheating is always a possibility even if very hard, though.

Maybe later I can do some game like Hunt or runner. For now I will come with the scripts to see if it gains interest. I have started a PHP lib to save data on a file. Maybe I can add other useful stuff. With XAMPP is very easy to start a web server and play some game that requires it.

EDIT:
I searched a bit and found one interesting site:
http://www.javascriptgaming.com/
There is some JavaScript games libs like: http://gamequery.onaluf.org/

It could be interesting some JavaScript gaming in Omnimaga. :P What you think?

PS: I am not quitting calc stuff, although I am doing more web related things. It is question of time to get bored with web stuff.
« Last Edit: January 31, 2010, 10:25:44 am by Galandros »
Hobbing in calculator projects.

Offline {AP}

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 981
  • Rating: +74/-3
  • I am Webmaster!
    • View Profile
    • Removed From Game
Re: HTML Games with JavaScript
« Reply #1 on: January 31, 2010, 11:14:05 am »
It's definitely doable. Though, I'd do it in PHP or Flash first personally.
Javascript doesn't completely agree with me.

However, I'll keep tabs on this project and help where I can.

Offline Galandros

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1140
  • Rating: +42/-10
    • View Profile
Re: HTML Games with JavaScript
« Reply #2 on: January 31, 2010, 11:27:29 am »
It's definitely doable. Though, I'd do it in PHP or Flash first personally.
Javascript doesn't completely agree with me.

However, I'll keep tabs on this project and help where I can.
JavaScript does have its quirks. But most time understanding JavaScript will make you realize it is not wrong.
My problem with Flash is you need a plugin installed. Also why not do things in the tricky and fun way?
The idea is to be able to play offline after download the page. Everyone has a web browser nowadays.

I have already found many sites with fun and very good JavaScript games. Here is a showcase of them: (warning: very addictive but inspiring)
http://www.protorpg.com/games/protorpg/?game=prologue
http://drakim.net/other/ff/
http://www.e-forum.ro/bomberman/dynagame.html
http://www.voximperium.com/game.php
http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html (Super Mario in 14kb of JavaScript!!! Even calcmaniac has hard time trying that in z80 assembly)
http://www.honeyblaster.com/ (Grayscale pixels, paralax scrolling and a shooter in JavaScript)

EDIT:
I have coded some JavaScript to suppress things like selecting text, left click context menus and such. This can be useful to immerse the player into the game and forget they are in a web browser.

I discovered many JavaScript games libs or general libs used into games. I will see them and think what I can do to complement those libs. I might do my own implementation of their features if I need to do my lib out stand among others.
« Last Edit: January 31, 2010, 02:18:14 pm by Galandros »
Hobbing in calculator projects.

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6266
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: HTML Games with JavaScript
« Reply #3 on: January 31, 2010, 12:34:19 pm »
Hmm, I know that there are a few well don't JavaScript games out there for the iPhone/iPod touch, that use the jquery library of JavaScript. Don't actually have any links at the moment, but they are good examples.
/e

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: HTML Games with JavaScript
« Reply #4 on: January 31, 2010, 01:35:20 pm »
I personally wouldn't code in JS because back then I had JS classes in college and it was way too incredibly hard for me. The teacher was always at my desk helping me debug and I would still don't get it. I failed the class and eventually dropped out

That said, some JS games might be cool, you just need to make sure it's not too easy to cheat. On the old Omnimaga forums, we had a RPG system Late 2005 and Early 2006, where your stats/save were stored in your signatures. However, people just disabled JS in their browser and hacked the stats through signature editing options to get ultimate weapons and stats and in some browsers, people were unable to edit their sig anymore.
« Last Edit: January 31, 2010, 01:38:39 pm by DJ Omnimaga »

Offline Galandros

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1140
  • Rating: +42/-10
    • View Profile
Re: HTML Games with JavaScript
« Reply #5 on: January 31, 2010, 02:12:15 pm »
I personally wouldn't code in JS because back then I had JS classes in college and it was way too incredibly hard for me. The teacher was always at my desk helping me debug and I would still don't get it. I failed the class and eventually dropped out

That said, some JS games might be cool, you just need to make sure it's not too easy to cheat. On the old Omnimaga forums, we had a RPG system Late 2005 and Early 2006, where your stats/save were stored in your signatures. However, people just disabled JS in their browser and hacked the stats through signature editing options to get ultimate weapons and stats and in some browsers, people were unable to edit their sig anymore.
JavaScript can be a bitch in debugging. Especially because if there is some syntax error no code is executed. That is why I now use a custom error handler and pay attention to the Web Browser tools.

There are quick measures like JavaScript compressors and obfuscation. This turns things even harder than TI-BASIC cheating. But to work, I can't release the readable source code.
More advanced ways: encryption for the rescue. I saw in a paid HTML, PHP and JavaScript application. Their method was obfuscation of code and some wicked encrypt. I have to discover the method.
Hobbing in calculator projects.

Offline mapar007

  • LV7 Elite (Next: 700)
  • *******
  • Posts: 550
  • Rating: +28/-5
  • The Great Mata Mata
    • View Profile
Re: HTML Games with JavaScript
« Reply #6 on: January 31, 2010, 02:51:31 pm »
@DJ: no worries 'cause:

An influential Belgian computer scientist, who was involved in the founding of the Internet, stated: "JavaScript definitely is the worst programming language ever." (this is not literally quoted, fyi)


Galandros, couldn't you avoid cheating by having the "important" part of the code run on that webserver?
« Last Edit: January 31, 2010, 02:54:08 pm by mapar007 »

Offline {AP}

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 981
  • Rating: +74/-3
  • I am Webmaster!
    • View Profile
    • Removed From Game
Re: HTML Games with JavaScript
« Reply #7 on: January 31, 2010, 02:56:42 pm »
Agreed. The Mario game that was linked destroyed my Firefox for a good 10 minutes. (even after ending the process and going back in)
Then the Honeyblaster game only spawned like 6 enemies then just sat there. I could move, but nothing really happened the whole time.

The FF game was nice but had graphical glitches.
Haven't touched anything else since the Mario game though.
JS scared the crap outta me.

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: HTML Games with JavaScript
« Reply #8 on: January 31, 2010, 03:00:36 pm »
On my side the Mario game sprites were garbled, though

Offline {AP}

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 981
  • Rating: +74/-3
  • I am Webmaster!
    • View Profile
    • Removed From Game
Re: HTML Games with JavaScript
« Reply #9 on: January 31, 2010, 03:07:27 pm »
That's how it started... then all of a sudden, the screen was just blue with a timer.
Then... it like got rid of everything but the title bar and changed the title to french.
Then made multiple copies of it self all over my taskbar (including the process icons and start button) that all didn't work and it wouldn't close.
So, I had to end the process and start it back up.
Firefox, however, remembers tabs when it closes like that so it opened up again and repeated.

Worked itself out long enough for me to close the tab the 3rd time. =/

No idea what the issue was, but I don't want it to happen again.

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: HTML Games with JavaScript
« Reply #10 on: January 31, 2010, 11:49:07 pm »
Ouch, that sounds like Skynet *runs*

Offline Galandros

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1140
  • Rating: +42/-10
    • View Profile
Re: HTML Games with JavaScript
« Reply #11 on: February 01, 2010, 04:13:34 am »
Galandros, couldn't you avoid cheating by having the "important" part of the code run on that webserver?
That is what needs to be done in the multi player one. Thanks. Still it isn't easy as it seems.
But for the stand alone html with game, I prefer avoid the overhead of installing an web server with php.

On my side the Mario game sprites were garbled, though
On mine too.

If I choose one preferred web browser is going to be Firefox because it is available on all platforms and AFAIK compliant with standards.
Still I have downloaded most used and up to date web browsers to test on them... I will test on Windows mostly. Probably Firefox for Linux, too.
Hobbing in calculator projects.

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: HTML Games with JavaScript
« Reply #12 on: December 01, 2010, 01:41:36 pm »
You can prevent cheating by putting variables within the private scope.
That can be done using this:
Code: (JavaScript) [Select]
var GlobalScope = function () {
var PrivateString = "Hello";
return {
showstring: function () {
alert(PrivateString);
}
};
}();

Upon looking at the DOM using Firefox's Firebug, you can see that the private string is not accesible.
So this will not work:
Code: (JavaScript) [Select]
alert(GlobalScope.PrivateString);

But, this will, as it is called by the GlobalScope's own child.
Code: (JavaScript) [Select]
GlobalScope.showstring();
« Last Edit: December 01, 2010, 01:42:18 pm by Ikkerens »

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Galandros

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1140
  • Rating: +42/-10
    • View Profile
Re: HTML Games with JavaScript
« Reply #13 on: December 19, 2010, 12:20:50 pm »
You can prevent cheating by putting variables within the private scope.
That can be done using this:
Code: (JavaScript) [Select]
var GlobalScope = function () {
var PrivateString = "Hello";
return {
showstring: function () {
alert(PrivateString);
}
};
}();

Upon looking at the DOM using Firefox's Firebug, you can see that the private string is not accesible.
So this will not work:
Code: (JavaScript) [Select]
alert(GlobalScope.PrivateString);

But, this will, as it is called by the GlobalScope's own child.
Code: (JavaScript) [Select]
GlobalScope.showstring();
Interesting but you can always try to manipulate a browser to load a different JavaScript code. But that would prevent many easy attempts. And it is interesting JavaScript code, I have seen it being used in libraries, I think.
Hobbing in calculator projects.

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: HTML Games with JavaScript
« Reply #14 on: December 19, 2010, 12:39:10 pm »
HOLY NECROPOST BATMAN! O.O