<!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>非自走型tank！！！！</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.map {
background: gray;
border: 1px solid black;
position: relative;
margin: 50px auto;
width: 416px;
height: 416px;
}
.tank {
background-image: url("//images0.cnblogs.com/blog/294743/201306/12123133-eaa9ada8690e4216a2bee3e56442e032.gif");
background-repeat: no-repeat;
overflow: hidden;
position: absolute;
width: 32px;
height: 32px;
z-index: 3;
}
</style>
</head>
<body>
<div class="map" id="map">
<div id="me" class="tank">
</div>
</div>
<script type="text/javascript">
//js取不到样式表的值，暂时先这样
var MyGlobal = {
mapWidth: 416,
mapHeight: 416
};
var Tank = function (id, dir, x, y) {//div的id,方向,起始坐标
this.el = document.getElementById(id);
this.direction = dir ? dir : 'up';
this.speed = 10;//越大越慢
//坦克活动状态 0 未活动 1 正在活动
this.activeState = 0;
this.tid = null;
this.x = x ? x : 100;
this.y = y ? y : 200;
};
Tank.prototype.init = function () {//tank生成位置
var dir = this.direction;
var tank = this.el;
tank.style['left'] = this.x + 'px';
tank.style['top'] = this.y + 'px';
this.setDirection(dir);
};
Tank.prototype.setDirection = function (dir) {//tank方向图片
var tank = this.el;
if (dir == 'up') {
tank.style['backgroundPosition'] = '0 0';
}
if (dir == 'right') {
tank.style['backgroundPosition'] = '-5px -36px';
}
if (dir == 'down') {
tank.style['backgroundPosition'] = '0 -73px';
}
if (dir == 'left') {
tank.style['backgroundPosition'] = '0 -105px';
}
};
Tank.prototype.move = function (dir) {//tank移动
if (this.activeState != 0) return false; //正在运动不管他
this.activeState = 1; //将当前状态设置为正在运动
if (this.direction != dir) {//转向
this.direction = dir;
this.setDirection(dir);
}
var tank = this.el;
//获得当前位置
var xpos = tank.style['left'] ? tank.style['left'] : 0;
var ypos = tank.style['top'] ? tank.style['top'] : 0;
xpos = parseInt(xpos);
ypos = parseInt(ypos);
//最大范围
var mx = MyGlobal.mapWidth - 32;
var my = MyGlobal.mapHeight - 32;
switch (dir) {
case 'up': ypos <= 0 ? 0 : ypos--; break;
case 'right': xpos >= mx ? mx : xpos++; break;
case 'down': ypos >= my ? my : ypos++; break;
case 'left': xpos <= 0 ? 0 : xpos--; break;
}
//重新设置坦克位置
tank.style['left'] = xpos + 'px';
tank.style['top'] = ypos + 'px';
//处理运动中的定时器
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
}
//为了移动得更平滑
this.x = xpos;
this.y = ypos;
var scope = this;
var speed = this.speed;
var repeat = function () {
scope.move(dir);
};
if (!this.tid) {
this.tid = setTimeout(repeat, speed);//10毫秒移动一次
}
//移动结束
this.activeState = 0;
}
Tank.prototype.stop = function () {
clearTimeout(this.tid);
this.tid = null;
};
var tank = new Tank('me', 'right', 100, 100);
tank.init();
function getDir(code) {
if (code == '87' || code == '119') {
return 'up';
}
if (code == '100' || code == '68') {
return 'right';
}
if (code == '115' || code == '83') {
return 'down';
}
if (code == '97' || code == '65') {
return 'left';
}
return null;
}
document.onkeydown = function (evt) {//按下键盘
evt = (evt) ? evt : window.event;
var keyCode = evt.keyCode;
if (keyCode) {
dir = getDir(keyCode.toString());//获得方向
}
tank.setDirection(dir);
if (dir)
tank.move(dir);//移动
evt.preventDefault();
return false;
};
document.onkeyup = function (evt) {//松开键盘
tank.stop();
};
document.onkeypress = function (evt) {//从按下到松开键盘
evt = (evt) ? evt : window.event;
var keyCode = evt.keyCode;
if (keyCode) {
dir = getDir(keyCode.toString());//获得方向
}
if (dir)
tank.move(dir);
evt.preventDefault();
return false;
};
</script>
</body>
</html>
