写文记录一下最近新完成的贪吃蛇游戏案例，用到了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. 导出pem证书给服务端Push Notification使用

    1. 钥匙串创建Push证书的证书签名请求文件(CSR文件). 如下图所示: 2.创建App ID,创建Provisioning Profile,下载安装到XCode. 苹果开发者后台页面,创建Pus ...

  2. 实现tomcat与IIS共用80端口

    一.80端口被system占用的问题 目前生产环境的需要两种方式网站发布: [1].使用IIS发布.net开发的网站: [2].使用tomcat发布java开发的网站: 启动tomcat的时候发现无法 ...

  3. stl之list双向链表容器应用基础

    不同于採用线性表顺序存储结构的vector和deque容器.list双向链表中任一位置的元素差值.插入和删除,都具有高效的常数阶算法时间复杂度O(1). 头文件 #include<list> ...

  4. Linux内核regulator架构和编写

    电源种类介绍 (百度百科)LDO是low dropout regulator,意为低压差线性稳压器,是相对于传统的线性稳压器来说的.传统的线性稳压器,如78xx系列的芯片都要求输入电压要比输出电压高出 ...

  5. Linux下sqlite3编程

    ---------------------------------------------------------------------------------------------------- ...

  6. java源码阅读StringBuilder

    1类签名与注释 public final class StringBuilder extends AbstractStringBuilder implements java.io.Serializab ...

  7. 开源知识库管理系统选型 centos6.4 搭建knowlededgeroot-1.0.4知识库平台

    开源知识库管理系统选型,除了使用wiki外,还有下面可选: http://www.knowledgebase-script.com/ https://github.com/lordlamer/know ...

  8. [Angular] Angular Attribute Decorator - When to use it?

    When we pass value to a component, normally we use @Input. <my-comp [courses]="(courses$ | a ...

  9. 从webstorm转vscode,来一个vscode的教程和心得总结

    背景 在公司跑代码,每天卡的吐血,感觉生命都被浪费了. 再在摧残了一段时间,天天想摔电脑以后,被同事安利vscode, 那就开始搞起来 安装 这个我真的不用说了吧 插件 快捷键 shift + alt ...

  10. MPTCP 源码分析(三) 子路径选择

    简述:      支持MPTCP的链路中存在多条子路径,因此在发送数据的时候需要选择最优路径来进行操作. MPTCP利用内核通知链对MPTCP中各子路径进行增加路径.删除路径.修改路径优先级的操作.M ...