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. Python中input()和raw_input()函数的区别

    问题:在Python2.7中使用 input() 函数会出现 “NameError: Name ”***“ is not defined 的错误 解决: 使用raw_input() 函数,在Pytho ...

  2. Codeforces 892 A.Greed

    A. Greed time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  3. codevs 1743 反转卡片 rope or splay

    [codevs1743]反转卡片 题目描述 Description [dzy493941464|yywyzdzr原创] 小A将N张卡片整齐地排成一排,其中每张卡片上写了1~N的一个整数,每张卡片上的数 ...

  4. 两行代码快速创建一个iOS主流UI框架

    本框架适用于 使用 NavigationController+UITabBarController 的APP 框架QLSNavTab , GitHub地址:https://github.com/qia ...

  5. flex里InputText不能输入中文

    最近做项目都没做任何的更新,今天突然遇到在flex里的InputText无法进行中文输入,晚上查找了下资料,很多原因说是flashplayer的一个BUG. 在网上找到两种解决办法: 1.会出现这种情 ...

  6. SQL SERVER 2012 第四章 连接 JOIN の OUTER JOIN，完全连接FULL JOIN，交叉连接CROSS JOIN

    SELECT <SELECT LIST> FROM <the table you want to be the "LEFT" table> <LEFT ...

  7. P1420 最长连号

    洛谷——P1420 最长连号 题目描述 输入n个正整数,(1<=n<=10000),要求输出最长的连号的长度.(连号指从小到大连续自然数) 输入输出格式 输入格式: 第一行,一个数n; 第 ...

  8. 包装类Float中为什么有两个常量来表示最小值

    1)问:包装类Float中为什么有两个常量来表示最小值:MIN_VALUE和MIN_NORMAL ① MIN_VALUE:最小正非零值常量,是非规格化浮点数所能表示的最小值.值为 3.4E-45 的常 ...

  9. stored procedure --存储过程

    存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL语言所编写的程序.经编译后存储在数据库中.存储 ...

  10. CSS制作简单图标

    CSS制作图标包括知识点如border-width.border-style.border-color.border-radius.对元素的定位拼接.旋转等结合起来. 图标效果如下(拖动滑块可缩放图标 ...