zoukankan      html  css  js  c++  java
  • 贪吃蛇 javaScript 谷歌浏览器浏览

    1.代码:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
     
    window.onload = function(){
    //alert("hello world!");
        Snakee();
    }
    Snakee = function (){ 
        var stopTag = true;
        var i = 0;var headNode = null;
        var snake = new Array(400);
        var size = 2;
        var nextIndex = 0 ;
        snake[0]=21;
        snake[1]=22;
        var tagArr = new Array(400);
        var headIndex = 0 ;
        var tailIndex = 0 ;
        var direction = 0 ;//右 
        var food = 35;
        var speed = 1000;
        var score = 0 ;
        var oTime = null;
        var gameover = false;
        function getHeadIndex(){
            headIndex = snake[size-1];
        }
        function getTailIndex(){
            tailIndex = snake[0];
        }
        function isFood(){
            if(next()==food)return true;
            else return false;
        }
        function generateFood(){
            for(i=0;i<400;i++)tagArr[i]=0;
            for(i=0;i<size;i++)tagArr[snake[i]]=1;
            var t = Math.round(Math.random()*(400-size-76)-0.5);
            var count = 0 ;
            for(i=0;i<400;i++){
                if(tagArr[i]==0&&Math.floor(i/20)!=0&&Math.floor(i/20)!=19&&Math.floor(i%20)!=0&&Math.floor(i%20)!=19){
                    if(t==count){
                        food=i;
                        //return i;
                    }
                    count++;
                }
            }
        }
        function next(){
             
            switch(direction){
                case 0:
                    nextIndex = snake[size-1]+1;
                break;
                case 1:
                    nextIndex = snake[size-1]+20;
                break;
                case 2:
                    nextIndex = snake[size-1]-1;
                break;
                case 3:
                    nextIndex = snake[size-1]-20;
                break;
            }
        }
        function eat(){
            next();
            snake[size]=nextIndex;
            size++;
            drawScore(++score);
            generateFood();
        }
        function forword(){
        //eat();
            next();
            if(nextIndex==food){
                eat();
                //alert("");
            }
            else{
                for(i=0;i<size;i++)
                {
                    snake[i]=snake[i+1];
                }
                snake[size-1]=nextIndex;
            }
        }
        function leftMove(){
            if(direction!=2&&direction!=0)direction = 2 ;
        }
        function rightMove(){
            if(direction!=2&&direction!=0)direction = 0 ;
        }
        function upMove(){
            if(direction!=3&&direction!=1)direction = 3 ;
        }
        function downMove(){
            if(direction!=3&&direction!=1)direction = 1 ;
        }
         
         
         
        function isExit(){
            next();
            var i = 0 ;
            getHeadIndex();
            var tag = false;
            for(;i<size-1;i++){
                if(headIndex==snake[i])tag=true;
            }
            if(Math.floor(nextIndex/20)<=0||Math.floor(nextIndex/20)>=19||Math.floor(nextIndex%20)<=0||Math.floor(nextIndex%20)>=19||tag)
            {
                //alert("GAVE OVER!!!");
                gameover=true;
                stopTag = true;
                document.getElementById("stopBtn").disabled=true;
                Test();
                snake[0]=21;
                snake[1]=22;
                size = 2 ;
            }
             
        }
        function stopGame(){
            stopTag = true;
        }
        function startGame(){
            stopTag = false;
        }
        function drawPanel(){
            var contentHtml = "";
            var i = 0 ;var j = 0 ;
            var colorStr="";
             
            contentHtml+="<div id='mainPanel' style='top: 10px;position:absolute ; left: 30%;200px;height:200px;'>";
            contentHtml+="<div id='tooldiv'><input id='stopBtn' type='button' value='开始' style='float:left'></input><input id='restartBtn' type='button' value='重置' style='float:left'></input><select id='speedBtn'><OPTION VALUE='1000'>初级1</OPTION><OPTION VALUE='800'>初级2</OPTION><OPTION VALUE='600'>初级3</OPTION><OPTION VALUE='400'>中级1</OPTION><OPTION VALUE='200'>中级2</OPTION><OPTION VALUE='100'>中级3</OPTION><OPTION VALUE='80'>高级1</OPTION><OPTION VALUE='50'>高级2</OPTION><OPTION VALUE='20'>高级3</OPTION></select><input id='scoreInput' readOnly='true' type='text' style='border:0px;50px' value='得分:0'></input></div>";
            contentHtml+="<div id='showPanel'>";
     
            for(;i<20;i++){
                j = 0;
                if(i==0||i==19||j==0||j==19)colorStr="black";
                else colorStr="#00ffff";
                contentHtml+= "<div id='"+(20*i+j)+"' style='position: relative ;clear:left ;float:left;8px;height:8px;background-color:"+colorStr+";margin:1px 1px 1px 1px;'></div>";
                for(j = 1;j<20;j++){
                    if(i==0||i==19||j==0||j==19)colorStr="black";
                    else colorStr="#00ffff";
                    contentHtml += "<div id='"+(20*i+j)+"' style='position: relative ;float:left;8px;height:8px;background-color:"+colorStr+";margin:1px 1px 1px 1px'></div>";
                }
            }
             
            contentHtml += "</div></div>";
            document.write(contentHtml);
         
            var stopBtn = document.getElementById("stopBtn");
            stopBtn.onclick=function(){
                if(stopBtn.value=='开始'){
                    startGame();
                    stopBtn.value = '暂停';
                }else{
                    stopGame();
                    stopBtn.value = '开始';
                }
            };
            var restartBtn = document.getElementById("restartBtn");
            restartBtn.onclick=function(){
                window.location.reload();
            };
            var speedBtn = document.getElementById("speedBtn");
            speedBtn.onchange=function(){
                speed=speedBtn.value;
                speedBtn.blur();
                window.focus();
                replay();
            }
            window.onkeypress=_onkeypress;
            window.onkeydown=_onkeydown;
        }http://www.huiyi8.com/tishiyin/
        function drawScore(score){
            document.getElementById("scoreInput").value=('得分:'+score);
        }提示音
        function drawDefaultSnake(){
            for(i=0;i<size-1;i++){
                headNode = document.getElementById(""+snake[i]);
                headNode.style.backgroundColor = "blue";
            }
            headNode = document.getElementById(""+snake[size-1]);
            headNode.style.backgroundColor = "red";
        }
        function clearSnake(){
            for(i=0;i<size;i++){
                headNode = document.getElementById(""+snake[i]);
                headNode.style.backgroundColor = "#00ffff";
            }
        }
        function drawFood(){
            headNode = document.getElementById(""+food);
            headNode.style.backgroundColor = "yellow";
        }
         
        function flashFood(){
             
             
            //alert(r+";"+g+";"+b);
            var foodTimer = null;
            if(foodTimer!=null)clearInterval(foodTimer);
            foodTimer = setInterval(function(){
                if(gameover)clearInterval(foodTimer);
                else{
                    if(!stopTag){
                        headNode = document.getElementById(""+food);
                        headNode.style.backgroundColor = "#00ffff";
                        generateFood();
                    }
                }
            },8000);
            var fTimer = null;
            if(fTimer!=null)clearInterval(fTimer);
            fTimer = setInterval(function(){
                    if(gameover)clearInterval(fTimer);
                    else{
                        if(!stopTag){
                            headNode = document.getElementById(""+food);
                            r=Math.round(Math.random()*255);
                            g=Math.round(Math.random()*255);
                            b=Math.round(Math.random()*255);
                            headNode.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
                        }
                    }
            },400);
        }
         
        function tailDraw(){
            getTailIndex();
            headNode = document.getElementById(""+tailIndex);
            headNode.style.backgroundColor = "#00ffff";
        }
        function headDraw(){
            headNode = document.getElementById(""+snake[size-2]);
            headNode.style.backgroundColor = "blue";
            getHeadIndex();
            headNode = document.getElementById(""+headIndex);
            headNode.style.backgroundColor = "red";
        }
        function reDraw(){
                    isExit();
                    tailDraw();
                    forword();
                    headDraw();
        }
        function replay(){
            if(oTime!=null)clearInterval(oTime);
            oTime=setInterval(function(){
            if(!stopTag){
                isExit();
                if(!gameover){
                    reDraw();
                    //flashFood();
                    //drawFood();
                }
            }
            },speed);
        }
        function play(){
            drawPanel();
            drawDefaultSnake();
            flashFood();
            replay();
        }
        function _onkeypress(){
             
            if(gameover)return;
            switch(event.keyCode){
                case 39:
                case 68:
                rightMove();
                break;
                case 38:
                case 87:
                upMove();
                break;
                case 37:
                case 65:
                leftMove();
                break;
                case 40:
                case 83:
                downMove();
                break;
                case 32:
                stopTag = !stopTag;
                break;
            }
        }
        function _onkeydown(){
             
            if(gameover||stopTag)return;
            switch(event.keyCode){
                case 39:
                case 68:
                rightMove();
                break;
                case 38:
                case 87:
                upMove();
                break;
                case 37:
                case 65:
                leftMove();
                break;
                case 40:
                case 83:
                downMove();
                break;
            }
            reDraw();   
        }
        play();
    }
     
     
    function Test(){
        var otTime = null;
        var headdiv = document.getElementById("head");
        if(otTime)
            {
                clearInterval(otTime);
            }
        var i = 0; var j = 0; 
        var headNode = null;
        otTime=setInterval(function(){
            if(i*20+j!=0){
                //headNode.style.backgroundColor = "#00ffff";
            }
            headNode = document.getElementById(""+(i*20+j));
            headNode.style.backgroundColor = "blue";
            if(i%2==0)j++;
            else j--;
            if(j>=20){
                j=19;
                i++;
            }
            if(j<0){
                j=0;
                i++;
            }
            if(i*20+j>=400)clearInterval(otTime);
        },10);
    }
     
     
    </script>
    </head>
    <body>
     
    </body>
    </html>

  • 相关阅读:
    vue实现简单的点击切换颜色
    Controller层注解详解
    分布式数据库系统的透明性概念
    utf8和utf8mb64的关系
    数据库设计的四个阶段
    IDEA自定义启动图
    编译过程划分
    Linux 之 CentOS 7 安装Tomcat9
    Linux 之 CentOS 7 安装JDK1.8
    Linux 之 CentOS 7安装MySQL5.7
  • 原文地址:https://www.cnblogs.com/xkzy/p/3873402.html
Copyright © 2011-2022 走看看