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. 71.mybatis 如何获取插入的id【从零开始学Spring Boot】

    [从零开始学习Spirng Boot-常见异常汇总] 在之前的文章已经讲过spring boot集成mybatis了,但是忘记说一个很重要的知识点了,那就是获取获取主键id,这篇文章补充下,sprin ...

  2. 【HTML/XML 3】XML 简介，来源

    导读:在标记语言出现之前,计算机中的数据一直都是以神秘的二进制在进行处理,但是,标记语言的出现,慢慢的改变了这种认识.那么,标记语言都经过了什么样的发展呢?它又有什么用处呢? 一.追根溯源(XML的产 ...

  3. [luoguP2216] [HAOI2007]理想的正方形（二维单调队列）

    传送门 1.先弄个单调队列求出每一行的区间为n的最大值最小值. 2.然后再搞个单调队列求1所求出的结果的区间为n的最大值最小值 3.最后扫一遍就行 懒得画图,自己体会吧. ——代码 #include ...

  4. 【分块打表】bzoj 3758 数数

    [题目描述] Description 神犇最近闲来无事,于是就思考哲学,研究数字之美.在神犇看来,如果一个数的各位能够被分成两个集合,而且这两个集合里的数的和相等,那么这个数就是优美的(具体原因就只有 ...

  5. (转)详解shell中>/dev/null 2>&1到底是什么

    转 原文地址:https://blog.csdn.net/zouli415/article/details/80651526 前言 相信大家经常能在shell脚本中发现>/dev/null 2& ...

  6. msp430项目编程21

    msp430中项目---直流电机控制系统 1.定时器工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习

  7. vagrant的学习 之 Laravel

    vagrant的学习 之 Laravel 本文根据慕课网的视频教程练习,感谢慕课网! 慕课视频学习地址:https://www.imooc.com/video/14218. 慕课的参考文档地址:htt ...

  8. HDU 1028 整数拆分 HDU 2082 找单词 母函数

    生成函数(母函数) 母函数又称生成函数.定义是给出序列:a0,a1,a2,...ak,...an, 那么函数G(x)=a0+a1*x+a2*x2+....+ak*xk +...+an* xn  称为序 ...

  9. Codeforces 645D Robot Rapping Results Report【拓扑排序+二分】

    题目链接: http://codeforces.com/problemset/problem/645/D 题意: 给定n个机器人的m个能力大小关系,问你至少要前几个大小关系就可以得到所有机器人的能力顺 ...

  10. P1195 口袋的天空 洛谷

    https://www.luogu.org/problem/show?pid=1195 题目背景 小杉坐在教室里,透过口袋一样的窗户看口袋一样的天空. 有很多云飘在那里,看起来很漂亮,小杉想摘下那样美 ...