原生html上下滑动,原生js操作dom实现上下左右移动-CSDN博客

Document

padding: 0;

margin:0;

}

html,body,main{

height: 100%;

width: 100%;

}

.box{

height: 20px;

width: 20px;

border-radius: 50%;

background:red;

position: absolute;

left: 0;

right: 0;

}

.lookFood{

font-size: 20px;

position: absolute;

left: 50%;

top:40px;

transform: translateX(-50%);

}

.food{

height: 20px;

width: 20px;

background: #faa;

border-radius: 50%;

position: absolute;

}

footer span{

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

}

获取了 0个food

小提示:按下↑↓←→方向键开始收集食物吧

var box = document.getElementsByClassName("box")[0],

food = document.getElementsByClassName("food")[0],

span = document.getElementsByTagName("span")[0],

//获取的食物个数

i = 0;

//初始化food的位置;每次吃到调用

function foodInit() {

food.style.left = Math.random() * parseInt(window.getComputedStyle(document.body).width) - 20 + "px";

food.style.top = Math.random() * parseInt(window.getComputedStyle(document.body).height) - 20 + "px";

//获取随机的16进制颜色值;

food.style.background = '#' + (~~(Math.random() * (1 << 24))).toString(16);

}

//小球每次运动调用这个函数判断有没有找到食物;

function start() {

var boxLeft = parseInt(window.getComputedStyle(box).left),

boxTop = parseInt(window.getComputedStyle(box).top),

foodLeft = parseInt(window.getComputedStyle(food).left),

foodTop = parseInt(window.getComputedStyle(food).top);

//console.log(Math.abs(boxLeft - foodLeft) + "left+" + Math.abs(boxTop - foodTop) + "top+" + parseInt(window.getComputedStyle(food).height))

if (Math.abs(boxLeft - foodLeft) < parseInt(window.getComputedStyle(food).width) && Math.abs(boxTop - foodTop) < parseInt(window.getComputedStyle(food).height)) {

span.innerHTML = ++i;

foodInit()

}

/**

*键盘上下左右触发dom移动;

*可以同时触发两个方向的事件;

*传入四个参数:dom需要移动的dom;

*main移动的范围容器

*speed每秒移动速度;

*callback每次执行触发的函数;

var keyDomMove = (function() {

//通过闭包保存变量

var keyCode = {

//每次按下上下左右的将当前按下的方向保存为ture;

downKeyCode: function(e) {

var e = e || window.event;

//只需要用到上下左右只保存4个键值;

if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {

keyCode[e.keyCode] = true;

}

//每次弹起上下左右的将当前弹起的方向修改为flase;

upKeyCode: function(e) {

var e = e || window.event;

if (keyCode[e.keyCode]) {

keyCode[e.keyCode] = false;

}

//用于保存当前的setInterval;通过定时器增强小球移动的连贯性;

time: {},

};

return function(dom, main, speed,callback) {

if (typeof speed != "number") {

speed = 1;

} else {

//速度必须大于60px每秒;每次移动的像素小于1px浏览器会修正为0px;这也是因为运用了定时器的缺点;

//除以60是因为浏览器播放动画每秒60帧可以保持动画的流畅性;

speed = (speed/60) > 1 ? (speed/60) : 1

}

var left = parseInt(window.getComputedStyle(dom).marginLeft),

top = parseInt(window.getComputedStyle(dom).marginTop),

mainHeigeht=parseInt(window.getComputedStyle(main).height)-20,

mainWidth=parseInt(window.getComputedStyle(main).width)-20,

//用于左右和上下穿透;

changeXY=function(xy,min,max){

if(xy

xy=max;

}else if(xy>=max){

xy=min;

}

return xy;

};

document.addEventListener("keydown", function(e) {

e.preventDefault()

keyCode.downKeyCode();

if (keyCode[37] && !keyCode.time[37]) {

keyCode.time[e.keyCode] = setInterval(function() {

var x= dom.offsetLeft - left - speed ;

x=changeXY(x,0,mainWidth);

dom.style.left =x+"px";

callback&&callback();

}, 50/3)

};

if (keyCode[38] && !keyCode.time[38]) {

keyCode.time[e.keyCode] = setInterval(function() {

var y = dom.offsetTop - top - speed

y=changeXY(y,0,mainHeigeht);

dom.style.top=y+"px";

callback&&callback();

}, 50/3)

};

if (keyCode[39] && !keyCode.time[39]) {

keyCode.time[e.keyCode] = setInterval(function() {

var x= dom.offsetLeft - left + speed ;

x=changeXY(x,0,mainWidth);

dom.style.left =x+"px";

callback&&callback();

}, 50/3)

};

if (keyCode[40] && !keyCode.time[40]) {

keyCode.time[e.keyCode] = setInterval(function() {

var y = dom.offsetTop - top + speed ;

y=changeXY(y,0,mainHeigeht);

dom.style.top=y+"px";

callback&&callback();

}, 50/3)

};

//每次弹起按键移除当前方向的定时器;

document.addEventListener("keyup", function(e) {

keyCode.upKeyCode();

clearInterval(keyCode.time[e.keyCode]);

keyCode.time[e.keyCode] = null;

})

}

})()

function init() {

foodInit(food);

keyDomMove(box, document.body,500,start);

}

init()