写文记录一下最近新完成的贪吃蛇游戏案例，用到了html、css和JavaScript，难度不高，适合刚入坑的同学练习，欢迎大家交流。

下面贴源码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>贪吃蛇游戏界面</title>

         <style>

             *{

                 font-family: "微软雅黑";

             }

             #map{

                 width: 600px;

                 height: 600px;

                 background: cadetblue;

                 position: absolute;

                 left: 10px;

                 top: 60px;

                 overflow: hidden;

             }

             input{

                 padding: 10px;

                 background: black;

                 color: #ffffff;

             }

         </style>

     </head>

     <!--捕获键盘按键-->

     <body onkeydown="control(event);" >

         <div class="top" >

             <input type="button" value="开始游戏" id="start_btn" onclick="start();test(this)"/>

             <span>得分：</span><span id="score"></span>

         </div>

         <div id="map" ></div>

         <script type="text/javascript">

             var snake_left = Math.floor(Math.random() * 26) * 20; //游戏开始时，蛇的位置

             var snake_top = Math.floor(Math.random() * 30) * 20;

             var map = document.getElementById("map");

             var snakes = [];//蛇的关节

             var stepX = 20;

             var stepY = 0;

             var snake_direction="right";

             var timer;

             //开始按钮点击一次后失效

             function test(obj){

                 obj.disabled=true;

                 obj.value="游戏开始中"

             }

             //点击“开始按钮” 开始游戏

             //document.getElementById("start_btn").onclick = function (){

                 function start(){

                 //游戏开始，蛇头放到数组的第一项

                 for(var i = 2; i>=0;i--){

                     drawSnake(i);

                 }

                 //蛇的移动

                 snakeMove();

                 //碰到墙壁死掉

                 overDiv();

                 //产生食物

                 food();

                 //吃掉食物

                 eat();

             }

             //让蛇移动

             function snakeMove(){

                 //蛇尾 的位置等于 上一个

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

                     snakes[i].style.left = snakes[i-1].style.left;

                     snakes[i].style.top = snakes[i-1].style.top;

                 }

                 //snakes数组的第零项是蛇头

                 snakes[0].style.left = parseInt(snakes[0].style.left) + stepX +"px";

                 snakes[0].style.top = parseInt(snakes[0].style.top) + stepY +"px";

                 timer = setTimeout("snakeMove()",400);

             }

             //画出蛇身

             function drawSnake(num){

                 var snakeNode = document.createElement("div");

                 snakeNode.style.position = "absolute";

                 snakeNode.style.top = "0px";

                 snakeNode.style.left =  num * 20+"px";

                 snakeNode.style.background = "coral";

                 //如果设置div边框 20*20   18*18  1

                 //snakeNode.style.border = "1px solid #333";

                 snakeNode.style.width = "20px";

                 snakeNode.style.height = "20px";

                 snakes.push(snakeNode);

                 map.appendChild(snakeNode);

             }

             function re_move(){

                 clearTimeout(timer);

                 snakeMove()

             }

             //控制方向

             function control(event){

                 var n = event.keyCode;

                 switch(n){

                     case 37://  左  蛇在向右跑的过程中按左是不起作用的

                         if(snake_direction=="right"){

                             break;

                         }else{

                             stepX = -20;

                             stepY = 0;

                             snake_direction="left";

                         }

                         re_move();

                     break;

                     case 40://下   蛇在向下跑的过程中 按上是不起作用的

                         if(snake_direction=="up"){

                             break;

                         }else{

                             stepX = 0;

                             stepY = 20;

                             snake_direction="down";

                         }

                         re_move();

                     break;

                     case 38://  上  蛇在向下跑的过程中按左是不起作用的

                         if(snake_direction=="down"){

                             break;

                         }else{

                             stepX = 0;

                             stepY = -20;

                             snake_direction="up";

                         }

                         re_move();

                     break;

                     case 39://下   蛇在向下跑的过程中 按上是不起作用的

                         if(snake_direction=="left"){

                             break;

                         }else{

                             stepX = 20;

                             stepY = 0;

                             snake_direction="right";

                         }

                         re_move();

                     break;

                 }

             }

             //判断是否碰到墙壁

             function overDiv(){

                 //计算得分

                 var score = document.getElementById("score");

                 score.innerHTML = (snakes.length-3)*10;

                     var x = parseInt(snakes[0].style.left); //snakes[0]代表蛇头

                     var y = parseInt(snakes[0].style.top);

                     //判断是否碰到墙壁

                     if(x<0||x>580||y<0||y>580){

                         alert("Game Over");

                         window.location.reload();

                     }

                     //判断是否吃到自己

                     if(snakes.length > 4){

                         for(var i=3;i<snakes.length-1;i++){

                             var x1 = parseInt(snakes[i].style.left);

                             var y1 = parseInt(snakes[i].style.top);

                             if(x==x1 && y==y1){

                                 alert("Game Over");

                                 window.location.reload();

                             }

                         }

                     }

                     setTimeout("overDiv()",30);

             }

             //产生食物

             function food(){

                 var food_x = Math.floor(Math.random()*29+1)*20 + "px";

                 var food_y = Math.floor(Math.random()*29+1)*20 + "px";

                 //画出食物

                 var food_div = document.createElement("div");

                 food_div.style.position = "absolute";

                 food_div.style.top = food_y;

                 food_div.style.left = food_x;

                 food_div.style.backgroundColor = "orange";

                 //food_div.style.border = "1px solid #333";

                 food_div.style.width = "20px";

                 food_div.style.height = "20px";

                 //给食物加id

                 food_div.id = "i_food";

                 map.appendChild(food_div);

             }

             //吃掉食物

             function eat(){

                 //得到蛇头坐标

                 var x1 = parseInt(snakes[0].style.left);

                 var y1 = parseInt(snakes[0].style.top);

                 //得到食物坐标

                 var i_food = document.getElementById("i_food");

                 var x2 = parseInt(i_food.style.left);

                 var y2 = parseInt(i_food.style.top);

                 if(Math.abs(x1-x2)<20 && Math.abs(y1-y2)<20){

                     snakes.push(i_food);

                     i_food.id = "";

                     //生成食物

                     food();

                 }

                 setTimeout("eat()",30);

             }

         </script>

     </body>

 </html>

html+css+JavaScript贪吃蛇的更多相关文章

  1. 原生JavaScript贪吃蛇

    在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...

  2. HTML5+CSS+JS 贪吃蛇demo

    我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...

  3. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  4. JavaScript实现的--贪吃蛇

    总的实现思路: 一.效果部分:  1.编写html代码,加上样式. 二.JavaScript部分:  1.利用dom方法创建一块草坪,即活动区域:   2.创建一条蛇,并设置其初始位置:       ...

  5. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

  6. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  7. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  8. JavaScript原生实现《贪吃蛇》

    概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...

  9. JavaScript实践-简单的贪吃蛇小游戏

    实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...

随机推荐

  1. 3.2常用类（java学习笔记）String与StringBuffer

    一.String String又称不可变字符序列. 我们看JDK源码中用于字符存储的数组有final修饰,final修饰变量就代表变量不能改变. 我们可以看API文档中对String的描述. Stri ...

  2. 编译boost到各个系统平台 mac,iOS,linux,android,wind

    编译boost到各个系统平台 mac,iOS,linux,android,wind git地址:https://github.com/czjone/boost git仓库:https://github ...

  3. 十面阿里 Java 程序员，最终拿下阿里 P6 offer！

    转子:https://mp.weixin.qq.com/s/RkMxPbm8E99-rTZKmvBy6Q 今天介绍小编的一个朋友,他现今有四年开发经验了,前前后后为了进阿里面试十次(阿里旗下—蚂蚁金服 ...

  4. checkbox与文字对齐方式（同样可用于radio单选框）

    checkbox 在chrome 和 firefox中 间距是由margin撑开, IE中则是由padding,并且无法设置边框:   主要参考大神的博客,http://www.zhangxinxu. ...

  5. 校验知识：CRC32、MD5、SHA1概念及可靠性现状

    转:http://www.metsky.com/archives/337.html 昨天介绍了Windows 7的版本识别问题,不得不提到常用的CRC32.MD5.SHA1等校验算法可靠性问题,如果只 ...

  6. 阿里p6面试

    电话面试: 第一次面试关注的问题,1)java基础: jvm 内存回收,垃圾回收基本原理,Java并发包的线程池,Java8的新特性.nio 堆排序.conrenthashmap , concurre ...

  7. 【java】File的使用：将字符串写出到本地文件，大小0kb的原因

    实现方法: 暂时写一种方法,将字符串写出到本地文件,以后可以补充更多种方法: public static void main(String[] args) { /** * ============== ...

  8. golang之bufio包的使用

    原文地址:http://www.niu12.com/article/38 github地址:https://github.com/ZQCard/go_api_practice // 参考:https: ...

  9. 13：在O(1)时间删除单链表节点

    题目:给定单项链表的头指针和一个节点指针.定义一个函数在O(1)时间删除该节点. 解析: 删除单向链表中的一个节点,常规做法是必须找到待删除节点的前一个节点才干实现.而这样做的时间复杂度是O(n).无 ...

  10. GyoiThon：基于机器学习的渗透测试工具

    简介 GyoiThon是一款基于机器学习的渗透测试工具. GyoiThon根据学习数据识别安装在Web服务器上的软件(操作系统,中间件,框架,CMS等).之后,GyoiThon为已识别的软件执行有效的 ...