引用的东西都很基础，注释也很多，这里就不多说了。

 <head>

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

 <title>贪吃蛇</title>

 <!--css样式-->

 <style type="text/css">

     body{font-size:24px; border:none; cursor:pointer;}

     #SnakeArea{ width:420px; height:420px; border:#600 solid 2px; margin-top:-15px; margin-left:-10px; background:url(image/23.jpg);}

     #Menu{background-image:url(image/40.gif); width:200px; height:410px; border:#90C solid 2px; margin-left:420px; margin-top:-410px; color:#FFF; text-align:center;}

     a{ color:#FFF;text-decoration:none;}

     .onMouseMove{ text-decoration:underline; font-size:28px; background-color:#90F; border:2px #30F solid;}

     .onMouseOut{ text-decoration:none; font-size:24px; border: none;}

 </style>

 <!--下面是本人使用JavaScript来编写贪吃蛇,课外做的课堂作业,求高手点评出缺点,提出自己的看法意见-->

 <script type="text/javascript">

 var keyValue;//获取键盘键值

 var snakeId = 0;//蛇身体(控件)的id号

 var loca = 0;//蛇身(控件)交换的索引

 var speed = 500;//蛇移动的速度

 var num = 1;//玩家的积分

     window.onload = function Lond(){//初始化蛇的位置

         var leftPoint = 10;

         for(var i=0;i<3;i++){//初始化蛇的长度

             var SnakeLond = SnakeBody();

             SnakeLond.style.position = "absolute";

             SnakeLond.style.top = "100px";

             SnakeLond.style.left = leftPoint+"px";

             leftPoint += 10;

             document.body.appendChild(SnakeLond);//把创建的蛇添加到页面上去

         }

         Food();//初始化事物

     }

     function Random(){//获取食物的随机位置

         return Math.floor(Math.random()*(40));//生成随机数

     }

     function SnakeBody(){//构造一个蛇身并设置其初始的属性值

         var SnakeLond = document.createElement("input");

         SnakeLond.setAttribute("type","button");//初始类型

         SnakeLond.style.width = "20px";

         SnakeLond.style.height = "20px";

         SnakeLond.setAttribute("id",snakeId);

         snakeId++;

         return SnakeLond;

     }

     function Food(){//构造食物方法

         var x;

         var y;

         var SnakeLond = document.createElement("input");//创建食物

         SnakeLond.setAttribute("type","button");//食物的类型是button类型

         SnakeLond.style.width = "20px";

         SnakeLond.style.height = "20px";

         SnakeLond.setAttribute("id","food");//id为food

         x = Random() * 10;

         y = Random() * 10;

         SnakeLond.style.position = "absolute";//绝对定位

         SnakeLond.style.top = x+"px";

         SnakeLond.style.left = y+"px";

         SnakeLond.style.background = "blue";

         document.body.appendChild(SnakeLond);

     }

     function $(id){//返回指定id号的实例

         return document.getElementById(id);

     }

     function KeyDown(){//键盘键入事件,获取从键盘输入而得到的键值

         if(keyValue == 38 && event.keyCode == 40)

             event.keyCode = 38;

         else if(keyValue == 40 && event.keyCode == 38)

             event.keyCode = 40;

         else if(keyValue == 37 && event.keyCode == 39)

             event.keyCode = 37

         else if(keyValue == 39 && event.keyCode == 37)

             event.keyCode = 39;

         keyValue = event.keyCode

         Stir();//蛇移动

         EatFood();//蛇吃食

     }

     function EatFood(){//吃食方法

         var SnakeHead = Head();

         var score = $("score");

         //var leng = document.getElementsByTagName("input").length-2;

         var food = $("food");

         var s = SnakeHead.style;

         //如果蛇的头部与食物刚好对应的话就表示蛇吃到了食物,蛇的长度和速度就会增加,并且要重置定时器的速度

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

             speed -= 30;//速度发生改变

             if(speed- 30 <= 30)

                 speed = 5;

             clearInterval(time);//清除定时器

             time = setInterval("Tir()",speed);//重置定时器

             score.innerHTML = "积分："+num;//积分增加

             num++;

             food.setAttribute("id",snakeId);

             var x = parseInt(SnakeHead.style.top);

             var y = parseInt(SnakeHead.style.left);

             food.style.top = x+"px";//消化食物

             food.style.left = y+"px";

             snakeId++;

             Food();

         }

     }

     function SelfEnd(){//蛇自杀方法

         var SnakeHead = Head();

         var leng = document.getElementsByTagName("input").length-1;//得到蛇的长度

         var SnakeItem = document.getElementsByTagName("input");//得到蛇身体所有的部位

         var headTop = SnakeHead.style;

         var head = $(SnakeItem.length-2);//得到蛇的头部

         for(var i=0;i<SnakeItem.length;i++){//循环蛇的每个部位

             var items = SnakeItem.item(i).style;

             var id = SnakeItem.item(i).id;

             //如果蛇的头部与蛇的其它部位相吻合的话就表示蛇咬到了自己

             if(headTop.top == items.top && headTop.left == items.left && id<leng-2){

                 clearTimeout(time);

                 alert("<^GAME ^ OVER^>");//游戏结束

             }

         }

     }

     function BumpWall(){//蛇撞墙方法

         var SnakeHead = Head();

         var s = SnakeHead.style;

         var top = parseInt(s.top);

         var left = parseInt(s.left);

         //如果蛇移动的坐标超过了边界,则蛇撞到了墙,游戏结束

         if(top < 0 || top >= 410 || left < 0 || left >= 410){

             clearTimeout(time);

             alert("<^GAME ^ OVER^>");

         }

     }

     function Stir(){//蛇移动方法

     var pointx = 0;

     var pointy = 0;

         var leng = document.getElementsByTagName("input").length-1;

         var SnakeHead = document.getElementById(leng-1);

         var SnakeBody;//申明蛇的身体

         var leftPoint = SnakeHead.style.left;

         var topPoint = SnakeHead.style.top;

         //设置蛇的样式

         for(var i=0;i<leng;i++){

             if(i==leng-1)

                 $(i).style.backgroundColor = "purple";

             else

                 $(i).style.backgroundColor = "black";

         }

         //蛇根据你按下的上下左右键来进行移动行走

         if(keyValue == 40){

             pointy = parseInt(SnakeHead.style.top) + 10;

             pointx = parseInt(SnakeHead.style.left);

         }

         else if(keyValue == 38){

             pointy = parseInt(SnakeHead.style.top) - 10;

             pointx = parseInt(SnakeHead.style.left);

         }

         else if(keyValue == 39){

             pointx = parseInt(SnakeHead.style.left) + 10;

             pointy = parseInt(SnakeHead.style.top);

         }

         else if(keyValue == 37){

             pointx = parseInt(SnakeHead.style.left) - 10;

             pointy = parseInt(SnakeHead.style.top);

         }

         else{

             pointx = parseInt(SnakeHead.style.left) + 10;

             pointy = parseInt(SnakeHead.style.top);

         }

         SnakeBody = $(loca);//得到蛇的各个身体

         SnakeBody.style.left = leftPoint;

         SnakeBody.style.top = topPoint;

         loca++;

         if(loca == leng-1)

             loca = 0;

         SnakeHead.style.left = pointx + "px";//蛇按照指定方向走动

         SnakeHead.style.top = pointy + "px";

         var snakeSpeed = $("speed");//用来记录蛇的坐标

         snakeSpeed.innerHTML = "坐标：<br/>"+"X "+pointx+","+"Y "+pointy;

         BumpWall();//调用蛇撞墙方法

         SelfEnd();//调用蛇自杀方法

     }

     function Head(){//返回蛇的头部

         var leng = document.getElementsByTagName("input").length-1;//蛇的长度

         return document.getElementById(leng-1);//蛇的头部

     }

     function Pause(){//暂停方法

         alert("暂停中......");

     }

     function Tir(){//计时器方法

         Stir();

         EatFood();

     }

     function onMouseMove(id){//鼠标移到指定选项的方法

         var p = $(id);

         p.className = "onMouseMove";

     }

     function onMouseOut(id){//鼠标移开指定选项的方法

         var p = $(id);

         p.className = "onMouseOut";

     }

     var time = setInterval("Tir()",speed);//定时器

 </script>

 </head>

 <body onkeydown="KeyDown()">

     <div id="SnakeArea">

     </div>

     <!--游戏菜单-->

     <div id="Menu">

         <p style="color:#FF0;">游戏菜单</p>

         <a href="Snake.html" id="start" onMouseMove="onMouseMove('start')" onMouseOut="onMouseOut('start')">重新开始</a>

         <br/>

         <p id="speed" onMouseMove="onMouseMove('speed')" onMouseOut="onMouseOut('speed')">坐标</p>

         <p id="score" onMouseMove="onMouseMove('score')" onMouseOut="onMouseOut('score')">积分</p>

         <p id="pause" onClick="Pause()" onMouseMove="onMouseMove('pause')" onMouseOut="onMouseOut('pause')">暂停</p>

         <p id="end" onClick="javascript:window.close()" onMouseMove="onMouseMove('end')" onMouseOut="onMouseOut('end')">结束游戏</p>

     </div>

 </body>

 </html>

View Snake

使用Javascript来编写贪食蛇（零基础）的更多相关文章

  1. 从零基础入门JavaScript（1）

    从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了j ...

  2. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  3. 零基础JavaScript编码（二）

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  4. 零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  5. Javascript贪食蛇小游戏

    试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...

  6. JavaScript强化教程 - 六步实现贪食蛇

    1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...

  7. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

  8. JavaScript贪食蛇游戏制作详解

    之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...

  9. 网络安全(超级详细)零基础带你一步一步走进缓冲区溢出漏洞和shellcode编写！

    零基础带你走进缓冲区溢出,编写shellcode. 写在前面的话:本人是以一个零基础者角度来带着大家去理解缓冲区溢出漏洞,当然如果你是开发者更好. 注:如果有转载请注明出处!创作不易.谢谢合作. 0. ...

随机推荐

  1. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  2. list的一些使用

    list无数据判断 在一次判断中,我这样: if(list!=null){ ... } 结果发现list为空数据的时候不管用,后来发现,list只要创建实例就不会是null,但可以为empty,因此 ...

  3. 用caffe跑自己的数据，基于WINDOWS的caffe

    本文详细介绍,如何用caffe跑自己的图像数据用于分类. 1 首先需要安装过程见 http://www.cnblogs.com/love6tao/p/5706830.html 同时依据上面教程,生成了 ...

  4. SQL Server安全（1/11）：SQL Server安全概述

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  5. 玩爽了！直接在Chrome里抓取数据

    一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...

  6. 音频文件解析(二)：WAV格式文件波形绘制

    解析WAV头部信息后,接下来就可以根据相关参数和DATA块数据绘制波形. 1.重新编码(转换为8bits,单声道数据) Public Function GetFormatData(ByVal pDat ...

  7. 存储过程返回布尔值以及C#相关处理

    前段时间有在数据库以及程序之间使用到布尔(bool,Boolean)值的问题. 比如在SQL中,你想判断记录是否存? 通常你会这样写: FROM [dbo].[SixSResponsiblePerso ...

  8. Android一个ListView列表之中插入两种不同的数据

    http://www.cnblogs.com/roucheng/ Android一个ListView列表之中插入两种不同的数据 代码如下: public class ViewHolder{ Butto ...

  9. EC笔记，第一部分：1.视C++为一个语言联邦

    C++可看作由以下四种次语言组合而成1.C语言    高效,内置数据类型,数组,区块,语句,指针,预处理器,没有重载.异常.模板2.类    构造,析构,封装,继承,多态,迟绑定3.模板    模板元 ...

  10. Android实现系统重新启动

    有些Android版本没有系统重启的功能,非常不方便.需要我们自己开发一个能够重新启动的应用. 首先定义布局文件: <?xml version="1.0" encoding= ...