I am an expert in Javascript
To animate a sprite you need an element, CSS to set it to the size of one entity of the sprite, and you need to the change the css background position x
This is very basic stuff. I have built game engines with 3d model loading, physics, collision detection, ray casting, etc. all in pure vanilla javascript. I have even ported C++ physic libraries to JS and loaded them with ASM JS. That being said, If your goal is to develop games and you are already not a master in JavaScript, I recommend you focus your efforts on learning unity.
The learning curve on web development is not as steep as unity or some of the other options people are suggesting, however it is even more steep to build complex games in JS code than to build them in something like unity. Unity has html5 modules so you can run the game in a browser. You can also do the scripting in JS code. However if you really want to animate a sprite in JS code here you go:
HTML:
Code: Select all
<doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="animate"></div>
</body>
</html>
Code: Select all
.animate {
background-image: url('https://s3.envato.com/files/206414112/2D%20Game%20Character%20Sprites%20%20(2).jpg');
width: 70px;
height: 130px;
background-position-x: 905px;
background-position-y: 295px;
}
Code: Select all
var speed = 100;
var positions = [1428, 1319, 1210, 1102, 996, 905];
var index = 0;
setInterval(function(){
if (index > (positions.length - 1)) {
index = 0;
}
$('.animate').css('background-position-x', positions[index] + 'px');
index++;
}, speed);
Here is a codepen:
https://codepen.io/mattgardner/pen/prQxbe