HTML
Dashcode Invader: Using Dashcode To Create A Game
May 29, 2009
0

In this tutorial, we will continue building a simple space-invader type game. We will be continuing from the tutorial presented in Part1 at https://permadi.com/blog/?p=1131; however, we are making some major changes, and I’ll explain why.

The first change has to do with restructuring the CSS code so that most of the objects within the game are nested inside a div element. The reason for this is to make it easier to add game elements into the game by using addChild to add into a div container.

The index.html should be modified to look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>GameShip</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.6">
    <meta name="apple-mobile-web-app-capable" content="YES">
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
<link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="Parts/utilities.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/setup.js" charset="utf-8"></script>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Text.js" charset="utf-8"></script>
</head>
<body onload="load();">
  <div id="content">
    <div id="background" class="background"
      ontouchmove="onTouchMoveHandler(event)" ontouchstart="onTouchStartHandler(event)"
      onmousemove="onMouseMoveHandler(event)">
      <div id="playerShip" class="playerShip"
         ontouchmove="onTouchMoveHandler(event)" ontouchstart="onTouchStartHandler(event)"
         onmousemove="onMouseMoveHandler(event)">
      </div>
    </div>
  </div>
</body>
</html>

Hierarchically, the main container is “content” div. Inside the “content” div, is the “background” div.
“background” div contains the background image (see in the style-sheet, which we will show later).
“background” div also contains the “playerShip” div.
Later on, we will add more game-objects (such as bullets and enemies into the “background” div.

The main.css should be modified to look like this:

body {
    margin: 0px;
    min-height: 356px;
    font-family: Helvetica;
}

.background {
    position: absolute;
    width: 320px;
    height: 358px;
    left: 0px;
    top: 0px;
    background-image: url(Images/texture.png);
}

.playerShip {
    width: 64px;
    height: 64px;
    position: absolute;
    left: 131px;
    background-image: url(Images/player.png);
    top: 282px;
}

#content {
    position: relative;
    -webkit-margin-top-collapse: separate;
    -webkit-margin-bottom-collapse: separate;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    width: auto;
    min-height: 356px;
    height: auto;
}

We assigned the images, which were previously embedded in the html, as background-image of the div style-sheets.

We are also modifying the main.js by adding a new function named onMouseMoveHandler(). This function is attached to the onmousemove events in the background and playerShip divs. The reason for this is debugging and portability. One of the bonus of using Dashcode to develop iPhone application, is that some application can be made to run in a desktop web-browser as well as in iPhone (which runs the Safari mobile browser). Back in the previous tutorial, we are only supporting ontouchmove, which only exists on the iPhone. By adding something equivalent (which is onmousemove in this case), we can make the similar effect in a regular browser. Note: our implementation ignores the “drag” aspect, so when run in a regular browser, you don’t have to actually click (touch) the screen to move the ship, but you could if you want, by setting a flag when the user clicks and releases the mouse-button.

function load()
{
    dashcode.setupParts();
}

function onTouchStartHandler(event)
{
    event.preventDefault();
}

function onTouchMoveHandler(event)
{
    var ship=document.getElementById('playerShip');
    ship.style.left=
        (event.changedTouches[0].pageX-ship.style.width)+"px";
    event.preventDefault();
}

function onMouseMoveHandler(event)
{
    var ship=document.getElementById('playerShip');
    ship.style.left=
        (event.pageX-ship.style.width)+"px";
}

The new onMouseMoveHander function is pretty similar to the onTouchMoveHandler, because they do similar thing, the difference is we use event.pageX to detect the mouse position.

You can see the result playing in the browser below (I tested with Firefox 3 and iPhone Simulator on the Mac).

The next part of the post is here: https://permadi.com/blog/2010/03/dashcode-invader-using-dashcode-to-create-a-game-part-2/. Meanwhile, the Dashcode project can be downloaded here.