sprite.js
/**
* Created by suxiaoxia on 2017/7/15.
*/
function sprite(option) {
this._init(option);
}
sprite.prototype = {
/*初始化*/
_init:function (option) {
this.x = option.x || 0;
this.y = option.y || 0;
this.w = option.w || 40;
this.h = option.h || 65;
this.fps = option.fps || 10;
this.originW = option.originW || 40;
this.originH = option.originH || 65;
this._dirIndex = 0;
this._imgSrc = option.imgSrc || '';
},
render:function (ctx) {
var img = new Image();
img.src = this._imgSrc;
var self = this;
img.onload = function () {
var frameIndex = 0;
setInterval(function () {
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(
img,
frameIndex*self.originW,
self._dirIndex*self.originH,
self.originW,
self.originH,
self.x,
self.y,
self.w,
self.h
);
frameIndex++;
frameIndex %= 4;
},1000/self.fps)
}
},
changeDir:function (dir) {
if (dir == 'left'){
this._dirIndex = 1;
}
if (dir == 'right'){
this._dirIndex = 2;
}
if (dir == 'up'){
this._dirIndex = 3;
}
if (dir == 'down'){
this._dirIndex = 0;
}
}
};index.html
<head>
<meta charset="UTF-8">
<title>Title</title>
//引入sprite.js文件
<script src="sprite.js"></script>
</head>
<body>
<div>
<canvas id="canvas">
你的浏览器不支持canvas，请升级浏览器
</canvas>
</div>
<button id="btn-dir-left">←</button>
<button id="btn-dir-right">→</button>
<button id="btn-dir-up">↑</button>
<button id="btn-dir-down">↓</button>
<script>
(function () {
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
canvas.style.border = "1px solid #000";
var s = new sprite({
x:300,
y:300,
w:80,
h:65*2,
fps:4,
originW:40,
originH:65,
imgSrc:'../img_a/DMMban.png'
});
s.render(ctx);
//绑定按钮的点击事件
var btnLeft = document.getElementById('btn-dir-left');
btnLeft.onclick = function() {
s.changeDir('left');
};
var btnRight = document.getElementById('btn-dir-right');
btnRight.onclick = function() {
s.changeDir('right');
};
var btnUp = document.getElementById("btn-dir-up");
btnUp.onclick = function() {
s.changeDir('up');
};
var btnDown = document.getElementById('btn-dir-down');
btnDown.onclick = function() {
s.changeDir('down');
};
})();
</script>
</body>
