<!DOCTYPE html>

 <html>

     <head>

         <title></title>

         <meta charset="utf-8">

         <style>

             ul{

                 margin:0 auto;

                 width:600px;

             }

             li{

                 border-radius:10px;

                 box-sizing:border-box;

                 list-style:none;

                 float:left;

                 width:30px;

                 height:30px;

                 border:1px solid #6495ED;

             }

             .snake{

                 background-color:black;

             }

             .food{

                 background-color:red;

             }

             .headSnake{

                 background-color:green

             }

         </style>

     </head>

     <body>

         <ul></ul>

     </body>

     <script>

         //50X50格子，用二位数组取

         var deskArr = [];

         //创建文档片段

         var fragment = document.createDocumentFragment() ;

         for(var i=0;i<20;i++){

             var rowArr = [];

             for(var j=0;j<20;j++){

                 var li = document.createElement("li");

                 fragment.appendChild(li);

                 rowArr.push(li);

             }

             deskArr.push(rowArr);

         }

         document.querySelector("ul").appendChild(fragment);

         //蛇数组

         var snake = [];

         //分数

         var score = 0;

         //蛇头1-18

         var headNumX = parseInt(Math.random()*(17)+1);

         //蛇头0-19

         var headNumY = parseInt(Math.random()*19);

         //改变蛇头的颜色

         snake.push(deskArr[headNumY][headNumX]);

         snake.push(deskArr[headNumY][headNumX-1]);

         snake[0].className = "headSnake";

         snake[1].className = "snake";

         //console.log(snake);

         //蛇移动

         //蛇移动的速度

         var speed = 500;

         //蛇移动的默认方向

         var dir = "right";

         //是否showFood

         var food = 1;

         //吃到食物的标志

         var foodFlag = false;

         function snakeMove(){

             if(food==1){

                 foodShow();

                 food=0;

             }

             /*键盘事件

                 当向上键并且默认方向不是下时，dir="up"

                 当向下键时，dir="down"

                 当向左键时，dir="left"

                 当向右键时，dir="right"

             */

             document.onkeydown = function(){

                 var event= window.event||arguments[0];

                 if(event.keyCode==37&&dir!="right"){

                     dir = "left";

                 }else if(event.keyCode == 38&&dir!="down"){

                     dir = "up";

                 }else if(event.keyCode == 40&&dir!="up"){

                     dir = "down";

                 }else if(event.keyCode == 39&&dir!="left"){

                     dir = "right";

                 }

             }

             //方向判断

             switch (dir)

             {

                 case "right":

                     headNumX++;

                     break;

                 case "left":

                     headNumX--;

                     break;

                 case "up":

                     headNumY--;

                     break;

                 case "down":

                     headNumY++;

                     break;

             }

             snake[snake.length-1].className = "";

             snake.pop();

             snake[0].className="snake";

             snake.unshift(deskArr[headNumY][headNumX]);

             snake[0].className = "headSnake";

             //判断是否吃到食物

             if(snake[0]==deskArr[foodY][foodX]){

                 snake[0].className="snake";

                 if(dir =="up"){

                     headNumY--;

                 }else if(dir =="down"){

                     headNumY++;

                 }else if(dir =="left"){

                     headNumX--;

                 }else if(dir =="right"){

                     headNumX++;

                 }

                 snake.unshift(deskArr[headNumY][headNumX]);

                 snake[0].className="headSnake";

                 score++;

                 foodShow();

             }

             liveOrDie()&&(setTimeout(snakeMove,speed));

         }

         setTimeout(snakeMove,speed)

         //随机生成一个食物

         /*

             随机生成foodX，foodY

                     0-19    0-19

             判断该位置是否与身体重合

                 若重合，则重新取值

                 若不重合，则显示food

         */

         var foodX;

         var foodY;

         function foodShow(){

             foodX = parseInt(Math.random()*17+1);

             foodY = parseInt(Math.random()*17+1);

             var flag = 0;

             for(var i=0;i<snake.length;i++){

                 (snake[i]==deskArr[foodY][foodX])&&(flag=1);

             }

             !flag?

             deskArr[foodY][foodX].className = "food"

             :foodShow();

         }

         /*判断是否游戏失败

             1.撞墙

                 头的坐标Y 小于0或者大于19

                 头的坐标X 小于0或者大于19

             2.撞到自己的身体

                 循环，当两个对象一样时，

         */

         function liveOrDie(){

             console.log(headNumX);

             if(headNumX>19||headNumX<0||headNumY>19||headNumY<0){

                 alert("游戏结束"+"\n"+"最终得分"+score);

                 return 0 ;

             }

             for(var i=1;i<snake.length;i++){

                 if(snake[0]==snake[i]){

                     alert("游戏结束"+"\n"+"最终得分"+score);

                     return 0;

                 }

             }

             return 1;

         }

     </script>

 </html>

原生js贪吃蛇的更多相关文章

  1. 原生Js贪吃蛇游戏实战开发笔记

    前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...

  2. JS贪吃蛇游戏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. js贪吃蛇-简单版

    分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  4. JS贪吃蛇小游戏

    效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  5. HTML5+CSS+JS 贪吃蛇demo

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

  6. js贪吃蛇（构造函数）

    给大家分享一下这几天我研究的一个贪吃蛇,挺简单的,但是实现起来其实有点绕的,我给大家附上完整代码,一起分析学习一下,主要用的是构造函数. 思想: .设计蛇:属性有宽.高.方向.状态(有多少节),方法: ...

  7. 原生JavaScript贪吃蛇

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

  8. js贪吃蛇源码

    1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...

  9. js贪吃蛇

    function init() { w = 40; m = 20; d = w * m / 2; food = null; dm = new ht.DataModel(); g3d = new ht. ...

随机推荐

  1. vue-cli脚手架的环境搭建

    vue-cli (1)检查node版本 在安装vue的环境之前,安装NodeJS环境是必须的.可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境. 当然,没有安装的话,去N ...

  2. UserView--第二种方式（避免第一种方式Set饱和），基于Spark算子的java代码实现

      UserView--第二种方式(避免第一种方式Set饱和),基于Spark算子的java代码实现   测试数据 java代码 package com.hzf.spark.study; import ...

  3. c++---天梯赛---大笨钟

    ★题目: ★思路分析: 对可能的情况进行分类处理.在这里我把它们分成了3大类. ①不在敲钟时间 ②在敲钟时间但为整点 ③在敲钟时间且不为整点. 在敲钟时间段内我们可分别对晚8点前后进行分类讨论, 我们 ...

  4. WdatePicker时间插件

    next_door_boy CnBlogs Home New Post Contact Admin Rss Posts - 14  Articles - 5  Comments - 0  WdateP ...

  5. linux常用命令(CentOS)

    1．目录切换命令 linux目录结构 ps:绿色标注为常用命令 cd xx 切换到该目录下的xx目录 cd ../ 切换到上一层目录 cd / 切换到系统根目录 cd ~ 切换到用户主目录 cd - ...

  6. ios 积累

    1.加号 是可以通过类名直接调用这个方法,而减号则要实例化逸个对象,然后通过实例化的对象来调用该方法!! 2.(返回类型) 方法名 :(参数类型)变量名 空格 参数二名 :(参数类型) 变量名 空格 ...

  7. Struts2中Action接收参数的方法主要有以下三种：

    Struts2中Action接收参数的方法主要有以下三种: 1.使用Action的属性接收参数(最原始的方式):     a.定义:在Action类中定义属性,创建get和set方法:     b.接 ...

  8. 数据结构 链式哈希表（Hash Table）的接口定义与实现分析（完整代码）

    链式哈希表的接口定义 关于哈希表与链式哈希表的描述可以参阅:http://www.cnblogs.com/idreamo/p/7990860.html 链式哈希表的操作与属性有:初始化.销毁.插入元素 ...

  9. 腾讯工程师带你深入解析 MySQL binlog

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 本文由 腾讯云数据库内核团队 发布在云+社区 1.概述 binlog是Mysql sever层维护的一种二进制日志,与innodb引擎中的red ...

  10. Web Magic设计思想

    1.1 设计思想 1. 一个框架,一个领域 一个好的框架必然凝聚了领域知识.WebMagic的设计参考了业界最优秀的爬虫Scrapy,而实现则应用了HttpClient.Jsoup等Java世界最成熟 ...