贪吃蛇是一款80后、90后比较熟悉的经典游戏，下面通过简单的JS代码来实现低仿版贪吃蛇效果：随着鼠标的移动，在页面中呈现所有Div块跟随鼠标依次移动，效果如下图所示。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>习题-仿select下拉框</title>

    <style>

        div {

            width: 20px;height: 20px;background-color: purple;position: absolute;

        }

    </style>

    <script>

        //此处写代码

    </script>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

　　参考代码：

 window.onload = function () {

    // getPos函数获取鼠标的坐标

    function getPos(ev) {

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        return { x: ev.clientX + scrollTop, y: ev.clientY + scrollLeft };

    }

    document.onmousemove = function (ev) {

        var oEvent = ev || event;

        var pos = getPos(oEvent);

        var aDiv = document.getElementsByTagName('div');

        //递减循环

        for (var i = aDiv.length - 1; i > 0; i--) {

            aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';

            aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';

        }

        aDiv[0].style.left = pos.x + 'px';

        aDiv[0].style.top = pos.y + 'px';

    }

}

　　

思考：为什么采用下面递增循环代码就无法达到预期效果？

代码：

// 与参考文档区别部分

for (var i = 0; i < aDiv.length - 1; i++) {

    aDiv[i + 1].style.left = aDiv[i].offsetLeft + 'px';

    aDiv[i + 1].style.top = aDiv[i].offsetTop + 'px';

}

　　效果：

如果递增循环设计进行修改后，可以实现其它独特效果：(平移连珠直线)

代码：

window.onload = function () {

    // getPos函数获取鼠标移动时的坐标

    function getPos(ev) {

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        return { x: ev.clientX + scrollTop, y: ev.clientY + scrollLeft };

    }

    document.onmousemove = function (ev) {

        var oEvent = ev || event;

        var pos = getPos(oEvent);

        var aDiv = document.getElementsByTagName('div');

        for (var i = 0; i < aDiv.length - 1; i++) {

            aDiv[i + 1].style.left = aDiv[i].offsetLeft + 20 + 'px';

            aDiv[i + 1].style.top = aDiv[i].offsetTop + 20 + 'px';

        }

        aDiv[0].style.left = pos.x + 'px';

        aDiv[0].style.top = pos.y + 'px';

    }

}

JS仿贪吃蛇：一串跟着鼠标的Div的更多相关文章

  1. JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div

    function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...

  2. 一串跟随鼠标的DIV

    div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...

  3. js版贪吃蛇

    之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...

  4. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  5. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  6. 用js实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用Js写贪吃蛇

    使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...

  8. JS实现——贪吃蛇

    把以下代码保存成Snake.html文件,使用Google或360浏览器打开 <!DOCTYPE HTML> <html> <head> <meta char ...

  9. Javascript仿贪吃蛇出现Bug的反思

    bug现象:    图一

随机推荐

  1. tslib-1.4移植（转）

    转自:http://blog.163.com/zhuandi_h/blog/static/180270288201222310291262/ 环境:host:Ubuntu11.10target:Oma ...

  2. day36 Pyhton 网络编程03

    一.内容回顾 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  3. react中 受控组件和 非受控组件 浅析

    一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...

  4. 【C语言/C++程序员编程】一小时做出来的数字雨（一颗开花的树）！

    相信大家看过许许多多的关于计算机黑客.骇客.人工智能.AI方面的电影,每当黑客入侵某个五角大楼,某个网站时,都会出现这样一副画面: 入侵 或者这样的: 数字雨 然后就轻而易举的成功入侵夺取管理员权限了 ...

  5. 经验分享：计算机 web 浏览器——访问剪切板图片

      有时候,我们希望能访问用户的剪切板,来实现一些方便用户的功能:但是另一方面,剪切板里的数据对用户来说又是非常隐私的,所以浏览器在获取信息方面有安全限制,同时也提供访问接口. 当我们需要实现在富文本 ...

  6. 【并查集】BZOJ 1854 连续攻击游戏

    题目内容 洛谷链接 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并 ...

  7. Windows下使用GitStack搭建Git服务器

    Win10下使用GitStack搭建Git服务器 Git是目前世界上最先进的分布式版本控制系统(没有之一). ​ 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上备份时间以示区别. ...

  8. windows搭建SVN服务MD版

    windows搭建SVN服务MD 1下载TortoiseSVN 官网下载 根据自己系统环境选择适合的版本 2 安装TortoiseSVN 双击运行程序 出现第一个小坑 原来是你的系统没有打 kb299 ...

  9. html中object标签

    首先将这个强大web页面打印例子(pintTest.html)贴上来. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional ...

  10. 无法为数据库 'tempdb' 中的对象分配空间，因为 'PRIMARY' 文件组已满

    错误描述 消息 1105,级别 17,状态 2,第 1 行无 法为数据库 'tempdb' 中的对象 'dbo.SORT temporary run storage:  140737503494144 ...