鼠标贪吃蛇
2016-08-26 07:47
246 查看
哈哈~鼠标贪吃蛇：很好玩
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>鼠标贪吃蛇</title>
<styletype="text/css">
.content{
width:30px;
height:30px;
background-color: red;
border-radius:50%;
font-size:17px;
text-align: center;
line-height:30px;
position:absolute;
}
</style>
</head>
<body>
<divclass="content">1</div>
<divclass="content">2</div>
<divclass="content">3</div>
<divclass="content">4</div>
<divclass="content">5</div>
<divclass="content">6</div>
<divclass="content">7</div>
<divclass="content">8</div>
<divclass="content">9</div>
<divclass="content">10</div>
<divclass="content">11</div>
<divclass="content">12</div>
<divclass="content">13</div>
<divclass="content">14</div>
<divclass="content">15</div>
<divclass="content">16</div>
<divclass="content">17</div>
<divclass="content">18</div>
<divclass="content">19</div>
<divclass="content">20</div>
<divclass="content">21</div>
<divclass="content">22</div>
<divclass="content">23</div>
<divclass="content">24</div>
<divclass="content">25</div>
<divclass="content">26</div>
<divclass="content">27</div>
<divclass="content">28</div>
<divclass="content">29</div>
<divclass="content">30</div>
<divclass="content">31</div>
<divclass="content">32</div>
<divclass="content">33</div>
<divclass="content">34</div>
<divclass="content">35</div>
<divclass="content">36</div>
<divclass="content">37</div>
<divclass="content">38</div>
<divclass="content">39</div>
<divclass="content">40</div>
<divclass="content">41</div>
<divclass="content">42</div>
<divclass="content">43</div>
<divclass="content">44</div>
<divclass="content">45</div>
<divclass="content">46</div>
<divclass="content">47</div>
<divclass="content">48</div>
<divclass="content">49</div>
<divclass="content">50</div>
<divclass="content">51</div>
<divclass="content">52</div>
<divclass="content">53</div>
<divclass="content">54</div>
<divclass="content">55</div>
<divclass="content">56</div>
<divclass="content">57</div>
<divclass="content">58</div>
<divclass="content">59</div>
<divclass="content">60</div>
<divclass="content">61</div>
<divclass="content">62</div>
<divclass="content">63</div>
<divclass="content">64</div>
<divclass="content">65</div>
<divclass="content">66</div>
<divclass="content">67</div>
<divclass="content">68</div>
<divclass="content">69</div>
<divclass="content">70</div>
<divclass="content">71</div>
<divclass="content">72</div>
<divclass="content">73</div>
<divclass="content">74</div>
<divclass="content">75</div>
<divclass="content">76</div>
<divclass="content">77</div>
<divclass="content">78</div>
<divclass="content">79</div>
<div class="content">80</div>
</body>
<script
type="text/javascript">
function randomNum(min,max) {
return Math.floor(Math.random()*(max
- min + 1)+
min);
}
//设置颜色
vardivs=
document.getElementsByClassName('content');
for (vari=
0;i < divs.length;i++) {
var
r = randomNum(0,255);
var
g = rando
abcd
mNum(0,255);
var
b = randomNum(0,255);
divs[i].style.backgroundColor='rgb('
+
r + ',' +
g + ',' +
b + ')';
}
//设置多个球div跟随着鼠标移动
document.onmousemove=function
(e) {
//获取事件对象
varevent=
window.event || e;
//设置相邻div的位置为上一次鼠标移动的位置
for(vari
= divs.length - 1; i>
0;i--) {
divs[i].style.top=divs[i
- 1].style.top;
divs[i].style.left =divs[i
- 1].style.left;
}
//设置最上面的div位置，跟随着鼠标位置移动
divs[0].style.top=event.clientY
+ 'px';
divs[0].style.left=event.clientX
+ 'px';
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>鼠标贪吃蛇</title>
<styletype="text/css">
.content{
width:30px;
height:30px;
background-color: red;
border-radius:50%;
font-size:17px;
text-align: center;
line-height:30px;
position:absolute;
}
</style>
</head>
<body>
<divclass="content">1</div>
<divclass="content">2</div>
<divclass="content">3</div>
<divclass="content">4</div>
<divclass="content">5</div>
<divclass="content">6</div>
<divclass="content">7</div>
<divclass="content">8</div>
<divclass="content">9</div>
<divclass="content">10</div>
<divclass="content">11</div>
<divclass="content">12</div>
<divclass="content">13</div>
<divclass="content">14</div>
<divclass="content">15</div>
<divclass="content">16</div>
<divclass="content">17</div>
<divclass="content">18</div>
<divclass="content">19</div>
<divclass="content">20</div>
<divclass="content">21</div>
<divclass="content">22</div>
<divclass="content">23</div>
<divclass="content">24</div>
<divclass="content">25</div>
<divclass="content">26</div>
<divclass="content">27</div>
<divclass="content">28</div>
<divclass="content">29</div>
<divclass="content">30</div>
<divclass="content">31</div>
<divclass="content">32</div>
<divclass="content">33</div>
<divclass="content">34</div>
<divclass="content">35</div>
<divclass="content">36</div>
<divclass="content">37</div>
<divclass="content">38</div>
<divclass="content">39</div>
<divclass="content">40</div>
<divclass="content">41</div>
<divclass="content">42</div>
<divclass="content">43</div>
<divclass="content">44</div>
<divclass="content">45</div>
<divclass="content">46</div>
<divclass="content">47</div>
<divclass="content">48</div>
<divclass="content">49</div>
<divclass="content">50</div>
<divclass="content">51</div>
<divclass="content">52</div>
<divclass="content">53</div>
<divclass="content">54</div>
<divclass="content">55</div>
<divclass="content">56</div>
<divclass="content">57</div>
<divclass="content">58</div>
<divclass="content">59</div>
<divclass="content">60</div>
<divclass="content">61</div>
<divclass="content">62</div>
<divclass="content">63</div>
<divclass="content">64</div>
<divclass="content">65</div>
<divclass="content">66</div>
<divclass="content">67</div>
<divclass="content">68</div>
<divclass="content">69</div>
<divclass="content">70</div>
<divclass="content">71</div>
<divclass="content">72</div>
<divclass="content">73</div>
<divclass="content">74</div>
<divclass="content">75</div>
<divclass="content">76</div>
<divclass="content">77</div>
<divclass="content">78</div>
<divclass="content">79</div>
<div class="content">80</div>
</body>
<script
type="text/javascript">
function randomNum(min,max) {
return Math.floor(Math.random()*(max
- min + 1)+
min);
}
//设置颜色
vardivs=
document.getElementsByClassName('content');
for (vari=
0;i < divs.length;i++) {
var
r = randomNum(0,255);
var
g = rando
abcd
mNum(0,255);
var
b = randomNum(0,255);
divs[i].style.backgroundColor='rgb('
+
r + ',' +
g + ',' +
b + ')';
}
//设置多个球div跟随着鼠标移动
document.onmousemove=function
(e) {
//获取事件对象
varevent=
window.event || e;
//设置相邻div的位置为上一次鼠标移动的位置
for(vari
= divs.length - 1; i>
0;i--) {
divs[i].style.top=divs[i
- 1].style.top;
divs[i].style.left =divs[i
- 1].style.left;
}
//设置最上面的div位置，跟随着鼠标位置移动
divs[0].style.top=event.clientY
+ 'px';
divs[0].style.left=event.clientX
+ 'px';
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Delphi 检测用户超过多长时间没有操作键盘或鼠标
- 用 javascript 获取当页面上鼠标（光标）位置
- 鼠标样式
- Opencv用鼠标画圆
- Bootstrap导航条可点击和鼠标悬停显示下拉菜单
- ArcGIS鼠标滚轮方向之注册表篇
- 改变鼠标指针形状两种方法及实例
- 在Hyper-V下Linux不能使用鼠标
- windows程序设计：键盘和鼠标
- 如何用JS代码实现鼠标移动，背景变色？
- html5的鼠标拖拽
- 一段眼睛跟着鼠标转动的跟踪眼代码
- 鼠标呆住2秒钟后事件才触发方法
- qt隐藏鼠标方法汇总
- 为什么 我 的myeclipse调试的时候,有时鼠标放在变量上就显示变量值,有时就没有,提示不可以显示
- 鼠标绘制矩形
- Html鼠标 滑过特效
- WPF : 以鼠标指针为中心缩放
- AXURE 学习笔记 制作“鼠标点击时，输入框内文字消失”效果