JSFiddle - React, Tailwind, and code Playground
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>
CSS
canvas
{
border: 1px solid black;
}
JavaScript
$(document).ready(function () {
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 = 6;
var jumping = false;
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();
world.draw();
character.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, 0, this.width, this.height, this.x, this.y, this.width,...