写文记录一下最近新完成的贪吃蛇游戏案例，用到了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. Swift，枚举

    枚举类型判断 1.设置并利用枚举 enum Weacher{ case a case b case c } var d=Weacher.b switch d{ case .a: print(" ...

  2. DELPHI黑客编程（一）：正向后门原理实现

    前言 在渗透测试中经常用到远控.后门等辅助后渗透权限维持工具,有一款好用的自制后门可以在巩固渗透成果方面有很大的帮助.今天给大家简单讲解下后门的原理和实现的方法,主要针对技术研究和原理演示,请各位看官 ...

  3. tessellation 曲面细分 on Android

    Mac OS X 10.8 (OpenGL 3.2), MacOSX 10.9 (OpenGL 3.2 to 4.1) Windows with NVIDIA since 2006 (GeForce ...

  4. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  5. HBase设计与开发

    HBase设计与开发 @(HBase) 适合HBase应用的场景 成熟的数据分析主题,查询模式已经确定且不会轻易改变. 传统数据库无法承受负载. 简单的查询模式. 基本概念 行健:是hbase表自带的 ...

  6. Spark Streaming揭秘 Day1-三大谜团

    Spark Streaming揭秘 Day1 三大谜团 引子 在Spark的众多组件中,Streaming最接近企业级应用程序,学习Spark Streaming,是掌握大数据技术的一条捷径.今天是第 ...

  7. MongoDB mongoimport 报错：lost connection to server

    MongoDB对单次处理有大小限制,所以导入大文件会出问题. mongoimport 默认10000条 为一批导入,但如果单条数据过大,就会导致单次处理数据超过大小限制. 参数 --batchSize ...

  8. 使用Eclipse载入一个现有的java项目

    下文的导入记录了在Eclipse环境中,要对已经下载好的java源码进行载入时的步骤.主要用于下载后的文件不方便进行拷贝到其它位置的情况.笔者几次用到这个顺序来载入项目,但是都是隔非常长时间才用一次, ...

  9. 让Qt Creator支持Windows Phone 8开发

    让Qt Creator支持Windows Phone 8开发 近期QtCreator3.2出了.修复了一些Bug.比上一个版本号3.1.2要好了一些. 因为在上一个版本号(Qt for WinRT自带 ...

  10. POJ 2942 Knights of the Round Table 黑白着色+点双连通分量

    题目来源:POJ 2942 Knights of the Round Table 题意:统计多个个骑士不能參加随意一场会议 每场会议必须至少三个人 排成一个圈 而且相邻的人不能有矛盾 题目给出若干个条 ...