频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
javaScript小项目------贪食蛇
2016-09-03 09:15:27         来源:dexing07的博客  
收藏   我要投稿
<meta charset="utf-8" />
<style type="text/css">
*{
    margin: 0;
    padding:0;
}
    .content{
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: #212121;
    }
    .colo{
        width: 48px;
        height: 48px;
        background-color: #E6E6E6;
        border: 1px solid #466F85;
        float: left;
    }
    .head{
        /*background-color: #49DF85;*/
        background-image: url(./img/22.jpg);
        border-radius: 10px;
        background-size: 100%;
        position: absolute;
        height: 48px;
        width: 48px;
    }
     .fruit{
        /*background-color: #49DF85;*/
        background-image: url(./img/fruit.jpg);
        background-size: 100%;
        position: absolute;
        height: 48px;
        width: 48px;
    }
    .score{
        font-family: &#39;黑体&#39;;
        left:600px;
        position: absolute;
        height: 50px;
        width: 200px;
        background-color: #212121;
        color: #FFF;
    }
    .newbody{
        position: absolute;
        width: 48px;
        height: 48px;
        background-image: url(./img/33.jpg);
        background-size: 100%;
    }
    .btn{
        font-family: &#39;黑体&#39;;
        left:600px;
        top: 100px;
        position: absolute;
        height: 50px;
        width: 100px;
        background-color: #1193FF;
        color: #FFF;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        cursor: pointer;
        border-radius: 15px;
    }</style>
<p class="content" id="content">&nbsp;</p>
<p class="btn" id="stop">停止游戏</p>
<p class="btn" id="start">开启游戏</p>
<p class="btn" id="gameWay">游戏状态:</p>
<p class="score" id="score">分数:
<p>&nbsp;</p>
</p>
<script type="text/javascript" >
//添加状态
var stop=document.getElementById(&#39;stop&#39;);
var start=document.getElementById("start");
var gameWay=document.getElementById(&#39;gameWay&#39;);
start.onclick=function(){
    head.value=&#39;2&#39;;
    incident=setInterval(move,200);
}
stop.onclick=function(){
    clearInterval(incident);
}
//
 
 
var content=document.getElementById("content");
    for(var i=0;i<100;i++){
        var p=document.createElement("p");
        p.className="colo";
        content.appendChild(p);
    }
var scoreId=document.getElementById("score");
var scoreNum=0;
var scoreCon=document.createElement("p");
// var scoreText=document.createTextNode(scoreNum);
// scoreCon.appendChild(scoreText);
scoreId.appendChild(scoreCon);
 
var head=null;  //保存蛇头
var fruit=null;  //保存果实
var dir=null;     //保存蛇的方向
var body=new Array();  //保存蛇身体增加的部分
var bodyNum=0;   //记录创建了多少个body
//随机创建head和fruit到content里面
 
function createType(type){
        if(type==1){
            //创建随机数
            var row = parseInt(Math.random() * 6 +2);
            var col = parseInt(Math.random() * 6 +2);
            head=document.createElement("p");
            head.className="head";      
            head.style.top=row*50+"px";
            head.style.left=col*50+"px";
            content.appendChild(head);
            // head.style.top=;
            // head.style.left=;
        }
        if(type==2){
            //创建随机数
            var row = parseInt(Math.random() * 6 +2);
            var col = parseInt(Math.random() * 6 +2);
            fruit=document.createElement("p");
            fruit.className="fruit";    
            fruit.style.width="50";
            fruit.style.height="50";
            fruit.style.backgroundColor="#EA2000";
            fruit.style.top=row*50+"px";
            fruit.style.left=col*50+"px";
            content.appendChild(fruit);
        }
    }
//调用创建的道具方法
createType(1);
createType(2);
//蛇头移动函数
var direction=new Array;  //存每个新建Body的方向
//转换数
var numss=0;
 
//自动滑动事件
function move(){
    if(head.value!=""){
            switch(head.value){
            case &#39;1&#39;:
                head.style.top=head.offsetTop-50+"px";
            break;
            case &#39;2&#39;:
                head.style.top=head.offsetTop+50+"px";
            break;
            case &#39;3&#39;:
                head.style.left=head.offsetLeft-50+"px";
            break;
            case &#39;4&#39;:
                head.style.left=head.offsetLeft+50+"px";
            break;
            }
    }
    console.log(head.offsetTop);
    if(head.offsetTop>500){
            alert("超出边界!请重新游戏"); 
    }
    // if(head==null){
    //  if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){
 //       alert("超出边界!请重新游戏"); 
 //     }
 
    if(body.length!=0){
        for(var i=body.length-1;i>=0;i--){
            if(i==0){
                body[0].value=head.value;
            }else{
                body[i].value=body[i-1].value;
            }
        }
    }
    //转换方向
 
    //如果成功吃掉果实后事件
    if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){
            var row = parseInt(Math.random() * 6 +2);
            var col = parseInt(Math.random() * 6 +2);
            fruit.style.top=row*50+"px";
            fruit.style.left=col*50+"px";
            //记录分数
            scoreNum=scoreNum+1;
            document.getElementsByTagName(&#39;p&#39;)[0].innerText="";
            document.getElementsByTagName(&#39;p&#39;)[0].innerText=scoreNum;
 
            //创建body部分
            bodyAdd(head.style.top,head.style.left,head.value);
    }
    //控制body跟随head运动部分
 
          //有身体的时候要动态改变body的值
        if(body.length>0){
            var body01=document.getElementById(&#39;body01&#39;);
            body01.style.top=head.offsetTop+"px";
            body01.style.left=head.offsetLeft+"px";
                switch(head.value){
                case &#39;1&#39;:
                    body01.style.top=head.offsetTop+50+"px";
                    body01.style.left=head.offsetLeft+"px";
                break;
                case &#39;2&#39;:
                    body01.style.top=head.offsetTop-50+"px";
                    body01.style.left=head.offsetLeft+"px";
                break;
                case &#39;3&#39;:
                    body01.style.left=head.offsetLeft+50+"px";
                    body01.style.top=head.offsetTop+"px";
                break;
                case &#39;4&#39;:
                    body01.style.left=head.offsetLeft-50+"px";
                    body01.style.top=head.offsetTop+"px";
                break;
            }
 
        }
        if(body.length>1){
            body[bodyNum-1].value=body[bodyNum-2].value;
            for(var i=1;i<body.length;i++){
                var nu=i+1;
                var bodyId=document.getElementById(&#39;body0&#39;+nu);
                var body_Id=document.getElementById(&#39;body0&#39;+i);
                bodyId.style.top=body_Id.offsetTop+"px";
                bodyId.style.left=body_Id.offsetLeft+"px";
                switch(body[bodyNum-(body.length-i)].value){
                    case &#39;1&#39;:
                        bodyId.style.top=body_Id.offsetTop+50+"px";
                        bodyId.style.left=body_Id.offsetLeft+"px";
                    break;
                    case &#39;2&#39;:
                        bodyId.style.top=body_Id.offsetTop-50+"px";
                        bodyId.style.left=body_Id.offsetLeft+"px";
                    break;
                    case &#39;3&#39;:
                        bodyId.style.left=body_Id.offsetLeft+50+"px";
                        bodyId.style.top=body_Id.offsetTop+"px";
                    break;
                    case &#39;4&#39;:
                        bodyId.style.left=body_Id.offsetLeft-50+"px";
                        bodyId.style.top=body_Id.offsetTop+"px";
                    break;
            }
        }
     }
}
 
 
 
 
 
//创建按钮时间
document.onkeydown=function(){
    var code=event.keyCode;
    switch (code){
        //向上
        case 38:
            head.value=&#39;1&#39;;
        break;
        //向下
        case 40:
            head.value=&#39;2&#39;;
        break;
        //向左
        case 37:
            head.value=&#39;3&#39;;
        break;
        //向右
        case 39:
            head.value=&#39;4&#39;;
        break;
        console.log(head.value);
    }
}
//身体增加事件
function bodyAdd(top,left,dir){
    if(dir!=""){
        dir=dir;
    }
    else{
        dir=head.value;
    }
    //首次创建body
    if(bodyNum==0){
        var newbody=document.createElement(&#39;p&#39;);
        newbody.className="newbody";
        newbody.id="body01";
          switch (dir){
            case &#39;1&#39;:
                newbody.style.top=head.offsetTop-50+&#39;px&#39;;
                newbody.style.left=head.offsetLeft+"px";
            break;
            case &#39;2&#39;:
                newbody.style.top=head.offsetTop+50+&#39;px&#39;;
                newbody.style.left=head.offsetLeft+"px";
            break;
            case &#39;3&#39;:
                newbody.style.left=head.offsetLeft-50+&#39;px&#39;;
                newbody.style.top=head.offsetTop+"px";
            break;
            case &#39;4&#39;:
                newbody.style.left=head.offsetLeft+50+&#39;px&#39;;
                newbody.style.top=head.offsetTop+"px";
            break;
          }
        content.appendChild(newbody);
        bodyNum=bodyNum+1;
        body.push(newbody);
 
    }else{                  
        //第二次及多次创建
        var newbody=document.createElement(&#39;p&#39;);
        newbody.className="newbody";
        newbody.id="body0"+(body.length+1);
                switch (dir){
                case &#39;1&#39;:
                    newbody.style.top=body[body.length-1].offsetTop-50+&#39;px&#39;;
                    newbody.style.left=body[body.length-1].offsetLeft+"px";
                break;
                case &#39;2&#39;:
                    newbody.style.top=body[body.length-1].offsetTop+50+&#39;px&#39;;
                    newbody.style.left=body[body.length-1].offsetLeft+"px";
                break;
                case &#39;3&#39;:
                    newbody.style.left=body[body.length-1].offsetLeft-50+&#39;px&#39;;
                    newbody.style.top=body[body.length-1].offsetTop+"px";
                break;
                case &#39;4&#39;:
                    newbody.style.left=body[body.length-1].offsetLeft+50+&#39;px&#39;;
                    newbody.style.top=body[body.length-1].offsetTop+"px";
                break;
        }
        content.appendChild(newbody);
        bodyNum=bodyNum+1;
        body.push(newbody);
 
    }
    // body.push(content);
}
//超出边界,重置信息事件
function initialize(){
        //重置果实
        var row = parseInt(Math.random() * 6 +2);
        var col = parseInt(Math.random() * 6 +2);
        fruit.style.top=row*50+"px";
        fruit.style.left=col*50+"px";
        //记录分数
        document.getElementsByTagName(&#39;p&#39;)[0].innerText="";
        //重置贪食蛇
 
 
}
var incident;
incident=setInterval(move,200);
//附加操作
// var btn=document.getElementById(&#39;btn&#39;);
// btn.onclick=function(){
//  clearInterval(incident);
// }
 
//
 
</script>

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 项目
上一篇:JavaScript学习笔记---数据类型
下一篇:Jstl自定义标签及其生命周期、属性标签、及其读取文本练习、JspFragment输出标签体(2)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站