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%;width: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;width: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;width: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;width: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>

贪吃蛇 javaScript 谷歌浏览器浏览的更多相关文章

  1. 原生JavaScript贪吃蛇

    在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...

  2. javascript 编写的贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  4. javascript实现贪吃蛇

    <html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...

  5. JavaScript实现的--贪吃蛇

    总的实现思路: 一.效果部分:  1.编写html代码,加上样式. 二.JavaScript部分:  1.利用dom方法创建一块草坪,即活动区域:   2.创建一条蛇,并设置其初始位置:       ...

  6. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

  7. 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  8. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  9. JavaScript原生实现《贪吃蛇》

    概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...

随机推荐

  1. JavaScript验证密码强度

    JavaScript的方法: <script type="text/javascript"> window.onload = function () { documen ...

  2. CodeForces 21 A+B

                                                         Jabber ID 判断邮箱地址格式是否正确..一把心酸泪...跪11+,,看后台才过.. 注 ...

  3. 多边形之战(bzoj 2927)

    Description 多边形之战是一个双人游戏.游戏在一个有n个顶点的凸多边形上进行,这个凸多边形的n-3条对角线将多边形分成n-2个三角形,这n-3条对角线在多边形的顶点相交.三角形中的一个被染成 ...

  4. Couriers(bzoj 3524)

    Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. ...

  5. 【ZJOI2017 Round1练习】D2T1 river（二分图）

    题意: 思路:这道题并没有官方题解 没有羊驼在所有三元组中出现就是NO 现在考虑不少于1只的情况 删去其中一只,我们得到了两组点和一些边 我们只要判断这是否为一张二分图,使用暴力染色的方法就有60分了 ...

  6. hdu 5200 Trees [ 排序 离线 2指针 ]

    传送门 Trees  Accepts: 156  Submissions: 533  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 655 ...

  7. 【Java源码】集合类-ArrayDeque

    一.类继承关系 ArrayDeque和LinkedList一样都实现了双端队列Deque接口,但它们内部的数据结构和使用方法却不一样.根据该类的源码注释翻译可知: ArrayDeque实现了Deque ...

  8. 动态规划：Monkey and Banana

    Problem Description A group of researchers are designing an experiment to test the IQ of a monkey. T ...

  9. 洛谷—— P3372 【模板】线段树 1

    P3372 [模板]线段树 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别 ...

  10. codeforces 875F（基环外向树）

    题意 有一个左边m个点,右边n个点的二分图(n,m<=1e5),左边每个点向右边恰好连两条权值相同的边. 求这个二分图的最优匹配 分析 对于这种二选一问题,即左边的a连向右边的b和c,权值为d, ...