I need help making an interactive sprite in JS
I need help making an interactive sprite in JS
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 (you can ignore css)
<!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>
Sure I edited it.
– Yasir YILMAZÇOBAN
Jul 1 at 2:19
1 Answer
1
Did you try PixiJS? I suggest you have to look at PixiJS if you want to make good animations. Also if you want to develop games Phaser is very nice framework to develop javascript based games.
They're helpful but I want to create the game all by plain code so I can use it when I'm applying for colleges.
– Yasir YILMAZÇOBAN
Jul 1 at 3:37
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Can you show the code you have?
– Legman
Jul 1 at 1:58