贪食蛇-JS小游戏

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>贪食蛇</title>
    <style>
        body{ font: 12px/25px "宋体";}
        #snake{ width: 500px; height: 500px; border: 2px #333 solid; background: green; position: relative; float: left;}
        .u_bd strong{ font:30px/18px "Georgia"; color: #ff3300;}
        .food{ width: 10px;height: 10px; background: red; position: absolute;z-index: 99;}
        .node{ width: 10px;height: 10px; background: white; position: absolute;}
        .fl{ float: left; width: 400px;}
        .games{ overflow: hidden; width: 500px;}
        .u_bd{ list-style-type: none; margin: 0;}
        h1,h2{ margin: 0;padding: 0; font-size: 14px;text-align: center;}
        .u_bd li{ float: left; margin-right: 10px; height: 30px; line-height: 30px;}
        input[type='button']{ border: none; background: #006699;color: #ffffff;}
    </style>
</head>
<body>
<div class="fl">
    <h1>贪吃蛇</h1>
    <ul>
        <li>操作键为键盘←↑→↓；没支持ASWD键，按了也没用哦。</li>
        <li>开始按钮开始暂停按钮暂停，重新开始就刷页面吧。</li>
        <li>怎么？Game Over了？那就刷新页面重新开始吧！</li>
        <li>分4个级别的速度：100分，200分，300分，400分以上</li>
        <li>长按方向键能起到加速的作用</li>
        <li>最后注明：没有做食物不能出现在蛇身体的判断，我觉得出现在蛇身体上也正常啊。</li>
    </ul>
</div>
<div class="games">
    <ul class="u_bd">
        <li>得分：<strong id="points">100</strong>分</li>
        <li><input type="button" value="开始游戏" id="star" /></li>
        <li><input type="button" value="暂停游戏" id="stop" /></li>
        <li>速度：<strong id="speed">500</strong></li>
    </ul>
</div>
<div id="snake">
</div>
<script type="text/javascript"> 
    var wyf={
        byID:function(id){
            if(typeof id !="string"){
                return id;
            }
            else{
                return document.getElementById(id);
            }
        },
        byClass:function(oclass,oparent){
            var element=(oparent||document).getElementsByTagName("*");
            var result=[];
            for(var i=0,lenght=element.length;i<lenght;i++)
            {
                if(element[i].className==oclass)
                {
                    result.push(element[i]);
                }
            }
            return result;
        },
        //事件绑定
        addHandler:function(element,type,fn){
            if(element.addEventListener)
            {
                element.addEventListener(type,fn,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,fn);
            }else{
                element["on"+type]=fn;
            }
        },
        //兼容event
        getEvent:function(event){
            return event ? event : window.event;
        },
        //当前指向目标（兼容）
        getTarget:function(event){
            return event.target||event.srcElement;
        },
        random:function(min,max){
            var rmax=max-min;
            return Math.floor(Math.random()*rmax+min);
        },
        //赋dom坐标
        domLeftTop:function(dom,colNum,rowNum){
            dom.style.left=colNum*10+"px";
            dom.style.top=rowNum*10+"px";
        },
        //画蛇的节点
        drowNode:function(box,node,type){
            var temp=document.createElement("div");
            temp.className=type;
            this.domLeftTop(temp,node.getCol(),node.getRow());
            if(type=="food")
            {
                temp.setAttribute("row",node.getRow());
                temp.setAttribute("col",node.getCol());
            }
            box.appendChild(temp);
        },
        //画蛇
        drowSnake:function(snake,box){
            var oldnode=this.byClass("node",box);
            if(oldnode.length>0)
            {
                for(var i=0,len=oldnode.length;i<len;i++)
                {
                    box.removeChild(oldnode[i]);
                }
            }
            var newnode=snake.getHead();
            do{
                this.drowNode(box,newnode,"node");
                newnode=newnode.getNextNode();
            }while(newnode!=null)
        },
        //创建食物
        createFood:function(box){
            var food=this.byClass("food",box);
            if(food.length>0)
            {
                for(var i=0,len=food.length;i<len;i++)
                {
                    box.removeChild(food[i]);
                }
            }
            var row=this.random(0,49),col=this.random(0,49);
            var node=new Node(row,col);
            this.drowNode(box,node,"food");
        },
        //初始化
        init:function(box){
            this.createFood(box);
            var snake=new Snake();
            for(var i=5;i>0;i--)
            {
                var node=new Node(i-1,0);
                snake.addNode(node);
            }
            this.drowSnake(snake,box);
            this.showPoints(snake,this.byID("points"));
            return snake;
        },
        //得分
        showPoints:function(snake,box){
            var len=snake.length()-5;
            box.innerHTML=len*10;
        },
        //移动
        move:function(snake,food){
            if(snake.getStatus()=="dead"){
                alert("Game Over");
                clearInterval(time);
                time=null;
            }
            //判方向有效性
            while(snake.getOperate().length!=0)
            {
                //取操作队列的第一个
                var op=snake.getOperate().shift();
                if(op!=snake.getDirection()){
                    var dir=snake.getDirection();
                    if(op=="up"&&dir=="down"){continue;}
                    if(op=="down"&&dir=="up"){continue;}
                    if(op=="left"&&dir=="right"){continue;}
                    if(op=="right"&&dir=="left"){continue;}
                    snake.setDirection(op);
                    break;
                }
            }
            var row=0;
            var col=0;
            switch(snake.getDirection())
            {
                case "up":row--;
                    break;
                case "down":row++;
                    break;
                case "left":col--;
                    break;
                case "right":col++;
                    break;
            }
            var head=snake.getHead();
            if(food.length>0)
            {
                if((head.getRow()+row)==food[0].getAttribute("row")&&(head.getCol()+col)==food[0].getAttribute("col"))
                {
                    var headnode=new Node(head.getRow()+row,head.getCol()+col);
                    snake.eat(headnode);
                    this.createFood(this.byID("snake"));
                    this.showPoints(snake,this.byID("points"));
                    snake.setSpeed();
                }
                else{
                    var node=snake.getEnd();
                    do{
                        if(node.getPrevNode()==null)
                        {
                            break;
                        }
                        node.setRow(node.getPrevNode().getRow());
                        node.setCol(node.getPrevNode().getCol());
                        node=node.getPrevNode();
                    }while(node!=null);
                    head.setRow(head.getRow()+row);
                    head.setCol(head.getCol()+col);
                }
                var headrow=head.getRow();
                var headcol=head.getCol();
                if(headrow>49||headrow<0||headcol>49||headcol<0)
                {
                    snake.setStatus("dead");
                    return;
                }
                var temp=head.getNextNode().getNextNode();
                do{
                    if(temp.getRow()==headrow&&temp.getCol()==headcol)
                    {
                        snake.setStatus("dead");
                        return;
                    }
                    temp=temp.getNextNode();
                }while(temp!=null);
                this.drowSnake(snake,this.byID("snake"));
            }
        }
    };
    //蛇对象
    function Snake(){
        this.direction = "down";
        this.operate = [];
        this.head = null;
        this.end = null;
        this.status = "live";
        this.speed=500;
    }
    Snake.prototype={
        //状态操作
        getStatus:function(){
            return this.status;
        },
        setStatus:function(state){
            this.status=state;
        },
        //当前运动方向
        getDirection:function(){
            return this.direction;
        },
        setDirection:function(dir){
            this.direction=dir;
        },
        //用户操作方向
        getOperate:function(){
            return this.operate;
        },
        addOperate:function(ops){
            this.operate.push(ops);
        },
        //头尾节点操作
        getHead:function(){
            return this.head;
        },
        setHead:function(node){
            this.head=node;
        },
        getEnd:function(){
            return this.end;
        },
        setEnd:function(node){
            this.end=node;
        },
        //添加节点
        addNode:function(node){
            if(this.head==null)
            {
                this.head=node;
            }else{
                node.setPrevNode(this.end);
                this.end.setNextNode(node);
            }
            this.end=node;
        },
        //蛇长度
        length:function(){
            var len=1;
            var node=this.head.getNextNode();
            while(node!=null)
            {
                len++;
                node=node.getNextNode();
            }
            return len;
        },
        //吃东西
        eat:function(node){
            node.setNextNode(this.head);
            this.head.setPrevNode(node);
            this.head=node;
        },
        //移动速度
        setSpeed:function(){
            if(arguments[0])
            {
                this.speed=arguments[0];
            }else{
                var len=this.length()-5;
                if(len>0)
                {
                    switch(true)
                    {
                        case len<10:this.speed=500;
                            break;
                        case len>=10&&len<20:this.speed=400;
                            break;
                        case len>=20&&len<30:this.speed=300;
                            break;
                        case len>=30&&len<40:this.speed=200;
                            break;
                        default:this.speed=100;
                                break;
                    }
                }else{
                    this.speed=500;
                }
            }
        },
        getSpeed:function(){
            return this.speed;
        }
    };
    //组成蛇的节点对象
    function Node(rowNum,colNum){
        //当前节点所必须的属性
        this.row = rowNum;
        this.col = colNum;
 
        this.prevNode = null;
        this.nextNode = null;
    }
    Node.prototype={
        //行操作
        getRow:function(){
            return this.row;
        },
        setRow:function(rowNum){
            this.row=rowNum;
        },
        //列操作
        getCol:function(){
            return this.col;
        },
        setCol:function(colNum){
            this.col=colNum;
        },
        //下个节点操作和上个节点操作
        getNextNode:function(){
            return this.nextNode;
        },
        getPrevNode:function(){
            return this.prevNode;
        },
        setNextNode:function(node)
        {
            this.nextNode=node;
        },
        setPrevNode:function(node){
            this.prevNode=node;
        },
        //判断是不是头或者尾
        isHead:function(){
            return this.prevNode==null?true:false;
        },
        isEnd:function(){
            return this.nextNode==null?true:false;
        }
    };
    wyf.addHandler(window,"load",function(){
        var box=wyf.byID("snake");
        var snake=wyf.init(box);
        window.time=null;
        wyf.addHandler(document,"click",function(e){
            var e=wyf.getEvent(e);
            var target=wyf.getTarget(e);
            switch(target.id)
            {
                case "star":gameStar();
                    break;
                case "stop":gameStop();
                    break;
            }
        });
        function gameStop(){
            if(time)
            {
                clearInterval(time);
                time=null;
            }
        }
        function gameStar(){
            if(!time)
            {
                time=setInterval(function(){
                    wyf.move(snake,wyf.byClass("food",box))
                },snake.getSpeed());
            }
        }
        wyf.addHandler(document,"keydown",function(e){
            if(time)
            {
                var op="";
                var event=wyf.getEvent(e);
                switch(event.keyCode)
                {
                    case 37:op="left";
                        break;
                    case 38:op="up";
                        break;
                    case 39:op="right";
                        break;
                    case 40:op="down";
                        break;
                }
                if(op!="")
                {
                    snake.addOperate(op);
                    quickSpeed(true);
                }
            }
        });
        wyf.addHandler(document,"keyup",function(e){
            if(time)
            {
                var eventkey=wyf.getEvent(e).keyCode;
                if(eventkey==37||eventkey==38||eventkey==39||eventkey==40)
                {
                    quickSpeed(false);
                }
            }
        });
        function quickSpeed(clicking){
            var speed=snake.getSpeed();
            if(clicking)
            {
                snake.setSpeed(100);
                console.log(snake.getSpeed());
            }else{
                snake.setSpeed();
                console.log(snake.getSpeed());
            }
            wyf.byID("speed").innerHTML=snake.getSpeed();
            if(speed!=snake.getSpeed())
            {
                gameStop();
                gameStar();
            }
        }
    });
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

贪食蛇-JS小游戏

分类

游戏

描述

贪食蛇-JS小游戏，操作键为键盘←↑→↓；没支持ASWD键，按了也没用哦。&<br/> 　　开始按钮开始暂停按钮暂停，重新开始就刷页面吧。&<br/> 　　怎么？GameOver了？那就刷新页面重新开始吧！&<br/> 　　分4个级别的速...