Jade Red Martial Arts Code


Created by jaderedandcannonballhead.com, designed for computer keyboard controls, at the top of this page you should see Jade Red, a green square that dropped into position onto the screen.  Click in the canvas area of the green square's screen and it will give your desktop computer's keyboard directional arrows control of the green square.
Here is the code to have your own. Copy the code and change the word lime to the color of your choice. (made with HTML, CSS, and JavaScript coding):


<!DOCTYPE HTML>
<html>

<head>

<style>

canvas {
    border:1px solid #000000;
    background-color: #000000;
}

</style>

</head>

<body style="background-color: black;" onload="startGame()">

<script>

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "lime", 80, 0);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1300;
        this.canvas.height = 313;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);      
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || [ ]);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
   },
    stop : function() {
        clearInterval(this.interval);
    },  
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height;
    this.speed = 0;
    this.x = x;
    this.y = y;  
    this.speedX = 0;
    this.speedY = 0;  
    this.gravity = 1;
    this.gravitySpeed = 0;
    this.bounce = 0.2;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
      
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();
    }
    this.newPos = function(Y) {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
  
  
    this.hitBottom = function(Y) {    
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
        <!-- this.gravitySpeed = 0; remove these comment tags if the .bounce lines are removed-->  
        this.gravitySpeed = -(this.gravitySpeed * this.bounce);
        }
    }
  
  
}

function updateGameArea() {
     myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;  
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX= -5; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX= 5; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY= -15; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY= 0; }
    myGamePiece.newPos();
    myGamePiece.update();
    
}

</script>
</body>
</html>