写文记录一下最近新完成的贪吃蛇游戏案例，用到了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. Problem O: 零起点学算法10——求圆柱体的表面积

    #include<stdio.h> int main() { float r,h,pi; pi=3.1415926; scanf("%f %f",&r,& ...

  2. python 实现汉诺塔问题

    代码如下: def hano(n,x,y,z): if n==1: print(x,"->",z) else: #将n-1个盘子从x->y hano(n-1,x,z,y ...

  3. shell用法 (cat << EOF)

    下面的语句会创建不存在的secure.config,如果存在直接追加,然后把多行内容: [database]        password = gerrit 写入文件secure.config ca ...

  4. postprocessing stack v2

    用了v2和unity2017.3.0f有兼容性问题 在assetbundle的情况下 CopyStd这个shader打不进去 在assetbundle的menafest里面有列但是shader.fin ...

  5. PHP关闭notice级别报错信息

    1.在php.ini文件中改动error_reporting改为:error_reporting=E_ALL & ~E_NOTICE2.如果你不能操作php.ini文件,你可以使用如下方法在你 ...

  6. Jquery获取当前行的数据

    取表格当前行数据js代码: Java代码 $(function() { $(".myclass").each(function(){     var tmp=$(this).chi ...

  7. Python 类的特殊成员方法详解

    class doges(object): """类的描述信息""" def __init__(self,name,food): self.n ...

  8. undefined reference to `std::cout'等错误

    (1)gcc和g++都是GNU(组织)的一个编译器. (2)后缀名为.c的程序和.cpp的程序g++都会当成是c++的源程序来处理.而gcc不然,gcc会把.c的程序处理成c程序. (3)对于.cpp ...

  9. 取给定正整数的指定bit位開始的指定长度的数据

    接口说明 原型: unsigned int GetBitsValue(unsigned int input, unsigned int startbit, unsigned int bitlen) 输 ...

  10. StandardServer.await: create[8005]java.net.BindException: Address already in use: JVM_Bind错误

    StandardServer.await: create[8005]java.net.BindException: Address already in use: JVM_Bind错误. 原因是:To ...