<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>动画</title>
<style type="text/css">
body
{
margin:0;
padding:0;
font-size:12px;
}
.map
{
width:600px;
height:500px;
border:solid #ccc 1px;
cursor:pointer;
background-image:url('http://images.cnblogs.com/cnblogs_com/xqhppt/371024/r_map.jpg');
}
.canvas
{
width:60px;
height:108px;
overflow:hidden;
position:absolute;
}
.main
{
margin:0;
position:relative;
}
</style>
</head>
<body>
<div class="map" id="map">
<div class="canvas" id="lxy">
<img id="main" class="main" alt="" src="http://images.cnblogs.com/cnblogs_com/xqhppt/371024/r_lxy.png" border="0" />
</div>
</div>
<script type="text/javascript">
Vector2 = function(x, y) { this.x = x; this.y = y; };
Vector2.prototype = {
copy: function() { return new Vector2(this.x, this.y); },
length: function() { return Math.sqrt(this.x * this.x + this.y * this.y); },
sqrLength: function() { return this.x * this.x + this.y * this.y; },
normalize: function() { var inv = 1 / this.length(); return new Vector2(this.x * inv, this.y * inv); },
negate: function() { return new Vector2(-this.x, -this.y); },
add: function(v) { return new Vector2(this.x + v.x, this.y + v.y); },
subtract: function(v) { return new Vector2(this.x - v.x, this.y - v.y); },
multiply: function(f) { return new Vector2(this.x * f, this.y * f); },
divide: function(f) { var invf = 1 / f; return new Vector2(this.x * invf, this.y * invf); },
dot: function(v) { return this.x * v.x + this.y * v.y; }
};
(function() {
var bindEvent,
createObj,
getRandom;
var $ = function(id) {
return document.getElementById(id);
}
bindEvent = function(obj, e, fun) {
if (window.attachEvent) {
obj.attachEvent('on' + e, function() { fun.call(obj); });
} else {
obj.addEventListener(e, fun, false);
}
}
getRandom = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$.bindEvent = bindEvent;
$.createObj = createObj;
$.getRandom = getRandom;
var game = {
main: null,
img: { w: 240, h: 432 },
man: { w: 60, h: 108 },
pos: null,
target: null,
lxyPos: null,
foorPos: null,
tempPos: null,
loop: null,
init: function() {
this.pos = new Vector2(0, 0);
this.lxyPos = new Vector2(0, 0);
this.foorPos = new Vector2(0, 0);
this.tempPos = new Vector2(30, 108);
this.main = $("main");
},
//走路
walk: function(obj, wdir) {
var s = obj.style;
this.pos.x += this.man.w;
switch (wdir) {
case 'E':
this.pos.y = 216;
break;
case 'N':
this.pos.y = 324;
break;
case 'S':
this.pos.y = 0;
break;
case 'W':
this.pos.y = 108;
break;
}
if (this.pos.x >= this.img.w) {
this.pos.x = 0;
//this.pos.y += this.man.h;
if (this.pos.y >= this.img.h) {
this.pos.x = 0;
this.pos.y = 0;
}
}
s.left = -this.pos.x + 'px';
s.top = -this.pos.y + 'px';
},
//开始
start: function(lxy, target) {
var _this = this;
this.loop = setInterval(function() {
_this.moveTo(lxy, target);
var wdir = _this.direction(_this.footPos, _this.target);
_this.walk(_this.main, wdir);
}, 120);
},
//移动
moveTo: function(obj, target) {
this.footPos = this.lxyPos.add(this.tempPos);
var t = target.subtract(this.footPos).normalize();
t = t.multiply(5);
this.lxyPos.x += t.x;
this.lxyPos.y += t.y;
var w = target.x;
var h = target.y;
if ((Math.abs(w - this.footPos.x) <= 5) && (Math.abs(h - this.footPos.y)) <= 5) {
clearInterval(this.loop);
}
obj.style.left = this.lxyPos.x + 'px';
obj.style.top = this.lxyPos.y + 'px';
},
//判断人物方向
direction: function(pos, target) {
var z = Math.abs(target.x - pos.x);
if (target.x > pos.x) {
if (target.y >= pos.y - z && target.y <= pos.y + z) {
return 'E';
}
if (target.y < pos.y - z) {
return 'N';
}
if (target.y > pos.y + z) {
return 'S';
}
}
if (target.x < pos.x) {
if (target.y >= pos.y - z && target.y <= pos.y + z) {
return 'W';
}
if (target.y < pos.y - z) {
return 'N';
}
if (target.y > pos.y + z) {
return 'S';
}
}
}
}
onload = function() {
game.init();
$.bindEvent($("map"), "click", function(e) {
clearInterval(game.loop);
var e = e || window.event;
var x = e.clientX;
var y = e.clientY;
game.target = new Vector2(x, y);
var lxy = $("lxy");
game.start(lxy, game.target);
});
}
})();
</script>
</body>
</html>