JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script type="text/javascript" src="http://strd6.com/space_demo/javascripts/jquery.hotkeys.js" ></script>
<script type="text/javascript" src="http://strd6.com/space_demo/javascripts/key_status.js" ></script>
<div>
    <canvas id="Canvas" width="400" height="400" />
  
    </div>
      press left key to move

CSS

#Canvas{border:1px solid #666;
            background:white;
            }

JavaScript

$(document).ready(function () {
            var canvas = $("#Canvas")[0].getContext("2d"); // the "context" of the canvas that will be used (2D or 3D)
            var speed = 10; // the rate of change (speed) horizontal object
            var x = 64; // horizontal position of the object (with initial value)
            var y = 64; // vertical position of the object (with initial value)
            var CanvasWidth = 400; // width of the rectangular area
            var CanvasHeight = 400; // height of the rectangular area
            var characterImg = new Image(); // Image to be loaded and drawn on canvas
            var CurentPos = 3; // display the current position of the character
            var ImgNumb = 10; // Number of images that make up the movement
            var Fps = 20;
            $(window).load(init());
     var left = 250;
            function init() {
                characterImg.style.border = '1px solid black';
                characterImg.onload = function () {
                    characterImg.style.border = '1px solid white';
                    canvas.drawImage(characterImg, CurentPos * 64, 64, 64, 64,
                          250, 200, 64, 64);
                };
                characterImg.src = "http://david.blob.core.windows.net/easeljstutorials/img/MonsterARun.png";

            }


            function update() {
                canvas.clearRect(0, 0, CanvasWidth, CanvasHeight);
                if (keydown.left) {
                        CurentPos++;
                        if (CurentPos == ImgNumb) {
                            CurentPos = 0;
                        }
                    left-=5;
                }
            } // end update

            setInterval(function () {
                update();
                draw();
            }, 1000 / Fps);



            function draw() {
                canvas.drawImage(characterImg, CurentPos * 64, 0, 64, 64, left, 200, 64, 64);
            }

        });