Play the same game across several platforms

Building a Cross Platform Game!

You are the new architect of GameDuell and the management has a new task for you:

And how do you code the server?

JBoss Drools

• Developed by JBoss
• Rule based coding environment
• Direct integration with Java
• Readable behavior
• Enables declarative programming
• Models a state machine

Hello World!

rule "Boss is killed"
  when
    $boss : Boss()
    $total : Number( doubleValue >= $boss.maxLive )
        from accumulate( Damage( target == $boss,
            $value : value ), sum( $value ) )
  then
    /* boss is killed! */
end

New HTML Markup

New HTML Markup

<span>Loading, please wait</span><br>
<progress id="loader" max="100" value="40">working...</progress><br>
<button onclick="document.getElementById('loader').value += 10">+10!</button>
                        

New HTML Markup

New HTML Markup

<meter id="live" min="0" max="100" optimum="100" low="30" high="60" value="100">
    Live</meter><br>
<button onclick="document.getElementById('live').value -= 10">
    Hit it!</button>

CSS3 - Borders

CSS3 - Borders

<style>
    .bigdiv {
    width: 80px; height: 80px;
    }
    .roundBorders {
    -webkit-border-radius: 20px;
    }
    .circleBorders {
    -webkit-border-radius: 40px;
    }
</style>
<div class="roundBorders bigdiv red"></div>
<div class="circleBorders bigdiv red"></div>

CSS3 - Gradients

CSS3 - Gradients

<style>
    .blaugrana {
        background-image: -webkit-linear-gradient(top, red 0%,
            blue 50%, blue 50%, red 100%);
    }
</style>
<div class="blaugrana largediv"></div>
                        

CSS3 Transform

CSS3 Transform

<style>
#ex.red.box {
  background-color: red;
  width: 400px;height: 200px;margin: auto;
  -webkit-transition: all 3s;
}
.rotate {
  -webkit-transform: perspective( 400px ) rotateY( 45deg );
  -webkit-transition: all 3s;
}
</style>
<div id="ex" class="red box"></div>
<br>
<button onclick="document.getElementById('ex').classList.toggle('rotate')">
    Click Me</button>

CSS3 Animations

CSS3 Animations

<style>
#ex2 {
    width: 100px; height: 100px;    margin: auto;
    background: red;
}
#ex2.animate {
    -webkit-animation: myfirst 5s;
}
@-webkit-keyframes myfirst {
    from {background: red;}
    to {background: blue;}
}
</style>
<div id="ex2"></div>
<button onclick="document.getElementById('ex2').classList.toggle('animate')">
    Animate!</button>

CANVAS - Drawing in the browser

CANVAS - Drawing in the browser

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var r = 90;

  ctx.beginPath();
  ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();

  ctx.lineWidth = 8;
  ctx.strokeStyle = 'blue';
  ctx.stroke();
</script>

SVG - Another way of drawing

SVG - Another way of drawing

<svg id="swoosh" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,153 c407.7,76.5 611.55,-91.5 1359,-20" class="outer"></path>
    <path d="M0,153 c407.7,76.5 611.55,-91.5 1359,-20" class="inner"></path>
</svg>
<style>
#swoosh path {
    stroke-linecap: square;
    fill: none;
}
#swoosh path.inner {
    stroke: #A01215;
    stroke-width: 80;
    stroke: #148a21;
}
#swoosh path.outer {
    stroke: #017316;
    stroke-width: 120;
    filter: url(#shwooshShadow);
}
</style>

WebSockets - Talking to the Server

WebSockets - Example

var websocket = new Websocket("ws://myserver.com/path/to/connect");
websocket.onopen = function (event) {
//Websocket is fully functional now
};
websocket.onmessage = function (event) {
//Called every time the server sends a message
};
websocket.onerror = function (event) {
//Called when there is an error communicating with the server
}
websocket.onclose = function (event) {
//Called when the connection to the server is closed
}
//to send messages
websocket.send("foo");
//end communication
websocket.close();

After some time developing...

You have your Cross Platform Site!

Questions?

Wait for it! There is more!

Further Information

Keep in touch:inside.gameduell.dewww.techtalk-berlin.de