DaveGame example

by Silambarasan_sundaram

HTML

<script src="http://strd6.com/space_demo/javascripts/jquery.hotkeys.js"></script>
<script src="http://strd6.com/space_demo/javascripts/key_status.js"></script>
 <canvas id="MyCanvas" width="400" height="232"  ></canvas>
<ul>
    <li>y = <span id="posY" /></li>
    <li>vy = <span id="vy" /></li>
</ul>

CSS

canvas
    {
      border: 1px solid black;
    }

JavaScript

$(document).ready(function () {
     divPosY = document.getElementById("posY");
     divVY = document.getElementById("vy");
        var ctx = $("#MyCanvas")[0].getContext("2d"); // the "context" of the canvas that will be used (2D or 3D)
        var cw = 400; // width of the rectangular area
        var ch = 232; // height of the rectangular area

        var FieldImg = new Image(); // Image to be loaded and drawn on canvas
        var characterImage = new Image();
        var ImgNumb = 12; // Number of images that make up the movement
        var Fps = 30;
var gravity=0.9;
     var vy=(Math.random() * -15) - 5;
        function init() {
            FieldImg.src = "http://www.nihilogic.dk/blog-files/mariobackground.png";
            characterImage.src = "http://www.nihilogic.dk/blog-files/mariosprite.png";

        }
        var game = setInterval(function () {
            update();
            character.draw();
            world.draw();
        }, 1000 / Fps);

        var world = {
            startXpos: 0,
            startYpos: 0,
            draw: function () {
                ctx.drawImage(FieldImg, this.startXpos, this.startYpos, cw, ch, this.startXpos, this.startYpos, cw, ch);
            }
        };




        var character = {
            x: 100, // horizontal position of the object (with initial value)
            y: 184, // vertical position of the object (with initial value)
            
            width: 16,
            height: 16,
            speed: 4,
            CurentPos: 6, // display the current position of the character
            direction: '',
            draw: function () {
                switch (this.direction) {
                    case 'L':
                        ctx.drawImage(characterImage, this.CurentPos * this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height);
                        break;
                    case 'U':
                        ctx.drawImage(characterImage, this.CurentPos * this.width,...