JavaScript原生贪吃蛇

原创 2018年04月15日 19:44:30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #container{
            border: 1px solid #ccc;
            border-bottom: none;
            border-right: none;
            position: relative;
        }
        ul{
            list-style: none;
        }
        ul li{
            border: 1px  solid #ccc;
            border-top: none;
            border-left: none;
            float: left;
        }
        #container div{
            float: right;
        }
        #person > div {
            position: absolute;
            background:green;
            left: 0px;
            top: 0px;
        }
        .food{
            position: absolute;
            left: 0px;
            right: 0px;
            background: red;


        }
        .personBody{
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div id="container">
    <ul id="uls"></ul>
    <button id="btn">开始游戏</button>
    <div id="box">积分:0</div>
    <div id="person">


    </div>
</div>
<script>
    var container = $id("container"),
        timer = null,
        food = null,
        uls = $id("uls"),
        btn = $id("btn"),
        box = $id("box"),
        person = $id("person"),
        index = 0,
        personDiv = $tagName(person,"div"),
        lis = $tagName(uls,"li"),
        datas = {size:20,x:20,y:20},
        perData = {speed:100,code:39};


    function init(){//初始化游戏
        createMap();
    }
    function createMap(){//创建地图
        container.style.width = (datas.size+1)*datas.x+"px";
        for(var i=0;i<datas.x*datas.y;i++){
            var oDiv = document.createElement("li");
            oDiv.style.width = oDiv.style.height=datas.size+"px";
            oDiv.index = i;
            uls.appendChild(oDiv);
        }
        start();
    }




    function start() {//点击开始游戏
        btn.onclick = function(){
            cteatePerson();
            movePerson();
            bindPerson();
            createFood();
        }
    }


    function createFood() {
        var hrr = [];
        for (var i=0;i<lis.length;i++){
            if(isFilter(lis[i])){
                hrr.push(lis[i]);
            }
        }
        function isFilter(li){
            for (var i=0; i<personDiv.length;i++){
                if( li.index == personDiv[i].index ){
                    return false;
                }
            }
            return true;
        }
        var random  = Math.floor(Math.random()*(hrr.length-1));
        food = document.createElement("div");
        food.className = "food";
        food.style.width = food.style.height = datas.size + 1 + "px";
        food.style.left = hrr[random].offsetLeft+"px";
        food.style.top = hrr[random].offsetTop+"px";




        container.appendChild(food);
    }
    function cteatePerson(){//创建人物
        var oPerson = document.createElement("div");
        oPerson.style.width = oPerson.style.height= datas.size+1+"px";
        oPerson.index = 0;
        person.appendChild(oPerson);
    }
    function Num() {//改变积分
        index +=10;
        box.innerHTML = "积分:"+index;
    }
    function isOut() {
        for(var i =0;i<lis.length;i++){
            if(pz(lis[i],personDiv[0])){
                return  false;
            }
        }
        return true;
    }
    function isSelf() {
        for (var i = 1; i<personDiv.length;i++){
            if (pz(personDiv[0],personDiv[i])){
                return true;
            }
        }
        return false;


    }
    function movePerson () {//移动
        timer = setInterval(function () {
            //检测碰撞 撞到flase  没有true
            if(isOut() || isSelf() ){
                alert("game over");
                clearInterval(timer);
            }




            if (pz(personDiv[0],food)){//吃食物
                food.className= "personBody";
                //food.removeAttribute("class");
                person.appendChild(food);
                createFood();
                Num();
            }
            for(var i =personDiv.length-1;i>0;i--){
                personDiv[i].style.left = personDiv[i-1].offsetLeft+"px";
                personDiv[i].style.top = personDiv[i-1].offsetTop+"px";
                personDiv[i].index = personDiv[i-1].index;
            }
            switch (perData.code){
                case 37:
                    personDiv[0].style.left=personDiv[0].offsetLeft-(datas.size+1)+"px";
                    personDiv[0].index -= 1;
                    break;
                case 38:
                    personDiv[0].style.top=personDiv[0].offsetTop-(datas.size+1)+"px";
                    personDiv[0].index -= datas.x;
                    break;
                case 39:
                    personDiv[0].style.left=personDiv[0].offsetLeft+(datas.size+1)+"px";
                    personDiv[0].index += 1;
                    break;
                case 40:
                    personDiv[0].style.top=personDiv[0].offsetTop+(datas.size+1)+"px";
                    personDiv[0].index += datas.x;
                    break;


            }
        },perData.speed);
    }
    function bindPerson() {
        document.onkeydown = function (e) {
            var e = window.event || e ;
            switch (e.keyCode){
                case 37:
                    perData.code = 37;
                    break;
                case 38:
                    perData.code = 38;
                    break;
                case 39:
                    perData.code = 39;
                    break;
                case 40:
                    perData.code = 40;
                    break;
            }
        }
    }
    function pz(el1,el2){


        var l1 = el1.offsetLeft;
        var r1 = el1.offsetLeft+el1.offsetWidth;
        var t1 = el1.offsetTop;
        var b1 = el1.offsetTop+el1.offsetHeight;


        var l2 = el2.offsetLeft;
        var r2 = el2.offsetLeft+el2.offsetWidth;
        var t2 = el2.offsetTop;
        var b2 = el2.offsetTop+el2.offsetHeight;


        if(  r1<=l2 ||  b1<=t2 || l1>=r2 || t1>=b2){
            return false;
        }else{
            return true;
        }
    }


    function $tagName(parend,child) {
        return parend.getElementsByTagName(child);
    }
    function $id(id){
        return document.getElementById(id);
    }
    init();


</script>
</body>
</html>

JavaScript原生实现《贪吃蛇》

JavaScript原生实现《贪吃蛇》,每吃掉一个食物,蛇的身体会变长,食物会重新换位置。...
  • findhappy117
  • findhappy117
  • 2018-02-21 08:57:35
  • 24

原生javascript开发打字游戏---代码重构版本

浏览器支持版本:IE9+ 火狐 谷歌等 上一次使用canvas制作,代码有些乱,这一次使用原生javascript制作,原理就是div动态生成,定时器刷新,div删除,div重新生成,字母消失特效 ...
  • wujimiao
  • wujimiao
  • 2017-02-19 16:17:18
  • 260

常用js原生代码段下

61、原生JavaScript解决offsetX兼容性问题 // 针对火狐不支持offsetX/Y function getOffset(e){ var target = e.target, //...
  • z10160
  • z10160
  • 2014-03-20 17:51:46
  • 631

js定时器,原生js写的时钟

原生js写的时间 0-9数字的图片 获取本地时间 拼接字符串 / / : : function...
  • qq_35313994
  • qq_35313994
  • 2016-11-14 10:18:27
  • 444

原生JavaScript实现幻灯片效果

当我们制作一个页面时,尤其是制作一个首页时,通常会设计一个可以链接到整个网站的其他主体页面的导航栏,或者一段网站的介绍文字中会包含这页面的跳转,通常情况会使用title属性为这些跳转链接添加一些解释性...
  • zm_nizhi
  • zm_nizhi
  • 2017-07-09 20:41:32
  • 135

利用Canvas+js实现贪吃蛇(4)

将贪吃蛇改造成面向对象,类似插件的东西。 过程中,要把握好this的指向,因为这个,调试了好大会 将randFood进行了修正,添加了一个配置参数与默认参数合并方法,其他的都还是一样的。 html代码...
  • u013742084
  • u013742084
  • 2016-06-25 13:54:25
  • 912

贪吃蛇的实现及其简单AI设计

 设计要求:用代码实现经典游戏贪吃蛇,要求蛇能够按用户的输入做出相应的上下左右行进动作,获取食物,记录得分;并以此为基础设计简单AI,要求该AI能够在游戏中自动寻路,并得到尽量高的分数。 ...
  • helloworld_cheng
  • helloworld_cheng
  • 2016-02-22 19:44:40
  • 4588

VB.NET 贪吃蛇 (画圆)

VB.NET 贪吃蛇小游戏效果图如下 所有代码一共300行多一点,非常简单,下面依次介绍一下1.设计思路这个游戏(1)呢,得有个地图(2),有条蛇(3),有个蛋(4),所以一共设计了4个类,然后通过...
  • wf824284257
  • wf824284257
  • 2016-12-15 19:13:12
  • 581

HTML5小游戏贪吃蛇分析与实现

HTML5小游戏贪吃蛇分析与实现。
  • liusaint1992
  • liusaint1992
  • 2016-01-13 21:28:40
  • 4383

unity3d之贪吃蛇

临时兴起,写一个贪吃蛇教程吧。 本来觉得会很好写,结果写了整整
  • feizxiang3
  • feizxiang3
  • 2014-08-09 18:07:00
  • 8637
收藏助手
不良信息举报
您举报文章:JavaScript原生贪吃蛇
举报原因:
原因补充:

(最多只允许输入30个字)