javascript 编写的贪吃蛇

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        .container{height: 300px;width: 300px;position: relative;margin: 100px auto;background: #c2e2ae;}

        .bgTable{border: 1px solid black;border-spacing: 0;border-collapse:collapse;position: absolute}

        .bgTable td{height: 20px;width: 20px;border: 1px solid black}

        .bgTable tr{height: 20px;width: 100px;border: 1px solid black}

        .cube{display: block;height:22px;width: 22px;background: red;position: absolute;margin: 1px}

        #cu2{top: 0px;left:115px }

    </style>

</head>

<body>

    <div class="container">

        <table class="bgTable">

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

        </table>

        <span class="cube" id="cu1"></span>

        <span class="cube" id="cu2"></span>

    </div>

    <script>

        var container=document.querySelector('.container');

        var cube=document.querySelector('.cube');

        var up=38,down=40,left=37,right=39;//        上下左右 方向键的键码(keyCode)是38、40、37和39,

        var t1,t2,t3,t4;

        var cu1=document.querySelector('#cu1');

        var cu2=document.querySelector('#cu2');

        var randomdot=[0,23,46,69,92,115,138,161,184,207,230,253,276];//随机自由点位置

        var n=2;

        var arrLeft=[],arrTop=[];//用来存储第一个方块每一步的位置

        /*设置向上下左右移动*/

        function moveLeft(obj){

             t1=setInterval(function(){

                 obj.style.left=obj.offsetLeft-24+'px';

                 arrLeft.push(obj.offsetLeft);//存储位置

                 arrTop.push(obj.offsetTop);

                 if(obj.offsetLeft<=20){clearInterval(t1);}

             },500)

        }

        function moveRight(obj){

            t2=setInterval(function(){

                obj.style.left=obj.offsetLeft+22+'px';

                arrLeft.push(obj.offsetLeft);

                arrTop.push(obj.offsetTop);

                if(obj.offsetLeft>=270){clearInterval(t2);}

            },500)

        }

        function moveTop(obj){

            t3=setInterval(function(){

                obj.style.top=obj.offsetTop-24+'px';

                arrLeft.push(obj.offsetLeft);

                arrTop.push(obj.offsetTop);

                if(obj.offsetTop<=20){clearInterval(t3);}

            },500)

        }

        function moveBottom(obj){

            t4=setInterval(function(){

                obj.style.top=obj.offsetTop+22+'px';

                arrLeft.push(obj.offsetLeft);

                arrTop.push(obj.offsetTop);

                if(obj.offsetTop>=270){clearInterval(t4);}

            },500)

        }

        /*对上下左右按键进行监听，按下某一个，会取消其他方向的移动，*/

        document.onkeydown=function(){

            var obj=cu1;

            if(event.keyCode==up){

                clearInterval(t1);

                clearInterval(t2);

                clearInterval(t3);

                clearInterval(t4);

                moveTop(obj);

            }else if(event.keyCode==down){

                clearInterval(t1);

                clearInterval(t2);

                clearInterval(t3);

                clearInterval(t4);

                moveBottom(obj);

            }else if(event.keyCode==left){

                clearInterval(t1);

                clearInterval(t2);

                clearInterval(t3);

                clearInterval(t4);

                moveLeft(obj);

            }else if(event.keyCode==right){

                clearInterval(t1);

                clearInterval(t2);

                clearInterval(t3);

                clearInterval(t4);

                moveRight(obj);

            }

        };

        /*用来产生随机位置的自由方块*/

        function newdot(){

            var dot=document.createElement('span');

            dot.className='cube';

            container.appendChild(dot);

            console.log(container.childElementCount);

            var top1=Math.floor(Math.random()*14);

            dot.style.top=''+randomdot[top1]+'px';

            var left1=Math.floor(Math.random()*14);

            dot.style.left=''+randomdot[left1]+'px';

        }

        /*当第一个方块和自由方块的位置重叠，自由方块将跟随第一个方块移动*/

        function together(){

            var container=document.querySelector('.container');

            var small=container.lastElementChild;

            if(cube.offsetLeft==small.offsetLeft&&cube.offsetTop==small.offsetTop){

                var a=n;//用a将n的某一次的值固定

                setInterval(function(){

                    /*自由方块1的位置为第一个方块倒一步的位置，自由方块2的位置为第一个方块倒两步的位置，以此内推*/

                    small.style.left=arrLeft[arrLeft.length-a]-1+'px';

                    small.style.top=arrTop[arrTop.length-a]-1+'px';

                },10);

                newdot();

                n++;

            }

        }

        T=setInterval(function(){

            together();

        },500);

    </script>

</body>

</html>

采用JavaScript编写的贪吃蛇，用了数组和定时器，坐标相关的知识，用了一下午，还是挺好玩的，就是没有写游戏结束，还有一些逻辑没有完成，永远都不会死的。。。

javascript 编写的贪吃蛇的更多相关文章

JavaScript实现的--贪吃蛇
总的实现思路: 一.效果部分: 1.编写html代码,加上样式. 二.JavaScript部分: 1.利用dom方法创建一块草坪,即活动区域: 2.创建一条蛇,并设置其初始位置: ...
JavaScript 小游戏贪吃蛇
贪吃蛇代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
JavaScript新手入门贪吃蛇
从小就在玩贪吃蛇,但是知道今天自己做了一遍才知道原理的具体的实现步骤. 刚进入界面时显示开始游戏(不重要,本人比较喜欢吹毛求疵) 中间黑色部分为游戏的主要展示部分主要步骤及源码: body中代码,红 ...
javascript实现游戏贪吃蛇
1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇 ...
原生JavaScript实现的贪吃蛇
github代码地址:https://github.com/McRayFE/snake 涉及到的知识点: 键盘事件 setInterval()定时器 javascript中数组的使用碰撞的检测 of ...
JavaScript 面向对象思想贪吃蛇游戏
js代码: 游戏的对象 ,食物,蛇 ,游戏控制思路如下 (完整代码在https://github.com/774044859yf/ObjectSnakeGame下载) var snake = { aS ...
C - 简易贪吃蛇的编写
不多废话,直接进入正题——用C编写简易贪吃蛇.附上拙劣的源码 * c-snake * 首先说明使画面动起来的原理:通过 system("cls"); 清除当前控制台的显示,再pri ...
用 Python 写个贪吃蛇，保姆级教程！
本文基于 Windows 环境开发,适合 Python 新手本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍 Python ...
JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

随机推荐

用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
《Java数据结构与算法》笔记-CH4-3用栈实现分隔符匹配
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; /** * 利 ...
在EC2上安装MEAN环境
本文在个人博客上的地址为URL,欢迎品尝. 搭建决策树项目外网DEMO尝试几个地方后,最后选择了EC2(Amazon Elastic Compute Cloud).选择的是最经济便宜的Amazon L ...
Centos6.4 coll linux 10.2
由于oracle10g太老了,只怪他娘Oracle生它生的太早了,差点就没赶上新时代(这家伙内心可也有些挺自豪的东东的,人家很有可能跟着它的主要干爹工程师为雅典奥运贡献了门票哩,生逢盛会啊!),较Ce ...
1分钟内检查Linux服务器性能的10条命令
如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在?Netflix性能工程团队的Brendan Gregg写下了这篇博文,来看他们是怎样通过十条命 ...
SSH与SSL
1. SSL SSH 即Secure Shell,它主要由三部分组成: 第一部分:连接协议 [SSH-CONNECT] 将多个加密隧道分成逻辑通道.它运行在用户认证协议上.它提供了交互式登录话路.远程 ...
c语言函数的可选性自变量
功能: 宏va_arg()用于给函数传递可变长度的参数列表. 首先,必须调用va_start() 传递有效的参数列表va_list和函数强制的第一个参数.第一个参数代表将要传递的参数的个数. 其次,调 ...
[iOS基础控件 - 6.9.2] 静态单元格 QQ功能列表
使用storyboard设计静态的表格数据 A.实现步骤 1.控制器继承UITableViewController 2.在storyboard中使用TableViewController,删除原来 ...
List、ArrayList、Vector及map、HashTable、HashMap分别的区别
一.List与ArrayList的区别 List->AbstractList->ArrayList (1) List是一个接口,ArrayList是一个实现了List接口 ...
安卓任意两个或多个Fragment之间的交互与刷新界面
平时项目中遇到一个问题:在子fragment中刷新父fragment的界面,通俗的说也就是在任何一个fragment中来刷新另一个fragment.大家都知道activity和fragment之间的交 ...

javascript 编写的贪吃蛇

javascript 编写的贪吃蛇的更多相关文章

随机推荐

热门专题