13pipegame.html

<canvas id='c'></canvas>
<script>
    var c = document.getElementById('c').getContext('2d')
    var x = 300                     // initial pipe position
    var my = 102                    // initial mario position
    var s = 0                       // initial speed
    
    // window.ontouchstart = jump   // for iOS
    window.onclick = function()
    { if (my >= 102) s = -3.5 }     // jump, upwards force hence negative
    
    draw()
    function draw(){
    c.fillStyle = 'skyblue'
    c.fillRect(0,0,300,150)

    c.fillStyle = 'brown'
    c.fillRect(0,130,300,20)
    
    c.fillStyle = 'green'
    c.fillRect(x,100,30,50)
    c.fillRect(x-10,80,50,20)
    
    x = x - 5                       // move pipe left
    if (x == -50)   x = 300         // if off screen left move to right side
    
    var mario = new Image()
    mario.src = "http://i66.tinypic.com/2e3tvsj.gif"
    c.drawImage(mario,50,my)
    
    my = my + s                     // initially 0 then -3.5 onclick
    if (my < 102)  s = s + 0.1      // downward force
    if (my > 102)  s = 0            // stop on floor
        
    if (!(x == 65 && my >= 102)) requestAnimationFrame(draw)
    }
</script>