Jade Red Code


At the top of this page you should see 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 keyboard's directional arrows control of the green square.
Here is the code to have your own Jade Red (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()">

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