显示效果例如以下：点击这里！

      代码下载：点击这里！

<script>

function show(){ 

var date = new Date(); //日期对象 

var now = ""; 

now = date.getFullYear()+"年"; //读英文即可了 

now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1假设想取当前月+1就能够了 

now = now + date.getDate()+"日"; 

now = now + date.getHours()+"时"; 

now = now + date.getMinutes()+"分"; 

now = now + date.getSeconds()+"秒"; 

document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串 

setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法 

} 

</script>





<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>网络人VS灰鸽子工作室</title>





<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

div{

background:-webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));/**Chrom Safari**/

background:-moz-linear-gradient(top, yellow, red); /** FireFox **/

background:-o-linear-gradient(top, yellow,red);/** Opear **/ 

background:-ms-linear-gradient(yellow 0%,red 100%);/** IE9 IE10 **/ 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow',endColorstr='red',grandientType=1); /** IE7 **/ 

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow',endColorstr='red',grandientType=1); /** IE8 **/ 

box-shadow:3px 3px 8px yellow;border-radius:5px;

}

input{

margin: 50px 0 0 50px;cursor:pointer;width:100px;height:50px;



-webkit-transform:rotate(20deg);

-moz-transform:rotate(20deg);

transform:rotate(20deg);

-webkit-transition:0.8s;

-moz-transition:0.8s;

}

input:hover{

-webkit-transform:rotate(360deg) scale(1.3);

-moz-transform:rotate(360deg) scale(1.3);

transform:rotate(360deg) scale(1.3);



box-shadow:10px 10px 15px #111;

}

</style>





<script type="text/javascript">

var snake=[];

var oDiv=null;

var oDivSize=600;

var dir="left";

var fruit=null;

var snakeWidth=20;

var t=null;

var aInp=null;

var aSpan=null;

window.onload=function(){

oDiv=document.getElementsByTagName('div')[0];

aInp=document.getElementsByTagName('input');

aSpan=document.getElementsByTagName('span')[0];

oDiv.style.position='absolute';

oDiv.style.width=oDivSize+'px';

oDiv.style.height=oDivSize+'px';

oDiv.style.left ='350px';

   oDiv.style.top ='20px';

   oDiv.style.border = "15px solid rgba(35,150,60,1)";

   init(500);

   // t=setInterval(move,interval);

   aInp[0].onclick=function(){

    var first = snake[0];

var fruitLeft = parseInt(fruit.style.left);

var fruitTop = parseInt(fruit.style.top);

var firstLeft = parseInt(first.style.left);

var firstTop = parseInt(first.style.top);

    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){

    clearInterval(t);

    t=setInterval(move,600);

    for(var i=0;i<aInp.length;i++){

    aInp[i].style.background='';

    }

    this.style.background="#ae5";

   } 

}

   aInp[1].onclick=function(){

    var first = snake[0];

var fruitLeft = parseInt(fruit.style.left);

var fruitTop = parseInt(fruit.style.top);

var firstLeft = parseInt(first.style.left);

var firstTop = parseInt(first.style.top);

    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){

   clearInterval(t);

    t=setInterval(move,280);

    for(var i=0;i<aInp.length;i++){

    aInp[i].style.background='';

    }

    this.style.background="#f66";

   }

}

    aInp[2].onclick=function(){

    var first = snake[0];

var fruitLeft = parseInt(fruit.style.left);

var fruitTop = parseInt(fruit.style.top);

var firstLeft = parseInt(first.style.left);

var firstTop = parseInt(first.style.top);

    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){

    clearInterval(t);

    t=setInterval(move,150);

    for(var i=0;i<aInp.length;i++){

    aInp[i].style.background='';

    }

    this.style.background="lightblue"

   }

}

    aInp[3].onclick=function(){

    var first = snake[0];

var fruitLeft = parseInt(fruit.style.left);

var fruitTop = parseInt(fruit.style.top);

var firstLeft = parseInt(first.style.left);

var firstTop = parseInt(first.style.top);

    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){

    clearInterval(t);

    t=setInterval(move,100);

    for(var i=0;i<aInp.length;i++){

    aInp[i].style.background='';

    }

    this.style.background="red";

   }

}

   aInp[4].onclick=function(){

    var first = snake[0];

var fruitLeft = parseInt(fruit.style.left);

var fruitTop = parseInt(fruit.style.top);

var firstLeft = parseInt(first.style.left);

var firstTop = parseInt(first.style.top);

    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){

    clearInterval(t);

    t=setInterval(move,50);

    for(var i=0;i<aInp.length;i++){

    aInp[i].style.background='';

    }

    this.style.background="#fd5"

   }

}

}

function move(){

for(var i=snake.length-1;i>0;i--){

var s = snake[i];

var s2 = snake[i-1];

s.style.left = s2.style.left ;

s.style.top =  s2.style.top ;

}

var ss = snake[0];

if(dir == "left"){

ss.style.left =  (parseInt(ss.style.left) - snakeWidth) + "px";

} else if(dir == "right"){

ss.style.left =  (parseInt(ss.style.left) + snakeWidth) + "px";

} else if(dir == "top"){

ss.style.top =  (parseInt(ss.style.top) - snakeWidth) + "px";

}else if(dir == "buttom"){

ss.style.top =  (parseInt(ss.style.top) + snakeWidth) + "px";

} 

check();

}

function init(appear){

var oneSnake=create(appear,snakeWidth * 2);

snake.push(oneSnake);

oDiv.appendChild(oneSnake);





var oneSnake=create(appear+snakeWidth,snakeWidth * 2);

snake.push(oneSnake);

oDiv.appendChild(oneSnake);





var oneSnake=create(appear+snakeWidth+snakeWidth,snakeWidth * 2);

snake.push(oneSnake);

oDiv.appendChild(oneSnake);





addFruit();

}





function create(left,top){

var div=document.createElement('div');

div.style.position='absolute';

div.style.left=left+'px';

div.style.top=top+'px';

div.style.width=snakeWidth+'px';

div.style.height=snakeWidth+'px';

div.style.border = "1px solid aqua";

return div;

}

function addFruit(){

var left=Math.floor(Math.random()*(oDivSize/snakeWidth))*snakeWidth;

var top=Math.floor(Math.random()*(oDivSize/snakeWidth))*snakeWidth;

for(i=0;i<snake.length;i++){

var s=snake[i];

if(left == parseInt(s.style.left)&&parseInt(top == s.style.top)){

addFruit();

return;

}

}

fruit=create(left,top);

oDiv.appendChild(fruit);

}





function onKeyupEvent(event){

var code = event.keyCode

if(code == 38 && dir != "buttom"){

dir = "top";

} if(code == 40 && dir != "top"){

dir = "buttom";

}if(code == 37 && dir != "right"){

dir = "left";

}if(code == 39 && dir != "left"){

dir = "right";

}

check();

}









function check(){

var num=0;

var first = snake[0];

var fruitLeft = parseInt(fruit.style.left);

var fruitTop = parseInt(fruit.style.top);

var firstLeft = parseInt(first.style.left);

var firstTop = parseInt(first.style.top);





if(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize){









clearInterval(t);

 var M=confirm('撞到墙上了,游戏结束！

是否又一次開始？');

                if(M){

                    document.location.reload();

                }else{

                    return false;

                }

return;//检验是否撞到墙上了 

}

for(var i = 1; i < snake.length ; i++){

var s = snake[i];

if(firstLeft == parseInt(s.style.left) && firstTop == parseInt(s.style.top)){

clearInterval(t);

var N=confirm('撞到自己了，游戏结束！

是否又一次開始？')

if(N){

document.location.reload();

}else{

return false;

}

return; //检验是否撞到自身

}

}



if((dir == "buttom" && (fruitTop - firstTop == snakeWidth) && fruitLeft == firstLeft) || 

  (dir == "top" && (fruitTop - firstTop == -snakeWidth) && fruitLeft == firstLeft) ||

  (dir == "right" && (fruitLeft - firstLeft == snakeWidth) && fruitTop == firstTop)||

  (dir == "left" && (fruitLeft - firstLeft == -snakeWidth) && fruitTop == firstTop)){

var temp = [];

temp.push(fruit);

snake = temp.concat(snake);//吃了

num++;

addFruit();

}





}

</script>





</head>





<style type="text/css">

img{

  position:absolute;

  left:1100px;

  top:100px;

  }

</style>





<body onkeyup="onKeyupEvent(event)" style="background:rgba(50,50,50,1)">

<font color="pink" size="5" style='position:absolute;left:1000;top:300'>利用键盘上的↑ ↓ ← → 来控制方向 </font>





<a  href="../index.html"><img border="0" src="./image/4.jpg" alt="主页面" title="返回主页面"></a>









<div></div>



<ul>

<li><h1><input type="button" value="開始"></h1></li>

<li><input type="button" value="简单"></li>

<li><input type="button" value="0基础"></li>

<li><input type="button" value="一般"></li>

<li><input type="button" value="困难"></li>

</ul>





<span style="font-size:25px;color:#ae5;font-family:微软雅黑;margin-left:30px;position:absolute;left:10px;bottom:40px;";>请选择难度開始游戏<br>游戏过程中能够随时难度</span>



<br><br><br><br><br><br><br><br><br>

<p></p>

<h2 align=right><font color="blue">

<body onload="show()">   <!-- 网页载入时调用一次 以后就自己主动调用了--> 

<font size="5" color="pink"> Design By：</font><a href="http://blog.csdn.net/qq_21792169/article/category/5907695" target="_blank"><font size="5" color="pink">网络人VS灰鸽子工作室</font></a>

<div id="nowDiv"></div> </body>

</font></h2>





</body>

</html>

HTML5贪吃蛇源代码的更多相关文章

  1. C/C++编程笔记：C语言贪吃蛇源代码控制台（二），分数和食物！

    接上文<C/C++编程笔记:C语言贪吃蛇源代码控制台(一),会动的那种哦!>如果你在学习C语言开发贪吃蛇的话,零基础建议从上一篇开始哦!接下来正式开始吧! 三.蛇的运动 上次我已经教大家画 ...

  2. WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  3. [置顶] 63行代码完美实现html5 贪吃蛇游戏

    以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

  4. 使用TypeScript实现简单的HTML5贪吃蛇游戏

    TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

  5. C/C++编程笔记：C语言贪吃蛇源代码控制台（一），会动的那种哦！

    前几天有个同学加我QQ私聊我说他们老师布置了一个贪吃蛇,他不知道怎么写所以来找我求解,我给他简单讲解了思路和一些难点之后他也能够自己独立将项目完成了!考虑到更多同学可能有贪吃蛇上的问题,今天有时间就来 ...

  6. 简易html5贪吃蛇

    1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg ​2. [文件] snake.html <!DOCTYPE html><html><head> ...

  7. 【转】Android贪吃蛇源代码

    /*TileView:tile有瓦片的意思,用一个个tile拼接起来的就是地图.TileView就是用来呈现地图的类*/ public class TileView extends View { /* ...

  8. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  9. 100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

随机推荐

  1. springboot actuator shutdown正确的关闭操作

    今天整合ehcache时发现一个很重要的问题,就是程序关闭(硬关闭)之后,持久化到磁盘的缓存数据没能正确写入加载,问题还是硬关闭的问题,所以就使用actuator 进行监听 <dependenc ...

  2. Android textView开头空两格问题，排版缩进2个汉字

    一般为了排版,textView中字符段落开头一般都会空两格显示,如下图 但是如果你靠敲击空格来解决那就错了,那样在不同的屏幕上显示会差异,完美的解决方法是用转义字符”\t“,在段首加\t\t就解决.加 ...

  3. OpenGL编程（三）让矩形动起来

    上次实现了在窗口中添加一个了一个矩形.这次的任务是在上次代码的基础上,让那个矩形动起来. 1.思路 要看到动态的效果,首先添加一个定时器,规定的时间刷新一次窗口:不断修改矩形的位置,使其在时间轴上达到 ...

  4. OpenGL编程（二）绘制矩形

    上次只是创建了一个简单的窗口,把背景颜色修改为蓝色(默认是黑色),并没有向窗口添加任何图形.这次在上次代码的基础上往窗口中添加一个矩形,设置矩形的颜色,大小等. 1.添加矩形 在(参考上次代码)ren ...

  5. 51Nod 和为k的连续区间

    一整数数列a1, a2, ... , an(有正有负),以及另一个整数k,求一个区间[i, j],(1 <= i <= j <= n),使得a[i] + ... + a[j] = k ...

  6. RMAN备份脚本

      单机环境全备   export ORACLE_BASE=/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORA ...

  7. CMD和AMD的区别

    CMD和AMD俩者之间的区别 AMD和CMD最大的区别是对依赖模块的执行时机处理不同 CMD和AMD都是CommonJS延伸而来的,CommonJS是随着node的出现而出现的,它是一个规范,用于定义 ...

  8. mysql主从同步错误恢复

    Mysql主从同步集群在生成环境使用过程中,如果主从服务器之间网络通信条件差或者数据库数据量非常大,容易导致MYSQL主从同步延迟. MYSQL主从产生延迟之后,一旦主库宕机,会导致部分数据没有及时同 ...

  9. perl模块

    查看perl模块安装目录:find `perl -e ‘print “@INC”‘` -name ‘*.pm’ -print 为什么要写或要模块呢?简言之:代码重用,更多见于写一组工具集,有很多地方是 ...

  10. 紫书 习题 10-2 UVa 808（建立坐标+找规律）

    这次是我遇见过最迷的一次 我写的程序uDebug全过 和ac程序对拍也过,求出来的坐标是一模一样的,最后结果输出的方式也是一样的 交上去就是错的 迷 第一次遇到这种情况 大佬在哪里 #include& ...