JS写一起贪吃蛇

  • 时间:2018-06-16 23:01 作者:下班很无聊 来源:下班很无聊 阅读:135
  • 扫一扫,手机访问
摘要:一、HTML二、CSS img{ margin: 10px; width:200px; height:300px; float: left; }三、scriptwindow.onload=function(){ var aImg=document.getElementsByTagName('

一、HTML

二、CSS

img{

margin: 10px;

width:200px;

height:300px;

float: left;

}

三、script

JS写一起贪吃蛇

JS写一起贪吃蛇

window.onload=function(){

var aImg=document.getElementsByTagName('img');

for (var i = 0; i < aImg.length; i++) {

aImg[i].timer=null;

aImg[i].onmouseover=function(){

startMove(this,500);

}

aImg[i].onmouseout=function(){

startMove(this,300);

}

};

}

function startMove(obj,iTarget){

clearInterval(obj.timer);

// 对每个对象设置定时器

obj.timer=setInterval(function(){

var iSpeed=(iTarget-obj.offsetHeight)/8;

var iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

if (obj.offsetHeight==iTarget) {

clearInterval(obj.timer);

}

else{

obj.style.height=obj.offsetHeight+iSpeed+'px';

}

},30)

}

四、效果图

JS写一起贪吃蛇

JS写一起贪吃蛇

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部