贪吃蛇，JavaScript，效果，鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标跟随一串效果</title>
<style type="text/css">
div{
width: 30px;
height: 30px;
background: #008000;
position: absolute;
left: 10px;
top: 10px;
font-size: 18px;
border: 1px solid green;
border-radius: 50%;
color: white;
text-align: center;
padding: 10px;
}
</style>
<script type="text/javascript">
//页面加载完成后才执行
window.onload = function(){
// 获取页面div的元素节点
var divArray = document.getElementsByTagName("div");
document.onmousemove = function(evt){
var oEvent = evt || event;
//第一个div永远跟着鼠标最新的位置
divArray[0].style.left = oEvent.clientX + 20 + "px";
divArray[0].style.top = oEvent.clientY + 20 + "px";
//背景色随机改变
for(var i = divArray .length - 1;i > 0;i--){
//依次替换位置 "="表示赋值，不是表示相等
divArray [i].style.left = divArray[ i- 1].style.left;
divArray [i].style.top = divArray [i - 1].style.top;
var RNumber = parseInt(Math.random()*255);
var GNumber = parseInt(Math.random()*255);
var BNumber = parseInt(Math.random()*255);
divArray[i].style.background ="rgb("+RNumber+","+GNumber+","+BNumber+")";
}
}
}
</script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
</body>
</html>
贪吃蛇，JavaScript，效果，鼠标事件的更多相关文章
- "贪吃蛇"-css3效果
clip : http://www.w3school.com.cn/cssref/pr_pos_clip.asp 姜糖水 : http://www.cnphp6.com/archives/60 ...
- javascript基金会——鼠标事件，系统对话框，等等。
1.鼠标事件 (1).onclick:用户点击鼠标左键,并且当焦点处于button准时,按用户Enter关键,发生onclick事件 (2).ondblclick:当用户双击鼠标左键.发生ondblc ...
- 每日分享！JavaScript的鼠标事件（11个事件）
鼠标的11个事件 具体的事件解释如下: click:按下鼠标(通常是按下主按钮)时触发. dblclick:在同一个元素上双击鼠标时触发. mousedown:按下鼠标键时触发. mouseup:释放 ...
- JavaScript之鼠标事件
事件三要素: 事件源.事件类型(点击onclick)=function(){ 事件触发后执行的代码 } 案例: function abb(a){ return document.getElementB ...
- 贪吃蛇 javaScript 谷歌浏览器浏览
1.代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- javascript的鼠标事件---基础
- 原生JavaScript贪吃蛇
在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...
- unity像素贪吃蛇
[ 星 辰 · 别 礼 ] 设计过程: 首先,在之前玩坏控制台做的那个c#贪吃蛇之后,我以为做unity会很简单,但事实比较不如人意...拖了好几天.因为过程中遇到一些问题 蛇身的移动,还是用列表,将 ...
- JavaScript实现的--贪吃蛇
总的实现思路: 一.效果部分: 1.编写html代码,加上样式. 二.JavaScript部分: 1.利用dom方法创建一块草坪,即活动区域: 2.创建一条蛇,并设置其初始位置: ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
随机推荐
- source insight增加注释宏
打开base项目,下main.c文件里加入以下代码 对于在一行内的局部注释, 没有找到解除注释的宏, macro Comments_orUn_gx() { //用杠星注释多行,或取消杠星注释 ,不选中 ...
- iOS - + initialize 与 +load
一.+ initialize 方法和+load 调用时机 首先说一下 + initialize 方法:苹果官方对这个方法有这样的一段描述:这个方法会在 第一次初始化这个类之前 被调用,我们用它来初始化 ...
- nginx配置之取消index.php同时不影响js，css功能
server { listen 8084; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; ...
- WordPress基础：文章的自定义栏目的使用
写文章只有标题和内容,那么我想加个加个怎么办呢?这时候就可以用到自定义栏目了,这个功能相当于增加了一个键值对 1.启动“自定义栏目” 2.定义键值对 3.调用自定义栏目值 <?php $pric ...
- jquery 给指定li添加制定的css样式
$("ul li").eq(1).css({"color":"red"}); //第二个li $("ul li").eq ...
- UWP&WP8.1 重新绘制图片 WriteableBitmap用法 图片转byte[]数组，byte[]数组转图片
---恢复内容开始--- WriteableBitmap 是UWP和WP8.1绘制图片的,重组图片的最重要方法.方法较为简单,方法多样性. 通过查看文档,WriteableBitmap的继承性是 ...
- Node.js 学习笔记
时间:2016-07-07 提前安装好linux CentOs环境,以及相关工具(git,wget,vim……) 1.安装: 目前打算在CentOs上进行操作,网上有教程是旧的地址,这个是搬家后的新地 ...
- win8.1 Framework3.5安装不上的问题
问题症状:安装的WIN8系统无法安装Framework,SQL等都有问题 解决误区:直接安装或者更新后在线安装(结果一样各种错误) 解决方法: 1.先gpedit.msc进入本地组策略管理,目录:计算 ...
- postgresql修炼之道学习笔记（2）
随后的章节 介绍了基础的sql,这个我略过了,我喜欢在开发的时候,慢慢的研究,毕竟有oracle的基础. 现在,学习psql工具 使用create database创建数据库的时候,出现如下问题: ...
- 一个python的计算熵(entropy)的函数
计算熵的函数: # -*- coding: utf-8 -*- import math #the function to calculate entropy, you should use the p ...