I want to use a gif I made for my sprite (it would be nice if the gif only played when the character moved) So far, I have a rectangle with choppy character movements. (It would also be nice if I could make the character movement smoother. I watched tons of tutorials but I couldn't find anything that shows how to do what I want to do.
Here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#backgroundColor {
width: 100px;
height: 100px;
background-color: white;
animation-name: backgroundChange;
animation-duration: 45s;
animation-iteration-count: infinite;
}
@keyframes backgroundChange {
0% {background-color: white;}
3.3% {background-color: #ffc5c5;}
6.6% {background-color: #f78a8a;}
10% {background-color: #f95d5d;}
13.3% {background-color: #f73737;}
16.6% {background-color: red;}
20% {background-color: #b70303;}
23.3% {background-color: #8c0202;}
26.6% {background-color: #5a0202;}
30% {background-color: #310101;}
33.3% {background-color: black;}
36.6% {background-color: #292929;}
40% {background-color: #3c3c3c;}
43.3% {background-color: #757575;}
46.6% {background-color: #d0d0d0;}
50% {background-color: white;}
53.3% {background-color: #ffc5c5;}
56.6% {background-color: #f78a8a;}
60% {background-color: #f95d5d;}
63.6% {background-color: #f73737;}
66.6% {background-color: red;}
70% {background-color: #b70303;}
73.3% {background-color: #8c0202;}
76.6% {background-color: #5a0202;}
80% {background-color: #310101;}
83% {background-color: black;}
86.6% {background-color: #292929;}
90% {background-color: #3c3c3c;}
93.3% {background-color: #757575;}
96% {background-color: #d0d0d0;}
100% {background-color: white;}
}
#canvas{
height: 540px;
width: 6350px;
position:absolute;
top:50%;
left:52%;
transform: translate(-50%,-50%);
box-shadow: 0 0 16px 2px rgba(0,0,0,0.4);
background-color: #FFF;
}
</style>
<title>Bermuda Triangle</title>
</head>
<body id="backgroundColor">
<img id="character" style="height: 40px; width: 40px;" src="https://piskel-imgstore-b.appspot.com/img/9478ea0f-79c8-11e8-b58c-67762e4a73c8.gif">
<canvas id='canvas' style="background-image:url(https://preview.ibb.co/fEanjo/realroom.jpg); height: 540px; width: 635px;"></canvas>
<script>
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
var xPos = 0;
var yPos= 0;
context.rect(xPos, yPos, 40, 40);
context.stroke();
function move(e) {
//alert(e.keyCode);
if(e.keyCode==83){
yPos+=10;
}
if(e.keyCode==87){
yPos-=10;
}
if(e.keyCode==65){
xPos-=10;
}
if(e.keyCode==68){
xPos+=10;
}
canvas.width=canvas.width;
context.rect(xPos, yPos, 40, 40);
context.stroke();
}
document.onkeydown = move;
</script>
</body>
</html>
