写文记录一下最近新完成的贪吃蛇游戏案例，用到了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. [转] Matlab与C++混合编程，添加OpenCV库

    原文地址 峰回璐转 最近在做运动医学软件优化工作,此款软件框架及算法语言全由matlab实现,虽然matlab矩阵运算.数值计算能力强大,但速度让人难以忍 受.软件立刻移植到C++上又不太实际,故采用 ...

  2. 【java】java中直接根据Date 获取明天的时间

    展示代码: @Test public void dateTest(){ Date now = new Date(); System.out.println(now); // java.util.Dat ...

  3. Git -- 自己项目关联新建的git

  4. Android2017最新面试题（3-5年经验个人面试经历）

    2017最新Android面试题 大家好,在跟大家讲述自己的面试经历,以及遇到的面试题前,先说说几句题外话. 接触Android已经3年,在工作中遇到疑难问题总是在网上(csdn大牛博客,stacko ...

  5. python之pack布局

    #Pack为一布局管理器,可将它视为一个弹性的容器 '''1.一个空的widget'''#不使用pack # -*- coding: cp936 -*- from Tkinter imp ort * ...

  6. 使用Nmon监控Linux的系统性能

    Nmon(得名于 Nigel 的监控器)是IBM的员工 Nigel Griffiths 为 AIX 和 Linux 系统开发的一款计算机性能系统监控工具.Nmon 可以把操作系统的统计数据展示在屏幕上 ...

  7. Hello Ragel -- 生成状态机的神器

    Ragel 是个很 NB 的能生成状态机的编译器,而且支持一堆语言:C.C++.Object-C.C#.D.Java.Go 以及 Ruby. 原来的文本解析器是用正则表达式实现的,随着状态(if-el ...

  8. 开源的C# websocket-sharp组件解析

    下面我们介绍一款WebSocket组件websocket-sharp的相关内容. 一.websocket-sharp组件概述 websocket-sharp是一个C#实现websocket协议客户端和 ...

  9. Windows内核之线程简单介绍

    1 线程定义 <1> 内核对象,操作系统用它来对线程实施管理.内核对象也是系统用来存放线程统计信息的地方 <2>还有一个是线程堆栈.它用于维护线程在运行代码时须要的全部函数參数 ...

  10. TestNG+ReportNG+Maven优化测试报告

    转载:https://www.cnblogs.com/hardy-test/p/5354733.html 首先在eclipse里面创建一个maven项目,具体要配置maven环境,请自行百度搭配环境. ...