Jade Red Code


Created by jaderedandcannonballhead.com, designed for computer keyboard controls, at the top of this screen is the keyboard controlled version of Jade Red, the Jade Red Cartoons 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. After copying the code for your own use, change the word lime to the color of your choice to have your own colored jumping square.   



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