📄 girl.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>my girl - dh20156风之石</title>
<script type="text/javascript">
function game(_desk,_map,_mapImage){//游戏容器，地图对象，地图图片
var dh = this;
this.desk = _desk;
this.map = _map;
this.map.style.background = "url("+_mapImage+") left top";
this.girls = [];
this.indexgirl = 0;
this.addgirl = function(_src,_width,_height,_x,_y,_speed,_anidelay){
var newgirl = new girl(_src,_width,_height,_x,_y,_speed,_anidelay);
this.girls.push(newgirl);
this.map.appendChild(newgirl.human);
}
function girl(_src,_width,_height,_x,_y,_speed,_anidelay){//人物图片，宽，高，起始X坐标，起始Y坐标，移动速度，动画效果间隔时间
this.speed = _speed;
this.anidelay = _anidelay;
this.width = _width;
this.height = _height;
this.x = _x;
this.y = _y;
this.direction = 0;
this.timer = null;
this.timer2 = null;
var index = (dh.girls.length>0)?dh.girls.length:0;
var newgirl = document.createElement("DIV");
newgirl.setAttribute("oname","mygirl");
newgirl.setAttribute("index",index);
newgirl.setAttribute("title","点我进行控制！");
newgirl.style.position = "absolute";
newgirl.style.zIndex = 100;
newgirl.style.left = _x+'px';
newgirl.style.top = _y+'px';
newgirl.style.width = _width+'px';
newgirl.style.height = _height+'px';
newgirl.style.background = "url("+_src+") 0 bottom no-repeat";
newgirl.style.overflow = "hidden";
this.human = newgirl;
return this;
}
//执行移动
girl.prototype.moveGirl = function(x1,y1){
this.stop();
this.getdir(x1,y1);
this.gotopos(x1,y1);
}
//获取方向
girl.prototype.getdir = function(x1,y1){
var x0 = this.x;
var y0 = this.y;
var _angle = Math.ceil(angle(x0,y0,x1,y1));
if(255<_angle && _angle<285){
this.direction = 0;//6点钟方向
}
if(195<_angle && _angle<255){
this.direction = 1;//7、8点钟方向
}
if(165<_angle && _angle<195){
this.direction = 2;//9点钟方向
}
if(105<_angle && _angle<165){
this.direction = 3;//10、11点钟方向
}
if(75<_angle && _angle<105){
this.direction = 4;//12点钟方向
}
if(15<_angle && _angle<75){
this.direction = 5;//1、2点钟方向
}
if(_angle<15 || _angle>345){
this.direction = 6;//3点钟方向
}
if(285<_angle && _angle<345){
this.direction = 7;//4、5点钟方向
}
}
//求倾斜角
function angle(x0,y0,x1,y1){
var x = x1-x0;
var y = y0-y1;
var _angle = Math.atan(y/x)*(180/Math.PI);
if(x<0){
return _angle + 180;
}else if(y<0){
return _angle + 360;
}
return _angle;
}
//获取动画贴图Y坐标
girl.prototype.getposY = function(){
var _y;
switch(this.direction){
case 0:_y=this.height*-7;break;
case 1:_y=0;break;
case 2:_y=this.height*-4;break;
case 3:_y=this.height*-2;break;
case 4:_y=this.height*-6;break;
case 5:_y=this.height*-1;break;
case 6:_y=this.height*-5;break;
default:_y=this.height*-3;break;
}
return _y;
}
//动画效果
function moveani(obj,x1,y1){
this.moveobj = obj;
this.gmx = 0;
this.gmy = this.moveobj.getposY();
//人物动画
this.ani = function(){
if(Math.abs(this.gmx)>=obj.width*3){
this.gmx = 0;
}else{
this.gmx -= obj.width;
}
this.moveobj.human.style.backgroundPosition = this.gmx+"px "+this.gmy+"px";
}
this.x0 = this.moveobj.x;
this.y0 = this.moveobj.y;
this.tx = (x1-this.x0);
this.ty = (y1-this.y0);
//当前步进
this.curStep = 0;
//距离
this.steps = Math.abs(this.tx)>Math.abs(this.ty)?Math.abs(this.tx):Math.abs(this.ty);
//时间
this.times = Math.ceil(this.steps/this.moveobj.speed);
//人物移动
this.move = function(){
this.curStep++;
if(this.curStep>this.steps){
this.moveobj.stop();
}
var x2 = this.tx*this.curStep/this.steps+this.x0;
var y2 = this.ty*this.curStep/this.steps+this.y0;
this.moveobj.human.style.left = x2+"px";
this.moveobj.human.style.top = y2+"px";
this.moveobj.x = x2;
this.moveobj.y = y2;
}
}
//两点间移动
girl.prototype.gotopos = function(x1,y1){
var gm = new moveani(this,x1,y1);
function playani(){
gm.ani();
gm.moveobj.timer1 = window.setTimeout(playani,gm.moveobj.anidelay);
}
function movepos(){
gm.move();
}
playani();
this.timer2 = window.setInterval(movepos,gm.times);
}
//停止
girl.prototype.stop = function(){
window.clearTimeout(this.timer1);
this.timer1 = null;
window.clearInterval(this.timer2);
this.timer2 = null;
var _y = this.getposY();
this.human.style.backgroundPosition = "0px "+_y+"px";
return;
}
function setpos(e){
e = e||window.event;
var obj = e.srcElement||e.target;
if(obj.tagName=="DIV" && obj.getAttribute("oname")=="mygirl"){
dh.indexgirl = obj.getAttribute("index");
}else{
var x = e.clientX||e.pageX;
var y = e.clientY||e.pageY;
dh.girls[dh.indexgirl].moveGirl(x-Math.floor(dh.girls[dh.indexgirl].width/2),y-Math.floor(dh.girls[dh.indexgirl].height/2));
}
}
if(document.attachEvent){
this.desk.attachEvent('onclick',setpos);
}else{
this.desk.addEventListener('click',setpos,true);
}
}
</script>
</head>
<body>
<ul style="float:right;color:white;width:300px;">
<li><strong>人物移动</strong></li>
<li style="margin:5px 0;">简单实现人物移动及动画效果</li>
<li>选定要控制的人物，在页面空白处单击以控制他的行动。</li>
</ul>
<script type="text/javascript">
var mygame = new game(document.documentElement,document.body,"map.gif");
mygame.addgirl("girl.gif",60,65,200,100,10,200);
mygame.addgirl("girl.gif",60,65,300,200,20,150);
mygame.addgirl("girl.gif",60,65,400,300,30,100);
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -