38-JavaScript-DOM-拖拽窗口-坦克的转向与移动
1. Style对象
1.1 参考
http://www.w3school.com.cn/htmldom/dom_obj_style.asp
1.2 说明
document.getElementById("id").style.property="值"
所有的HTML元素都有style属性
2. 拖拽窗口
1) 标题中文字不被选中
① IE
JS: obj.onselectstart = function(){
return false;
}
② Firefox
CSS: -moz-user-select: none;
2) 实现
① 简单实现(FireFox)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var out;
var title;
window.onload = function() {
out = document.getElementById("out");
title = document.getElementById("title");
// 标题 div 被按下时, 开始拖动
title.onmousedown = startDrag;
// 标题 div 被按下时, 停止拖动
title.onmouseup = stopDrag;
title.onselectstart = function(){ // IE , 文字无法被选中
return false;
}
}
window.captureEvents
function startDrag() {
window.onmousemove = function(evt) {
evt = evt || window.event;
out.style.top = evt.clientY - 5;
out.style.left = evt.clientX - 5;
}
}
function stopDrag() {
window.onmousemove = null;
}
</script>
<style type="text/css">
#out {
width: 100px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 100px;
left: 200px;
}
#title {
cursor: move;
width: 100px;
height: 20px;
background-color: blue;
-moz-user-select: none; /* Firefox, 文字无法被选中*/
}
</style>
</head>
<body>
<div id="out">
<div id="title">可拖动</div>
</div>
</body>
</html>
② 设置事件只在被拖拽的窗口中有效
参考: http://blog.sina.com.cn/s/blog_4a9b5035010009se.html
就是设置一个对象的方法被触发的范围，或者作用域。
如果不设置，则div只在当前窗口内被触发。
如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var out; // 整个div
var title; // 标题div
window.onload = function() {
out = document.getElementById("out");
title = document.getElementById("title");
title.onmousedown = function(evt) {
evt = evt || window.event;
/* 鼠标指针 距离 title 左上角的坐标差 */
//设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
// IE: offsetX; Firefox: layout;
var titleX = evt.layerX || evt.offsetX;
var titleY = evt.layerY || evt.offsetY;
/*设置事件捕获范围*/
if(title.setCapture){ // IE
title.setCapture();
}else if(window.captureEvents){ // Firefox
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousemove = function(evt) {
evt = evt || window.event;
// 窗口要移动到的坐标
var moveToX = evt.clientX - titleX;
var moveToY = evt.clientY - titleY;
out.style.left = moveToX;
out.style.top = moveToY;
}
document.onmouseup = function() {
/*取消事件捕获范围*/
if(title.releaseCapture){ // IE
title.releaseCapture();
}else if(window.captureEvents){ // Firefox
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
// 清除事件
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
<style type="text/css">
#out {
width: 100px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 100px;
left: 200px;
}
#title {
cursor: move;
width: 100px;
height: 20px;
background-color: blue;
-moz-user-select: none; /* Firefox, 文字无法被选中*/
}
</style>
</head>
<body>
<div id="out">
<div id="title">可拖动</div>
</div>
</body>
</html>
3. 坦克大战
3.1 坦克转向
1) 方式一, 做四个图片 切换
2) 方式二, 一个图片上四种状态,每次显示一个部分
3) 实现
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var tank;
window.onload = function() {
tank = document.getElementById("tank");
}
function changeDirect(persent) {
tank.style.backgroundPosition = "100% " + persent + "%";
}
</script>
<style type="text/css">
#tank {
background-image: url('./tank.jpg');
width: 91px;
height: 91px;
background-position: 100% 0%;
}
</style>
</head>
<body>
<div id="tank"></div>
<button onclick="changeDirect(0)">上</button>
<button onclick="changeDirect(33)">左</button>
<button onclick="changeDirect(67)">下</button>
<button onclick="changeDirect(100)">右</button>
</body>
</html>
3.2 坦克移动
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var tank; // div
var myTank; // Tank的实例对象
function Tank(x, y, direct) {
// 横纵坐标
this.x = x;
this.y = y;
// 方向
this.direct = direct;
// 速度
this.speed = 1;
/*
W(87) - 上; - 1
A(65) - 左; - 2
S(83) - 下; - 3
D(68) - 右; - 4
*/
this.move = function (evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 87 : // 上
this.direct = 1;
changeDirect(0);
this.y -= this.speed;
break;
case 65 : // 左
this.direct = 2;
changeDirect(33);
this.x -= this.speed;
break;
case 83 : // 下
this.direct = 3;
changeDirect(67);
this.y += this.speed;
break;
case 68 : // 右
this.direct = 4;
changeDirect(100);
this.x += this.speed;
break;
}
}
function changeDirect(persent) {
tank.style.backgroundPosition = "100% " + persent + "%";
}
}
window.onkeydown = function(evt) {
evt = evt || window.event;
console.info( evt.keyCode );
switch (evt.keyCode) {
case 87 : // 上
if (myTank.y < 10) {
console.info( "不能往上走了" );
return;
}
break;
case 65 : // 左
if (myTank.x < 10) {
console.info( "不能往左走了" );
return;
}
break;
case 83 : // 下
if (myTank.y > 410) {
console.info( "不能往下走了" );
return;
}
break;
case 68 : // 右
if (myTank.x > 410) {
console.info( "不能往右走了" );
return;
}
break;
}
myTank.move(evt);
tank.style.left = myTank.x + "px";
tank.style.top = myTank.y + "px";
}
window.onload = function() {
tank = document.getElementById("tank");
myTank = new Tank(200, 500-91, 3);
myTank.speed = 10;
// 初始化
tank.style.left = myTank.x + "px";
tank.style.top = myTank.y + "px";
}
</script>
<style type="text/css">
#field {
background-color: black;
width: 500px;
height: 500px;
padding: 5px;
position: absolute;
}
#tank {
background-image: url('./tank.jpg');
width: 91px;
height: 91px;
background-position: 100% 0%;
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<div id="tank"></div>
</div>
</body>
</html>