百度新年贪吃蛇效果

闲来无事,在网上闲逛的时候开到有人说百度蛇年的贪吃蛇logo小游戏不错,于是乎就自己仿照写了一个。(注:所有素材都来自百度)

效果图

用到的图片

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 
  7 <style type="text/css">
  8 #div_stage {width:1015px; height:342px; background:url(images/stagebg.jpg) no-repeat; margin:10px auto; position:relative;}
  9 #main {width:570px; height:240px; position:absolute; left:200px; top:50px;}
 10 #main div {width:30px; height:30px; position:absolute;}
 11 
 12 
 13 #main .l {
 14     -webkit-transform:rotate(0deg);
 15     -moz-transform:rotate(0deg);
 16     -o-transform:rotate(0deg);
 17     transform:rotate(0deg); 
 18     /* IE8+ - must be on one line, unfortunately */ 
 19    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
 20    
 21    /* IE6 and 7 */ 
 22    filter: progid:DXImageTransform.Microsoft.Matrix(
 23             M11=1,
 24             M12=0,
 25             M21=0,
 26             M22=1,
 27             SizingMethod='auto expand');
 28 
 29 
 30 }
 31 #main .r {
 32     -webkit-transform:rotate(180deg);
 33     -moz-transform:rotate(180deg);
 34     -o-transform:rotate(180deg);
 35     transform:rotate(180deg);
 36 /* IE8+ - must be on one line, unfortunately */ 
 37    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246063538223773e-16, M21=-1.2246063538223773e-16, M22=-1, SizingMethod='auto expand')";
 38    
 39    /* IE6 and 7 */ 
 40    filter: progid:DXImageTransform.Microsoft.Matrix(
 41             M11=-1,
 42             M12=1.2246063538223773e-16,
 43             M21=-1.2246063538223773e-16,
 44             M22=-1,
 45             SizingMethod='auto expand');
 46 
 47 }
 48 #main .t {
 49     -webkit-transform:rotate(90deg);
 50     -moz-transform:rotate(90deg);
 51     -o-transform:rotate(90deg);
 52     transform:rotate(90deg);
 53 /* IE8+ - must be on one line, unfortunately */ 
 54    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.836909530733566e-16, M12=-1, M21=1, M22=-1.836909530733566e-16, SizingMethod='auto expand')";
 55    
 56    /* IE6 and 7 */ 
 57    filter: progid:DXImageTransform.Microsoft.Matrix(
 58             M11=-1.836909530733566e-16,
 59             M12=-1,
 60             M21=1,
 61             M22=-1.836909530733566e-16,
 62             SizingMethod='auto expand');
 63 
 64 
 65 }
 66 #main .b {
 67     -webkit-transform:rotate(270deg);
 68     -moz-transform:rotate(270deg);
 69     -o-transform:rotate(270deg);
 70     transform:rotate(270deg);
 71  /* IE8+ - must be on one line, unfortunately */ 
 72    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
 73    
 74    /* IE6 and 7 */ 
 75    filter: progid:DXImageTransform.Microsoft.Matrix(
 76             M11=6.123031769111886e-17,
 77             M12=1,
 78             M21=-1,
 79             M22=6.123031769111886e-17,
 80             SizingMethod='auto expand');
 81 
 82 }
 83 
 84 
 85 
 86 </style>
 87 
 88 <script type="text/javascript">
 89 window.οnlοad=function(){
 90     var oDiv=document.getElementById("main");//蛇移动的范围
 91     var H=8,L=19,asnake=[],//蛇数组
 92      aeat=[],//吃的数组
 93      fx="l",//蛇出始移动方向
 94      eatNum=0;//吃的从第几行开始
 95     
 96    for(var i=0;i<5;i++){
 97 
 98         var snDiv=document.createElement("div");
 99         snDiv.style.background="url(images/snake"+i+".png)";
100         asnake[i]={r:0,l:3+i,div:snDiv, d: 'l',type:"snake"}; //r初始行,l初始列,d初始移动方向
101         oDiv.appendChild(snDiv);
102         setPos(asnake[i]);
103    }
104     
105     function setPos(obj){//设置蛇每一接的位置
106     
107         obj.div.style.left=obj.l*30+"px";
108         obj.div.style.top=obj.r*30+"px";
109         if(obj.type=="eat"){
110             obj.div.className="";
111         }else{
112             
113             obj.div.className=obj.d;    
114         }
115     }
116     
117     
118     var timer=setInterval(function(){
119         
120         //蛇吃东西
121         if(asnake[0].r==aeat[0].r&&asnake[0].l==aeat[0].l){
122             
123              asnake.splice(asnake.length-3,0,aeat[0]);
124              aeat.shift();    
125             if(aeat.length==0){
126             
127                  createEat();    
128             }
129 
130         }
131         
132         
133         for(var i=asnake.length-1;i>0;i--){ //移动蛇的身体
134         
135             asnake[i].r=asnake[i-1].r;
136             asnake[i].l=asnake[i-1].l;
137             asnake[i].d=asnake[i-1].d;
138 
139         }
140         switch(fx){ //移动蛇头
141           case "l":
142             asnake[0].l--;
143             break;
144           case "r":
145             asnake[0].l++;
146             break;
147           case "t":
148             asnake[0].r--;
149             break;
150           case "b":
151             asnake[0].r++;
152             break;
153 
154         }
155         //检查蛇是否撞墙
156         if(asnake[0].l<0||asnake[0].r<0){
157             
158             alert("失败!");
159             clearInterval(timer);
160             return;    
161         }
162         if(asnake[0].l>18||asnake[0].r>7){
163             alert("失败!");
164             clearInterval(timer);
165             return;    
166             
167         }
168         //检查是否吃到不按顺序的吃的
169         for(var i=1;i<aeat.length;i++){
170             
171               if(asnake[0].r==aeat[i].r&&asnake[0].l==aeat[i].l){
172                  
173                   alert("失败!");
174                   clearInterval(timer);
175                   return;    
176                
177              }    
178         }
179         //检查蛇是否撞到自身
180         for(var i=i;i<asnake.length;i++){
181             
182             if(asnake[0].r==asnake[i]&&asnake[0].l==asnake[i].l){
183                   alert("失败!");
184                   clearInterval(timer);
185                   return;    
186                     
187             }    
188             
189         }
190 
191         for(var i=0;i<asnake.length;i++){
192             
193             setPos(asnake[i]);
194         }
195 
196     },500);
197     
198       document.οnkeydοwn=function(ev){//鼠标控制蛇的爬行方向
199         
200         var e=window.event||ev;
201         switch(e.keyCode)
202         {
203             case 37:        //
204                 if(asnake[0].d=="r"){break;}
205                 fx='l';
206                 asnake[0].d='l';
207                 break;
208             case 38:        //
209                 if(asnake[0].d=="b"){break;}
210                 fx='t';
211                 asnake[0].d='t';
212                 break;
213             case 39:        //
214                 if(asnake[0].d=="l"){break;}
215                 fx='r';
216                 asnake[0].d='r';
217                 break;
218             case 40:        //
219                 if(asnake[0].d=="t"){break;}
220                 fx='b';
221                 asnake[0].d='b';
222                 break;
223         }
224         
225     }    
226     
227 function  createEat(){
228     
229     while(aeat.length<4){
230           var x=parseInt(Math.random()*L);
231           var y=parseInt(Math.random()*H);
232           var curr=true;
233           for(var i=0;i<asnake.length;i++){//判断吃的与蛇是否重叠
234             
235               if(x==asnake[i].l&&y==asnake[i].r){
236                   
237                   curr=false;
238                  
239                }  
240       
241           }
242           for(var i=0;i<aeat.length;i++){  //判断吃的与吃的是否重叠
243             
244               if(x==aeat[i].l&&y==aeat[i].r){
245                   
246                   curr=false;
247                  
248                }  
249       
250           }
251           if(curr){
252              var newEat=document.createElement("div");
253              newEat.style.background="url(images/iconBg.jpg) -"+aeat.length*30+"px -"+eatNum*30+"px";
254              oDiv.appendChild(newEat);  
255              aeat.push({r:y,l:x,div:newEat,type:"eat"});
256                 
257          }
258 
259     }
260     
261     for(var i=0;i<aeat.length;i++){//把所有吃的放在容器的不同位置
262         
263             setPos(aeat[i]);
264         
265     }
266     
267     
268     eatNum=eatNum+1;
269     
270 }
271     
272     
273 createEat();//执行吃的函数
274     
275 }
276 
277 </script>
278 </head>
279 <body>
280 
281 <div id="div_stage">
282     <div id="main">
283     </div>
284 </div>
285 
286 </body>
287 </html>
View Code

 

 

 

转载于:https://www.cnblogs.com/chaoming/archive/2013/06/03/3115582.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/433486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

贝叶斯公式设b_数据分析经典模型——朴素贝叶斯

编辑导语&#xff1a;做过数据分析的人&#xff0c;想必对贝叶斯模型都不会陌生。贝叶斯预测模型是运用贝叶斯统计进行的一种预测&#xff0c;不同于一般的统计方法&#xff0c;其不仅利用模型信息和数据信息&#xff0c;而且充分利用先验信息。通过实证分析的方法&#xff0c;…

QGraphicsProxyWidget paintEvent(from 1+1 =2)

标题不好取&#xff0c;起源于CSDN中看到有网友提问&#xff1a;如果将一个QWidget同时显示在 QGraphicsView 和其他和view同级的普通的Widget中。 QGraphicsProxyWidget QGraphicsProxyWidget 是为将 QWidget 嵌入到 QGraphicsScene 中而引入的代理。 将 event 在二者之间进行…

Asterisk使用数据库配置方法

安装&#xff1a; 1、安装 unixODBC unixODBC-devel libtool-ltdl libtool-ltdl-devel &#xff0c;为了使asterisk支持数据库存储&#xff08;必须先安装&#xff09; 2、安装 mysql 并设置好 C_INCLUDE_PATH 和 LD_LIBRARY_PATH 3、从 http://www.asterisk.org/downloads 下载…

linux文件系统_Linux的文件系统简介

inux操作系统的本质可以说就是文件系统的集合&#xff0c;文件系统既包含文件的数据也包含文件系统的结构。在Linux文件系统中&#xff0c;EXT2文件系统、虚拟文件系统、/proc文件系统是三个具有代表性的文件系统。/proc文件系统是一个伪文件系统&#xff0c;它只存在内存当中&…

matlab如何测两点的角度_根据2点经纬度,计算方位角,以及计算2条线的夹角

以真北为0度起点&#xff0c;由东向南向西顺时针旋转360度&#xff0c;主要是用于控制象限。根据2点经纬度&#xff0c;计算方位角[csharp]////// 给定2点&#xff0c;获得经纬度/// /// 起点经纬度&#xff0c;都是以度为单位/// 终点经纬度&#xff0c;都是以度为单位/// pri…

VMWare 环境下devstack创建虚拟机报错及修改nova-api返回数据得条目

1、在生产环境中&#xff0c; 由于某个tenant下创建了有1300条得security-group通过查询nova得数据库可以看出确实有1300条得存在&#xff0c;但是通过curl调用的时候发现返回得数目只有1000条 可以通过修改nova.conf文件得osapi_max_limit 项修改返回得条目限制&#xff0c;默…

使用数据库保存Asterisk sip账号信息(odbc方式)

在默认情况下&#xff0c;Asterisk的配置文件都保存在/etc/asterisk目录中&#xff0c;以ini文件的格式保存。我们也可以使用数据库来保存大多数Asterisk配置信息。 Asterisk使用数据库保存配置信息有两种方法&#xff1a;静态和动态&#xff0c;对于不经常修改的配置数据&…

删除按钮_汪涵拜师学艺第七篇:往来单位查询删除按钮和新增判断的设计!

老师好&#xff01;大家好&#xff01;我叫汪涵&#xff1a;今天给大家分享往来单位查询删除按钮和新增判断的设计&#xff01;在开始具体内容之前&#xff0c;请让我先分享我们的价值观&#xff1a;用自律和勤奋来改变命运&#xff0c;不走捷径&#xff0c;有爱心&#xff0c;…

python requests https_解决python的requests模块访问私有SSL证书产生的报错问题

如题访问部分私有SSL证书网站时报如下错误requests.exceptions.SSLError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:581)测试环境kali linux 1.1.0Python 2.7.8python-openssl 0.13-2deb7u1requests 2.3.0测试代码#/usr/bin/python#codingutf-8imp…

Ubuntu 12.04(32位)安装Oracle 11g(32位)全过程以及几乎所有问题的解决办法

这两天在Ubuntu上安装Oracle把人折腾毁了&#xff0c;即使照着网上的教程来&#xff0c;还是出了很多问题。好在最后终于搞定了。写出来总结一下&#xff0c;免得以后忘了。 标题注明32位是因为网上教程几乎全是以64位安装为例的&#xff0c;32位系统下照着做是绝对会安装失败的…

dio设置自定义post请求_Flutter Dio简单二次封装和自定义Header

话不多说自己看代码封装的比较简单&#xff0c;比较适合入门学习Dio。import package:dio/dio.dart;import Api.dart;/** 封装 restful 请求** GET、POST、DELETE、PATCH* 主要作用为统一处理相关事务&#xff1a;* - 统一处理请求前缀&#xff1b;* - 统一打印请求信息&#x…

解决asterisk sip呼叫 488 no acceptable here

这两天实验了一下asterisk static realtime方案&#xff0c;将sip.conf的信息保存到mysql数据库里。但是呼叫的时候&#xff0c;总是 报 488 no acceptable here。 这是我的sip.conf文件&#xff0c;数据库里和sip.conf文件一模一样&#xff0c;但是就是不行。 [general] c…

怎么安装python3.6.5_Centos7 安装Python3.6.5

一、centos7 安装 Python3.6.5教程1、在安装Python之前&#xff0c;需要先安装一些后面遇到的依赖问题(如果有依赖问题&#xff0c;按照提示安装)&#xff1a;yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-d…

关于浏览器模式和文本模式的困惑

什么是浏览器模式和文本模式&#xff1f; 经常使用IE开发者工具的同学&#xff0c;肯定见过浏览器模式和文本模式&#xff0c;对于这两个名词&#xff0c;综合相关文档解释如下&#xff1a; 浏览器模式&#xff08;Browser Mode&#xff09;&#xff0c;用于切换IE针对该网页的…

mysql 关联索引_mysql中关于关联索引的问题——对a,b,c三个字段建立联合索引,那么查询时使用其中的2个作为查询条件,是否还会走索引?...

情况描述&#xff1a;在MySQL的user表中&#xff0c;对a,b,c三个字段建立联合索引&#xff0c;那么查询时使用其中的2个作为查询条件&#xff0c;是否还会走索引&#xff1f;根据查询字段的位置不同来决定&#xff0c;如查询a, a,b a,b,c a,c 都可以走索引的&#…

A20 看门狗

前言 说到看门狗&#xff0c;应该不会陌生&#xff0c;看门狗说白了就是一个定时器&#xff0c;但是它有一个非常重要的功能就是复位系统。在A20里&#xff0c;看门狗的操作非常简单&#xff0c;只有两个寄存器&#xff0c;不需要操作时钟相关的东西&#xff0c;系统起来后可以…

python拼接大量ts文件_Python爬取.ts文件,合并为mp4

目标&#xff1a;爬影视网站ts文件到本地&#xff0c;合并成mp4文件下载ts文件本着不重复造轮子的精神(好吧其实是我懒)&#xff0c;想用迅雷批量下载爬取&#xff0c;但是迅雷提供的通配符过于简单无法构造URL&#xff0c;只能自己写脚本如下&#xff1a;# -*- coding: utf-8 …

android学习笔记之ProgressDialog的使用

在很多PC软件或手机软件中&#xff0c;我们都会看见 “加载中...” 类似的对话框&#xff0c;当然&#xff0c;在android应用程序中也是如此。如果我们想在android应用程序中使用这样的效果&#xff0c;那么就需要用到ProgressDialog。首先&#xff0c;我们来看一下ProgressDia…

asterisk 互联问题

asterisk A 和asterisk B互联。 A下面有账户1001&#xff0c;B下面有账户2001 当1001呼叫2001时&#xff0c;B的sip.conf里不能有1001。 当2001呼叫1001时&#xff0c;A的sip.conf里不能有2001。 否则&#xff0c;呼叫无法呼叫成功。 下面为截图 实际和在振铃时&#xff0…

清除python shell中的内容_如何使用python脚本定时清空文件内容?

我们一直在对大家强调关于python脚本的使用&#xff0c;但是有部分同学提出疑问&#xff0c;就是关于上期跟大家说的shell脚本没有实质性的使用效果&#xff0c;如果在实际应用里&#xff0c;要怎么使用这个脚本&#xff0c;它又能实现什么效果&#xff0c;其实针对这个内容&am…