网页版贪吃蛇

最新推荐文章于 2024-09-10 16:01:03 发布
最新推荐文章于 2024-09-10 16:01:03 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： html 游戏 js 贪吃蛇 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruanjiayou/article/details/45934013
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="阮家友">
    <meta name="Keywords" content="游戏,贪吃蛇">
<title>贪吃蛇1.7</title>
<style type="text/css">
* {
    margin:0;
    }
li {
    list-style:none;
    padding:0;
    }
img {
    border:none;
}
.clear {
    clear:both;
}
#center {
    width:800px;
    margin:0 auto;
    }
#menu {
    position:absolute;
    top:20px;
    left:40px;
    width:80px;
}
#show ,#time,#score {
    width:80px;
    float:left;
}
#field {
    border:1px solid #ccc;
    margin-top:10px;
    float:left;
    background-color:rgb(255,255,255);
}
.cell {
    width:18px;
    height:18px;
    float:left;
    border:1px solid #ccc;
    background-color:grb(255,255,255);
}
.food {
    background-color:grb(200,0,0);
}
.body {
    background-color:grb(10,231,137);
}
.barrier {
    background-color:rgb(0,0,0);
}
#background {
    position:absolute;
    left:40px;
    top:250px;
    width:182px;
}
#setting {
    height:30px
    width:40px;
}
#rgb {
    width:180px;
    height:auto;
    padding:10px 0;
    border:1px dashed #555;
    background-color:rgb(255,255,255);
}
#red,#green,#blue {
    width:30px;
    height:250px;
    float:left;
    margin-left:8px;
    position:relative;
    border:1px solid #CCC;
}
#diamond1,#diamond2,#diamond3 {
    width:30px;
    height:30px;
    position:absolute;
}
#diamond1 {
    background-color:#c00;
}
#diamond2 {
    background-color:#0c0;
}
#diamond3 {
    background-color:#00c;
}
#rankBack {
    display:none;
    width:50px;
    margin-left:50px;
}
</style>
</head>
<body>
    <div id="menu">
        <div id="show">show</div>
        <div id="time">time</div>
        <div id="score">score</div>
        <div id="degree">
            <button id="rankSet">等级</button>
            <div id="rankBack">
                <button id="rank1">简单</button>
                <button id="rank2">一般</button>
                <button id="rank3">困难</button>
            </div>
        </div>
        <button id="btn">开始</button>
        <div id="background">
            <button id="setting">背景</button>
            <div id="rgb">
                <div id="red"><div id="diamond1"></div></div>
                <div id="green"><div id="diamond2"></div></div>
                <div id="blue"><div id="diamond3"></div></div>
                <div class="clear"><!--none--></div>
            </div>
        </div>
    </div>
    <div id="center">
        <div id="field"></div>
    </div>
</body>
<script type="text/javascript">
console.log("作者：阮家友 QQ：1439120442");
function css(obj,attri,ova){
        switch(arguments.length)
        {
            case 2:
                if(obj.currentStyle)
                {
                    return obj.currentStyle[attri];
                }
                else
                {
                    return getComputedStyle(obj, false)[attri];
                }
            break;
            case 3:
                obj.style[attri]=ova;
            break;
            default:break;
        }
       
    }
function attr(obj,attr,value){
    switch(arguments.length)
    {
        case 2:
            return obj.getAttribute(attr);
        break;
        case 3:
            obj.attr=value;
        break;
        default:break;
    }
}
function myadd(obj,oevt,fn){
    if(obj.attatchEvent)
        obj.attatchEvent('on'+oevt,fn);
    else
        obj.addEventListener(oevt,fn,false);
}
function obj(id,tag){
    if(arguments.length==2)
    {
        var NewTags=[];
        var OldTags=id.getElementsByTagName(tag);
        var i;
        for(i=0;i<OldTags.length;i++)
        {
            NewTags.push(OldTags[i]);
        }
        return NewTags;
    }
    else
        return document.getElementById(id);
}
function rad(obj){
    var L = obj.length;
    var n = false ;
    while(n===false)
    {
        n = Math.random();
        n = Math.ceil(n*L)-1;
        if(obj[n].attr=='default')
        {
            obj[n].attr = 'food';
            css(obj[n],abgc,aColorFood);
            n=true;
        }
        else
            n=false;
    }
    delete n;
    delete L;
}
document.onkeydown = function(oevt){
    var sevt = oevt||window.event;
    //37 ----- 左
    //38 ----- 上
    //39 ----- 右
    //40 ----- 下
    //116 ---- F5
    if(ctr==false)
    {
        switch(sevt.keyCode)
        {
            case 37:
            if(snack[0]!=1)
                snack[0]=-1;
            break;
            case 39:
            if(snack[0]!=-1)
                snack[0]=1;
            break;
            case 40:
            if(snack[0]!=-M)
                snack[0]=M;
            break;
            case 38:
            if(snack[0]!=M)
                snack[0]=-M;
            break;
            default:break;
        };
        ctr = true;
        if(sevt.keyCode!=116)
            return false;
    }
}
function move(){
    if((snack[0]+snack[1])%M==1&&snack[0]==1)
    {
        alert('你输了！');
        location.reload();
    };
    if((snack[0]+snack[1])%M==0&&snack[0]==-1)
    {
        alert('你输了！');
        location.reload();
    };
    if(snack[1]<=M&&snack[0]==-M)
    {
        alert('你输了！');
        location.reload();
    };
    if(snack[1]>=(N-1)*M&&snack[0]==M)
    {
        alert('你输了！');
        location.reload();
    };
   
    var next = odivs[(snack[0]+snack[1]-1)];
    switch(next.attr){
        case 'food':
            snack.push(snack[snack.length-1]);
            //头部伸长
            attr(next,'attr','body');
            css(next,'className','body');
            rad(odivs);
            score++;
            oscore.innerHTML = score + '分';
            go();
        break;
        case 'default':
            //尾部还原
            css(odivs[snack[snack.length-1]-1],abgc,aColorCell);
            css(odivs[snack[snack.length-1]-1],'attr','default');
            go();
        break;
        case 'body':
            alert('你输了1！');
            location.reload();
        break;
        case 'barrier':
            alert('你输了2！');
            location.reload();
        break;
        default:break;
    }
}
function go(){
    //尾部还原
    css(odivs[snack[snack.length-1]-1],abgc,aColorCell);
    attr(odivs[snack[snack.length-1]-1],'attr','default');
    //向前运动
    for(var i=snack.length-1;i>1;i--)
    {
        snack[i]=snack[i-1];
        attr(snack[i],'attr','body');
        odivs[snack[i]-1].style.backgroundColor = aColorBody;
    };
    //头部伸长
    snack[1]+=snack[0];
    css(odivs[snack[1]-1],abgc,aColorBody);
    attr(odivs[snack[1]-1],'attr','body');
   
    //允许键盘事件
    ctr = false;
}
function fTime(){
    var oDate = new Date();
    var iRemain = (oDate.getTime() - oDate0.getTime())/1000;
    var iHour=parseInt(iRemain/3600);
        iRemain%=3600;
       
    var iMin=parseInt(iRemain/60);
        iRemain%=60;
       
    var iSec=parseInt(iRemain);
    otime.innerHTML = iHour+'时'+iMin+'分'+iSec+'秒';
}
//--------------scroll---------------
function wheelNew(oEvent)//obj1:父容器；obj2：子容器
{
    var obj1 = this;
    var obj2 = this.getElementsByTagName('div')[0];
    var H = obj1.offsetHeight - obj2.offsetHeight;
    var bDown=true;
    bDown = oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
    if(bDown)
    {
        if(obj2.offsetTop<obj1.offsetHeight-obj2.offsetHeight)
        obj2.style.top=obj2.offsetTop+10+'px';
        else
            obj2.offsetTop=obj1.offsetHeight-obj2.offsetHeight-obj1.offsetTop;
    }
    else
    {
        if(obj2.offsetTop>0)
            obj2.style.top = obj2.offsetTop-10+'px';
    }
    if(oEvent.preventDefault)
        oEvent.preventDefault();
    //alert(obj1.color);
    switch(obj1.color)
    {
        case 'red':
            cRed = 255 - (255*obj2.offsetTop/H).toFixed(0);
            css(obody,abgc,'rgb('+cRed+','+cGreen+','+cBlue+')');
        break;
        case 'green':
            cGreen = 255 - (255*obj2.offsetTop/H).toFixed(0);
            css(obody,abgc,'rgb('+cRed+','+cGreen+','+cBlue+')');
        break;
        case 'blue':
            cBlue = 255 - (255*obj2.offsetTop/H).toFixed(0);
            css(obody,abgc,'rgb('+cRed+','+cGreen+','+cBlue+')');
        break;
        default :break;
    }
    return false;
}
function Drag(sEvt){
    sEvt = window.event||sEvt;
    //alert(this);
    var oC =this;
    var oP = oC.parentElement;
    //alert(oP);
    var H = oP.offsetHeight - oC.offsetHeight;
    var oscroll=document.documentElement.scrollTop||document.body.scrollTop;
    //y0为鼠标按下时距离obar顶部的距离
    var y0= sEvt.clientY-oC.offsetTop-oscroll;
    document.onmousemove = function(sEvt2){
        sEvt2 = document.event||sEvt2;
        var y=sEvt2.clientY;
        if(y-y0>=oscroll&&y-y0<=H+oscroll)
            oC.style.top = y - y0 - oscroll + 'px';
        else
            {
                if(y-y0<oscroll)
                    oC.style.top=0;
                else
                    oC.style.top=H+'px';
            }
        switch(oP.color)
        {
            case 'red':
                cRed = 255 - (255*oC.offsetTop/H).toFixed(0);
            break;
            case 'green':
                cGreen = 255 - (255*oC.offsetTop/H).toFixed(0);
            break;
            case 'blue':
                cBlue = 255 - (255*oC.offsetTop/H).toFixed(0);
            break;
            default :break;   
        }
        css(obody,'backgroundColor','rgb'+'('+cRed+','+cGreen+','+cBlue+')');
    }
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }

}
function barrier(num){
    var oba = true;
    for(var i=0;i<num;i++)
    {
        oba = true
        while (oba)
        {
            oba = Math.ceil((odivs.length)*Math.random());
            if(odivs[oba-1].attr =='default')
                {
                    odivs[oba-1].attr = 'barrier';
                    css(odivs[oba-1],abgc,'rgb(0,0,0)');
                    oba = false;
                }
            else
                oba = true;
        };
    };
    delete oba;
}
var obody = document.getElementsByTagName('body')[0];
var N = 20;
var M = 20;
var score = 0;//保存分数
var t0 = 300;//保存时间
var ctr = true;
var snack = [1];//蛇身数组
var oField = obj('field');
oField.style.width = M*20+'px';
var odivs = [];
var oshow = obj('show');
var oscore = obj('score');
var otime = obj('time');
var obtn = obj('btn');
var oDate0 = new Date();
var odegree = obj('degree');
//-------------scroll-----------
var obackground = obj('background');
var osetting = obj('setting');
var orgb = obj('rgb');
orgb.style.display='block';
var obar1 = obj('red');
var obar2 = obj('green');
var obar3 = obj('blue');
var ohold1 = obj('diamond1');
var ohold2 = obj('diamond2');
var ohold3 = obj('diamond3');
var cRed = 255;
var cGreen = 255;
var cBlue = 255;
//attr(obar1,'color','red');attr 比不上obj.color 啊
obar1.color = 'red';
obar2.color = 'green';
obar3.color = 'blue';
myadd(obar1,'mousewheel',wheelNew);
myadd(obar2,'mousewheel',wheelNew);
myadd(obar3,'mousewheel',wheelNew);
myadd(obar1,'DOMMouseScroll',wheelNew);
myadd(obar2,'DOMMouseScroll',wheelNew);
myadd(obar3,'DOMMouseScroll',wheelNew);
myadd(ohold1,'mousedown',Drag);
myadd(ohold2,'mousedown',Drag);
myadd(ohold3,'mousedown',Drag);
osetting.onclick = function(){
    if(orgb.style.display=='block')
        css(orgb,'display','none');
    else
        css(orgb,'display','block');
}
var orankSet = obj('rankSet');
var orankBack = obj('rankBack');
var odegree = obj(orankBack,'button');
var olock=false;
var num =0;
orankSet.onclick = function(){
    if(orankBack.style.display=='block')
        orankBack.style.display = 'none';
    else
        orankBack.style.display = 'block';
}
odegree[0].onclick = function(){
    if(olock==false)
    {
        num = 5;
        olock = true;
        barrier(num);
    }
    else
        alert('难度已设定！');
}
odegree[1].onclick = function(){
    if(olock==false)
    {
        num = 10;
        olock = true;
        barrier(num);
    }
    else
        alert('难度已设定！');
}
odegree[2].onclick = function(){
    if(olock==false)
    {
        num = 15;
        olock = true;
        barrier(num);
    }
    else
        alert('难度已设定！');
}
//开始、暂停游戏的控制
var pause=false;
var abgc = 'backgroundColor';
var aColorBody = 'rgb(200,0,0)';//红色
var aColorCell = 'rgb(255,255,255)';//白色
var aColorBarrier = 'rgb(95,95,95)';//黑色
var aColorFood = 'rgb(110,231,137)';//绿色
//定时器 ------ 蛇的和时间的
var timerSnack;
var timerTime;
//------------- 初始化开始-----------------------------
//生成战场
for(var i=0;i<M*N;i++){
    //用于创建标签节点
    var oelement;
    oelement = document.createElement('div');
    oelement.index = i;
    oelement.attr = 'default';
   
    oelement.className = 'cell';
    oField.appendChild(oelement);
    delete oelement;
};
//----------- 900个格子的数组-------------------------
odivs = obj(oField,'div');
snack.push(N*M/2+M/2);
snack.push(N*M/2+M/2-1);
rad(odivs);
obtn.onclick = function(){
    if(pause==true)
    {
        pause = false;
        clearInterval(timerSnack);
        clearInterval(timerTime);
        obtn.innerHTML = '开始';
    }
    else
    {
        pause = true;
        timerSnack=setInterval(fTime,t0);
        timerTime=setInterval(move,t0);
        obtn.innerHTML = '暂停';
    }
}
//------------------- 初始化结束-----------------------
</script>
</html>


网页版贪吃蛇(HTML 5)
weixin_30876945的博客
07-24 3212
(文字描述太繁琐了, 贪吃蛇算法很经典不多说， 那个伪播放器，不值一提。） 源码： 网页版贪吃蛇【http://files.cnblogs.com/crystalplus/%E4%B8%A4%E4%B8%AA%E7%BD%91%E9%A1%B5%E6%A0%B7%E4%BE%8B(%E6%97%A0%E9%9F%B3%E4%B9%90%E7%89%88).7z】 显示截图: ...
贪吃蛇游戏 js网页版
m0_67403013的博客
03-07 2532
在学习了前端三大件之后，对于自己的学习情况进行一个总结，所以写了一个网页版本的简单小游戏，贪吃蛇，成果如下： 首先介绍一下： 分数可以计数总共吃了多少东西，红色的是贪吃蛇的蛇头，蓝色的是食物，还有黄色的，黄色的是身体。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
贪吃蛇（网页版）
09-16
用JavaScript在网页完成贪吃蛇的移动，和增加食物。
贪吃蛇游戏网页版
06-08
贪吃蛇游戏网页版源码，双击可直接运行，演示地址http://glklkl.top/snake_game.html
【0基础】制作HTML网页小游戏——贪吃蛇（附详细解析）
最新发布
m0_52177571的博客
09-10 1818
我在昨天的文章里面分享了网页版贪吃蛇小游戏的源码，今天就来给大家详细讲解一下每部分代码是如何运作的，以及以后要如何美化贪吃蛇的UI界面，在哪里修改等。这是基本的HTML结构。元素用于绘制游戏,而标签包含了所有的JavaScript代码。这些CSS规则用于居中显示游戏画布并设置背景颜色。这里获取了canvas元素并创建了2D绘图上下文,用于在canvas上绘制图形。这定义了网格大小和每个单元格的尺寸。初始化蛇的位置,蛇由一系列坐标点组成。随机生成食物的位置。
网页版贪食蛇【基于HTML+CSS+JavaScript】实现
lei20172017的博客
05-04 2129
最终效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>贪食蛇</title> </head> <body> <div id="map" style="backg
html和js实现的网页版本贪吃蛇项目
04-04
《HTML与JavaScript实现的网页版贪吃蛇项目详解》 贪吃蛇，这款经典的游戏，以其简单的规则和无尽的挑战性，深受广大玩家的喜爱。如今，借助HTML和JavaScript技术，我们可以将它移植到网页上，让玩家在浏览器中就能...
JavaScript 网页版贪吃蛇游戏代码
10-23
JavaScript版贪吃蛇游戏，网页小游戏代码分享，这类小游戏可以很好的用JS来实现，游戏速度由快、中、慢可选，按“空格键” 开始/暂停，方向键控制蛇身运动方向，若要想研究代码原理，可关注代码中的注释，写的非常好...
网页版贪吃蛇.zip
05-28
网页版贪吃蛇是一款基于HTML、CSS和JavaScript技术开发的小游戏，它将经典的贪吃蛇游戏移植到了网页环境中。这个游戏的实现主要涉及到以下几个关键知识点： 1. HTML基础结构：HTML（HyperText Markup Language）是...
网页版贪吃蛇游戏.rar
03-09
本资源为一套精心制作的网页版贪吃蛇游戏的源代码，采用HTML、CSS和JavaScript进行开发。该源码设计简洁，功能完善，能够在浏览器中直接运行，为...通过浏览器访问放置源码的网页地址，即可开始体验网页版贪吃蛇游戏。
贪吃蛇网页版-HTML版
01-06
使用HTML实现的网页版贪吃蛇，实现较为简单，纯属用来娱乐！
JS网页版贪吃蛇小游戏.zip
07-11
JS网页版贪吃蛇小游戏
网页版贪吃蛇游戏开发
李永岩的专栏
06-24 1331
1.游戏开发分析：           开发目的分析：                   为了让大家在工作生活之余休闲只时，能让大家缓解和放松身心特意开发的一款网页版的休闲游戏，同时也是为了自己对javascript语言有更好的了解和应用，提高                   自己的编程能力所开发的一款小游戏。           开发可行性分析：
使用TypeScript实现贪吃蛇小游戏（网页版）
张张张的博客
07-07 1640
src下边的index.html页面是入口文件。/modules文件夹是用来存放所有类的。本项目使用webpack+ts所编写。index.ts是引入所有的ts文件。下边是项目的文件目录。
javascript实战项目——网页版贪吃蛇
知来者逆的博客
04-04 4109
这是一个网页版本的贪吃蛇项目，用了html和js实现，代码有很多注释，方便阅读，是一个不错的练手项目。
网页版贪吃蛇游戏 - JavaScript实现
在该网页版的贪吃蛇游戏中，主要涉及以下几个关键知识点： 1. **HTML 结构**：游戏的基础框架由HTML构建，包括`<html>`、`<head>`和`<body>`等元素。`<meta>`标签用于定义文档的字符编码，原本设置为UTF-8，需要改...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值