Jump to content

2D game


Html

Recommended Posts

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

  • Replies 78
  • Created
  • Last Reply

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

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

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

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

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

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

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 + Javascript
OK. 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

Why not just build it flash
For 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

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

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

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

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

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

:) 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

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

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

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...