Mario spēle

unknown
html
2 years ago
1.8 kB
154
Indexable
Never
<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>
<script>
var marioX = 100, marioY = 100, speedY = 0;
var rightPressed = false, leftPressed = false;
var direction = 'right';
var img = "mario.png";
setInterval(function(){

    $("#mario").css({top: marioY, left: marioX});
    
    marioY -= speedY;
    
    $("#mario").css("transform", 
    "scaleX("+(direction == 'right' ? 1 : -1)+")");
    
    var oldImg = img;
    if (leftPressed || rightPressed)
        img = "marioRun.gif";
    else
        img = "mario.png";
        
    if (oldImg != img)
        $("#mario").attr("src", 
        "https://www.ambex.lv/games/mario/"+img);
        
    if (rightPressed) marioX += 10;
    else if (leftPressed) marioX -= 10;
    
    speedY -= 2;
    
    if (marioY > 250)
    {
        marioY == 250;
        speedY = 0;
    }
    
}, 30);
function keyPressed(kc)
{
    if (kc == 32)
        speedY = 20;
    
    if (kc == 39)
    {
        rightPressed = true;
        direction = 'right'
    }
    if (kc == 37)
    {
        direction='left';
        leftPressed = true;
    }   
}
function keyReleased(kc)
{
    if (kc == 39)
        rightPressed = false;
    
    if (kc == 37)
        leftPressed = false;
    
}
</script>
<style>
body
{
    margin: 0px;
}
#screen
{
    width: 100%;
    height: 100%;
    background: url(https://www.ambex.lv/games/mario/bg.png);
    background-size: cover;
    background-position: bottom;
}
#mario
{
    position: absolute;
    top: 100px;
    left: 100px;
    height: 100px;
}
</style>
<body onkeydown="keyPressed(event.keyCode)" onkeyup="keyReleased(event.keyCode)">
<div id='screen'></div>
<img src='https://www.ambex.lv/games/mario/mario.png' id='mario'>
</body>