Jade Red Code


At the top of this screen is the keyboard controlled version of Jade Red green square 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 typed into the .html file used to create the coded keyboard controlled version of Jade Red.  



<!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>