У меня по рукой, правда, нет отдельных кадров движения...
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="Game">
<div class="bg" width="800" height="300">
<canvas id="canvas" width="800" height="300"></canvas>
<img id="background"/>
<img id="cat">
</div>
</div>
</div>
<script>
//Game
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
var width = 800, height = 300;
canvas.width = width;
canvas.height = height;
var bg = document.getElementById('background');
var cat = document.getElementById('cat');
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'https://javascript.ru/forum/images/ca_serenity/misc/logo.gif';
var a = 1;
var b = 1;
var c = 1;
var standLoop;
var oldKey;
stand();
// DRAW game
function moveRight(){
cat.src = 'https://javascript.ru/cat/list/donkey.gif';
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
if (a>=8) {
a=0;
}
a++;
};
function moveLeft(){
cat.src = 'https://javascript.ru/cat/list/event.gif';
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
if (b>=8) {
b=0;
}
b++;
};
function stand(){
cat.src = 'https://javascript.ru/cat/list/jquery_54.png';
cat.onload = function(){
context.clearRect(0, 0, 800, 300);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
};
if (c>=10) {
c=0;
}
c++;
};
//MOVE CAT
var x = 0;
var y = 200;
function CheckPos(x) {
if(x <= 700 && x >= 0){
return true;
}
else return false;
}
window.onload = function () {
window.onkeydown = function(event){
clearInterval(standLoop);
/* move right */
if(event.keyCode == 68 || oldKey == 68 ){
if(CheckPos(x+5)){
oldKey = 68;
x+=5;
moveRight();
}
}
/* move left */
else if(event.keyCode == 65 || oldKey == 65){
if(CheckPos(x-5)){
oldKey = 65;
x-=5;
moveLeft();
}
}
};
window.onkeyup = function (event) {
if(event.keyCode == 65 || event.keyCode == 68) {
oldKey = 0;
standLoop = setInterval(stand, 200);
}
};
};
</script>
</body>