原生js贪吃蛇

 <!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贪吃蛇的更多相关文章

原生Js贪吃蛇游戏实战开发笔记
前言本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
js贪吃蛇-简单版
分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
JS贪吃蛇小游戏
效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...
HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...
js贪吃蛇（构造函数）
给大家分享一下这几天我研究的一个贪吃蛇,挺简单的,但是实现起来其实有点绕的,我给大家附上完整代码,一起分析学习一下,主要用的是构造函数. 思想: .设计蛇:属性有宽.高.方向.状态(有多少节),方法: ...
原生JavaScript贪吃蛇
在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...
js贪吃蛇源码
1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...
js贪吃蛇
function init() { w = 40; m = 20; d = w * m / 2; food = null; dm = new ht.DataModel(); g3d = new ht. ...

随机推荐

基于Echarts4.0实现旭日图
昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明: 1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级的数据量 2.针对移动端优化,移动端小屏 ...
Oracle_数据库表的约束
Oracle_数据库表的约束完整性约束分类域完整性约束 (非空not null,检查check) 实体完整性约束 (唯一unique,主键primary key) 参照完整性约束 (外键forei ...
android 基础02 - Activity 的生命周期及状态
返回栈 Android 中的 Activity 是可以层叠的,当我们启动一个新的 Activity 时,就会覆盖在原有的 Activity 之上, 点击 Back 会销毁当前 Activity,下面的 ...
PowerShell 异常处理
在使用 PowerShell 的过程中,发现它的异常处理并不像想象中的那么直观,所以在这里总结一下. Terminating Errors 通过 ThrowTerminatingError 触发的错误 ...
_0_web_基础
创:18_3_2017修:20_3_2017 什么是前端? --在浏览器中展示内容以及处理请求什么是浏览器? --一款能将网页内容展现给用户查看,并且让用户与网页交互的软件什么是内核? --渲染引 ...
python_7_列表
什么是列表? --一种数据类型 -- 形式:[值1,值2,[值a,值b],值3] --可以嵌套 #!/usr/bin/python3 list_a = [1, 2, [3, 'a']] 对于 ...
一个使用物理引擎的WebGL3D场景
这是一个类似第三人称射击游戏(TPS)的3D场景,可以通过https://ljzc002.github.io/FPS2/index.html访问.场景运行效果如下图: 场景环境由一个天空盒和一个地面网 ...
POI--帮助文档
1.创建工作簿 (WORKBOOK) HSSFWorkbook wb = new HSSFWorkbook(); FileOutputStream fileOut = new FileOutputSt ...
MongoDB投影有$slice如何只显示该字段
简单的投影稍微用过MongoDB的都知道,投影很简单,就直接 db.student.find({_id:ObjectId('5a5085aed8f10c1a6cc0395b')},{comments ...
Nagios学习实践系列
其实上篇Nagios学习实践系列--基本安装篇只是安装了Nagios基本组件,虽然能够打开主页,但是如果不配置相关配置文件文件,那么左边菜单很多页面都打不开,相当于只是一个空壳子.接下来,我们来学习研 ...

原生js贪吃蛇

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

随机推荐

热门专题