boen_robot Posted April 20, 2008 Share Posted April 20, 2008 Does anyone here have any knowledge of using javascript for making a game?From the ones here... Synook? Just to name one... I mean, didn't you looked at his lab?The thing is not to think of it as "using JavaScript for making a game". Think of it as "JavaScript adjusting CSS properties when a user presses certain keys". Link to comment Share on other sites More sharing options...
Ingolme Posted April 20, 2008 Share Posted April 20, 2008 Making a game is just like making any other software. You decide what exactly you're trying to do, and then you try to turn that idea onto code. You need to know the way to turn ideas into code a computer can understand. Link to comment Share on other sites More sharing options...
Html Posted April 20, 2008 Author Share Posted April 20, 2008 Hmm, I've taken a look at the mario game code that's pretty complex...If I want to just get a black rectangle or egg shape with lines sticking out of it at a certain angle, how would I go about something as simple as that?Then move around with a button or more than one button of my choice?I guess I need some simple example code with explanations. Link to comment Share on other sites More sharing options...
boen_robot Posted April 21, 2008 Share Posted April 21, 2008 Hmm, I've taken a look at the mario game code that's pretty complex...If I want to just get a black rectangle or egg shape with lines sticking out of it at a certain angle, how would I go about something as simple as that?Then move around with a button or more than one button of my choice?I guess I need some simple example code with explanations. Look at the asteroids code. It's about the simplest thing you can find. Its a great example of how to use the onkeypress event to remove something (the "A" character in that case) from one place and re-create it in another place.Using images instead of the "A" character is a matter of replacing the character with an image element having appopriate "src" attribute. It WILL run slower that way though.Don't try to learn from the mario example. It's an extreme point in JS game making. The same goes for the mummy example. Start with simple ASCII games, then moving on to vector graphics (SVG) or raster ones (GIFs, PNGs; whether they're in a data URL, or external).The thing you MUST understand is that its not just JavaScript, the same way desktop games are not just C++. There are other resources involved, images and music being the most common dominator. Those things are created separately. Programming languages like JavaScript just alter those otherwise "static" components into something that reacts based on a user aciton. Link to comment Share on other sites More sharing options...
Html Posted April 21, 2008 Author Share Posted April 21, 2008 Look at the asteroids code. It's about the simplest thing you can find. Its a great example of how to use the onkeypress event to remove something (the "A" character in that case) from one place and re-create it in another place.Using images instead of the "A" character is a matter of replacing the character with an image element having appopriate "src" attribute. It WILL run slower that way though.Don't try to learn from the mario example. It's an extreme point in JS game making. The same goes for the mummy example. Start with simple ASCII games, then moving on to vector graphics (SVG) or raster ones (GIFs, PNGs; whether they're in a data URL, or external).external as in a gif image in another folder or location on the web... My game wouldn't include images, just the vector graphics / css stuff...The thing you MUST understand is that its not just JavaScript, the same way desktop games are not just C++. There are other resources involved, images and music being the most common dominator. Those things are created separately. Programming languages like JavaScript just alter those otherwise "static" components into something that reacts based on a user aciton. My game wouldn't include any sound, just the interaction stuff with some lines which would be the explosion effect after a small pixel hits a space ship.I'll check out this Asteroids game code.. <style type="text/css"> body, input { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24pt; padding:3px; text-align:center; } h1 { font-size:30pt; margin-top:0px; margin-bottom:5px; } table#gamegrid { border-collapse:collapse; width:360px; height:360px; margin:auto; border:1px solid #999999; background-color:#EEEEEE; } table#gamegrid td { width:45px; /*border:1px solid #999999;*/ text-align:center; height:45px; } div#panel { border:1px solid #999999; }</style> Is this the window of the game? Link to comment Share on other sites More sharing options...
boen_robot Posted April 21, 2008 Share Posted April 21, 2008 From the point of view of the HTML document having JavaScript, ANY image file is external, since it's not "embedded" in the HTML file, but in another file. Whether this file is in the same folder/domain/whatever, it doesn't matter.With data URLs however, you can embed images into the HTML code itself. Example from Wikipedia: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" /> Just open this in Firefox, Opera, Safari or IE8, and look at the red dot. That's not an external image. It's embedded in the HTML code.As for your game... stop explaining! Start experimenting! Start with something as simple as getting a div to move around. If you want to use SVG, start by trying to make a rectangle move around. Actually, if you want that, here's a simple example I wrote after 20 minutes of playing: <?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="20%" cy="25%" rx="20%" ry="30%" style="fill:red;"/> <rect x="45%" y="45%" width="9%" height="9%" style="fill:#0F0;stroke-width:0.5%; stroke:#000;"/> <text y="40%" x="40%" alignment-baseline="middle">You need to have JavaScript available to play this game.</text> <script type="text/javascript"> document.documentElement.removeChild(document.getElementsByTagName('text')[0]); var rects = document.getElementsByTagName('rect'); var player = rects[0]; window.onkeypress = function(e) { var interval = 5; if (e.keyCode === 37) { player.setAttribute('x', -interval + Number(player.getAttribute('x').replace('%','')) + '%'); }else if (e.keyCode === 38) { player.setAttribute('y', -interval + Number(player.getAttribute('y').replace('%','')) + '%'); }else if (e.keyCode === 39) { player.setAttribute('x', interval + Number(player.getAttribute('x').replace('%','')) + '%'); }else if (e.keyCode === 40) { player.setAttribute('y', interval + Number(player.getAttribute('y').replace('%','')) + '%'); } }; </script></svg> Link to comment Share on other sites More sharing options...
Html Posted April 21, 2008 Author Share Posted April 21, 2008 I pasted that piece of code into notepad, then saved as .html. It says I need to have javascript available, its on.As well, um...my CSS is really rusty. Lets put it this way, I have a book and it talks about CSS for your layout in your page. So lets say with CSS you make a line or border, and construct a small box, a square. You then maniupulate that to move right, down.In the back of the book, it mentions "onkeydown", the page is titled CSS properties ---> "intrinsic events"."onkeyup""onkeypress"CSS + Javascript Link to comment Share on other sites More sharing options...
boen_robot Posted April 21, 2008 Share Posted April 21, 2008 I pasted that piece of code into notepad, then saved as .html. It says I need to have javascript available, its on.Save the file as .svg instead. It should've been obvious that this is not XHTML, but SVG.As well, um...my CSS is really rusty. Lets put it this way, I have a book and it talks about CSS for your layout in your page. So lets say with CSS you make a line or border, and construct a small box, a square. You then maniupulate that to move right, down.CSS + JavascriptOK. So what's the qeustion? How to do it? Adjust the CSS properties with JavaScript, the same way I have adjusted the SVG elements' attributes above. Link to comment Share on other sites More sharing options...
ShaggytheClown Posted April 21, 2008 Share Posted April 21, 2008 Why not just build it flash Link to comment Share on other sites More sharing options...
boen_robot Posted April 21, 2008 Share Posted April 21, 2008 Why not just build it flashFor the open sourceness? For the fun of it? For the children? OK... that last one was just a joke, but seriously, it's a good exercise, and besides, some people (myself included) would find XHTML+CSS+JavaScript(+SVG) easier than Flash. Link to comment Share on other sites More sharing options...
Synook Posted April 22, 2008 Share Posted April 22, 2008 I pasted that piece of code into notepad, then saved as .html. It says I need to have javascript available, its on.By the way it won't work in IE 6 (and 7?) because it doesn't understand SVG. Link to comment Share on other sites More sharing options...
jesh Posted April 22, 2008 Share Posted April 22, 2008 You could use canvas:http://en.wikipedia.org/wiki/Canvas_(HTML_element) Link to comment Share on other sites More sharing options...
Html Posted April 22, 2008 Author Share Posted April 22, 2008 Right I've tried your example out, so I just take a look at the code and mess around to get what I want? What about rotating the square? Left or right? Link to comment Share on other sites More sharing options...
Synook Posted April 23, 2008 Share Posted April 23, 2008 An extremely quick canvas example: <html> <head> <title>Canvas Game Test</title> <script type="text/javascript"> var canvas; var context; var rect = new Object(); rect.x = 0; rect.y = 0; window.onload = function() { canvas = document.getElementsByTagName("canvas")[0]; context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,0)"; context.fillRect(rect.x, rect.y, 20, 20); window.onkeypress = function(e) { context.clearRect(rect.x, rect.y, 20, 20); if (e.keyCode === 37) rect.x--; if (e.keyCode === 38) rect.y--; if (e.keyCode === 39) rect.x++; if (e.keyCode === 40) rect.y++; context.fillRect(rect.x, rect.y, 20, 20); } } </script> </head> <body> <canvas> </canvas> </body></html> An exceedingly complex example (ever played LocoRoco?):http://www.blobsallad.se/3D using Canvas:http://www.abrahamjoffe.com.au/ben/canvascape/http://developer.mozilla.org/samples/rayca.../RayCaster.html Link to comment Share on other sites More sharing options...
Synook Posted April 23, 2008 Share Posted April 23, 2008 The amazing possibilities of canvas - a simple practical Nibbles example I wrote:http://www.roundeddesign.com/lab/canvas.htmlNB: Doesn't work in Safari (or IE, obviously). Link to comment Share on other sites More sharing options...
Html Posted April 23, 2008 Author Share Posted April 23, 2008 Hello, people. I've decided to drop this. I'm no longer interested. Thank you for answering my questions. This topic may be handy for someone who may also be interested. Link to comment Share on other sites More sharing options...
jesh Posted April 23, 2008 Share Posted April 23, 2008 NB: Doesn't work in Safari (or IE, obviously).There's a javascript available that interprets the canvas code and automatically converts it so that it'll run in IE (using VML, I believe).http://sourceforge.net/project/showfiles.php?group_id=163391example usage:<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> Link to comment Share on other sites More sharing options...
boen_robot Posted April 23, 2008 Share Posted April 23, 2008 The amazing possibilities of canvas - a simple practical Nibbles example I wrote:http://www.roundeddesign.com/lab/canvas.htmlNB: Doesn't work in Safari (or IE, obviously).It will be great if the speed was adjustable or if the snake went on the other side of the playground when hitting an edge. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 23, 2008 Share Posted April 23, 2008 There's a bug in that game. If the red dot spawns inside the snake it disappears and you can't get it. And I was doing well too. Link to comment Share on other sites More sharing options...
Synook Posted April 23, 2008 Share Posted April 23, 2008 I fixed that, you must have played it before the update. Hmm... I'll make the speed adjustable and the walls teleporting tonight. Thanks for the ideas! Link to comment Share on other sites More sharing options...
justsomeguy Posted April 23, 2008 Share Posted April 23, 2008 It just happened for me again, same bug. I only got to level 9 this time. Link to comment Share on other sites More sharing options...
Synook Posted April 24, 2008 Share Posted April 24, 2008 umm ok maybe my fix didn't work :|Hrmm... thanks for the comments I'll see what I can do Link to comment Share on other sites More sharing options...
remrow Posted April 24, 2008 Share Posted April 24, 2008 well follow this link you can see some javascript games.http://www.dynamicdrive.com/dynamicindex12/index.htmlBut they are just basic.Don't expect to make a high end games from javasript Link to comment Share on other sites More sharing options...
Synook Posted April 24, 2008 Share Posted April 24, 2008 Yay my snake game has an update!* Disappearing food (JSG's) bug fixed* Snake can go through side and will appear on other* 5 speeds* Change in score is directly proportional to speed* Starter countdown displayhttp://www.roundeddesign.com/lab/canvas_snake.html Link to comment Share on other sites More sharing options...
Html Posted May 5, 2008 Author Share Posted May 5, 2008 I'm back again.I've got a question can it be made possible with the gfx, drawing classic style lines? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.