<!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>