JS仿贪吃蛇：一串跟着鼠标的Div
贪吃蛇是一款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的更多相关文章
- JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...
- 一串跟随鼠标的DIV
div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...
- js版贪吃蛇
之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...
- 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- 用js实现贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用Js写贪吃蛇
使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...
- JS实现——贪吃蛇
把以下代码保存成Snake.html文件,使用Google或360浏览器打开 <!DOCTYPE HTML> <html> <head> <meta char ...
- Javascript仿贪吃蛇出现Bug的反思
bug现象: 图一
随机推荐
- PowerShell 语法
PowerShell 之 教程 PowerShell 中变量.函数命名等不区分大小写,但字符串区分大小写 powershell 脚本文件 扩展名为 .ps1 调用操作符 & + Cmd Cmd ...
- 左叶子之和(sum-of-left-leaves)
LeetCode题目--左叶子之和(sum-of-left-leaves) 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 ...
- 2016年 实验四 B2B模拟实验
实验四 B2B模拟实验 [实验目的] ⑴.掌握B2B中供应商的供求信息发布.阿里商铺开设和订单交易等过程. ⑵.掌握B2B中采购商的采购信息的发布.交易洽谈.网上支付和收货等过程. [实验条件] ⑴ ...
- 你想了解的《javaScript语言精粹》(三)
# javaScript语言精粹 # 第三章 对象 - javaScript 数据类型 1. 基础数据类型 Number String Boolean Undefined N ...
- vs code C语言环境搭建
最近重温C语言,因为很多练习只是小程序,并不需要Clion和Codeblocks这样工程导向的编译软件,所以下载了vs code,并试图搜索相应的环境,在此过程中发现,网上许多vs code 的c/c ...
- rs232转以太网
rs232转以太网 rs232转以太网ZLAN5103可以实现RS232/485/422和TCP/IP之间进行透明数据转发.方便地使得串口设备连接到以太网和Internet,实现串口设备的网络化升级. ...
- Linux文件系统和管理-2文件操作命令（中）
创建空文件和刷新时间 touch touch命令可以用来创建空文件或刷新文件的时间 touch 存在的文件刷新时间,不存在的文件创建空文件 生成指定日期的日志文件 [root@C8-1 ~]# dat ...
- MySQL备份和恢复[3]-mysqldump备份工具
mysqldump 概述 逻辑备份工具: mysqldump, mydumper, phpMyAdmin Schema和数据存储在一起.巨大的SQL语句.单个巨大的备份文件 mysqldump:是My ...
- javaSE、javaEE、Android知识点总结
曾今上学时候的一些学习总结,如有错误请大家指出,共同学习. 1. 什么是WebView? WebView是一个使用WebKit引擎的浏览器组件,用来加载网页. 2. WebView中加载网页的两种方式 ...
- SPI、I2C、I2S、UART、GPIO、SDIO、CAN、JTAG的区别及使用方法。
SPI 全称及由来:SPI接口的全称是"Serial Peripheral Interface",意为串行外围接口,是Motorola首先在其MC68HCXX系列处理器上定义的. ...