贪吃蛇,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,也没有私有.公有.保护等访问限制的级 ...
随机推荐
- 从一个NOI题目再学习二分查找。
二分法的基本思路是对一个有序序列(递增递减都可以)查找时,测试一个中间下标处的值,若值比期待值小,则在更大的一侧进行查找(反之亦然),查找时再次二分.这比顺序访问要少很多访问量,效率很高. 设:low ...
- 给div加上背景图片
<div class="panel-body" style="background:url('pages/upload/brief/img/bg.jpg');bac ...
- HTML初级入门内容
常用属性: Width=宽度 Height=高度 Size=大小 Color=颜色 Align=布局方向,值包括(top,bottom,left,right,center)上,下,左,右,中. Bor ...
- 命名空间“System.Web”中不存在类型或命名空间名称“Optimization”(是否缺少程序集引用?)
今天,在.net4.5,mvc4下新建了个区域,运行起来就报这个错误: 命名空间"System.Web"中不存在类型或命名空间名称"Optimization"( ...
- 【转载】APP留存率多少才合格——全面解析留存率
做产品经理的一般都会关注以下 提高用户留存率 提高用户粘性和活跃度 这些天,有几位朋友都找我聊产品的留存率,有做手游的,做工具的,做社交APP的,于是把以前写过的留存率文章翻出来. 次日留 ...
- NuGet控制台有几个常用命令
NuGet控制台有几个常用命令 Get-Package 获取当前项目已经安装的类库 Install-Package 安装指定类库,命令格式如下:Install-Package 类库ID,如Instal ...
- WIN8,开机启动 需要管理员权限的程序
1. 用WPF开发,需要管理员权限并开机启动,以写注册表的方式实现.仅写注册表只能启动一般权限的程序. 2. 考虑这样实现: 程序以一般权限启动,启动以后申请管理员权限. 实现: App类中重写OnS ...
- git pull 冲突解决
这个意思是说更新下来的内容和本地修改的内容有冲突,先提交你的改变或者先将本地修改暂时存储起来. 处理的方式非常简单,主要是使用git stash命令进行处理,分成以下几个步骤进行处理. 1.先将本地修 ...
- People Tools catalog tables.
People Tools catalog tables. Projects PSPROJECTDEFN — Project header table PSPROJECTITEM — Definitio ...
- iOS 开发:CoCoapods的使用和安装
CocoaPods的使用和安装 一.什么是CocoaPods? 前言: 思考如何引入一个第三方框架. 例如: 百度地图SDK.友盟.ShareSDK. 信鸽推送等. 从github或某处下载第三方SD ...