Jade Red Code


At the top of this screen is the first ever keyboard controlled version of Jade Red created with HTML, CSS, and JavaScript coding.  Click in the area of the screen of the green square and it will give your keyboard's directional keys control of the green square.
Below is the code used to create the first ever coded keyboard controlled version of Jade Red.  
You can copy the code and use it for your own:



<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {
    border:1px solid #000000;
    background-color: #000000;
}
</style>
</head>
<body style="background-color: black;" onload="startGame()">

</body>

<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>
</html>