bob体育官方平台
JS小游戏 贪食蛇v1.0

事情发生早先用Clip属性完成了文字上下两半不意气风发色彩的拼凑。多彩渐变字,包容全部主流浏览器。页面JS个中真正实用的独有colorful(State of Qatar函数: 复制代码 代码如下:function colorful{ var boxObj; if=="string"||typeof{ boxObj = document.getElementById; }else{ boxObj = obj; } boxObj.innerHTML=""+font+""; var num = boxObj.getElementsByTagName[0].scrollWidth; boxObj.innerHTML=""; for{ var j=i+1; var c=Math.round; switch{ case 0:r=c;g=c;b=c;break; case 1:r=c;break; case 2:g=c;break; case 3:b=c;break; } var iObj = document.createElement; iObj.innerHTML=font; iObj.style.clip="rect(auto "+j+"px auto "+i+"px)"; iObj.style.color="rgb"; iObj.href="#"; boxObj.appendChild; } }

次第设计步骤

CLIP达成色彩渐变字体

1、设计格子生成函数。那是一个通用的生成函数,能够自身输入行,列,单元格中度。每一个单元格是二个div。结合CSS代码的调动能够转变各类大小和增幅的本土。

CSS多彩渐变字 文字: RAV4值: 初叶化EvoqueGB颜色中的福睿斯值 G值: 最早化CRUISERGB颜色中的G值 B值: 初叶化LX570GB颜色中的B值 渐变格局: 灰度渐变变化本田CR-V值变化G值变化B值 相应的数值会免强在0~255之间更换

2、生成一条蛇。选拔三个数组表示蛇,每种成分是多个div,能够通过id值获取成分的行、列属性。

渐变着色

3、检查实验方向按钮

Designed by Silence,转发请评释出处

4、设计剖断下一步地方的函数。在此个函数中,首先决断有未有撞,如果未有撞则推断下一步的职位并且改动蛇的造型。那时有三种情形,第生机勃勃种是不曾吃到食物,在蛇的数组前投入新因素,将蛇尾的因素删除;另生龙活虎种情景是吃到了食物,那时候只增多新因素,还要生成新的食品。

[Ctrl+A 全选 注:如需引进外界Js需刷新技能实施]虽说IE有友好的渐变滤镜,但别的浏览器都不扶助。CLIP属性的接纳能够支撑全部浏览器!通进度序,大家得以轻便地给各样文字别本增加CLIP属性将意气风发段文字分割成二个三个像素,分别着色,最后结合到一起,完毕多彩渐变!

5、通过setInterval调用上一步中的函数

 

程序代码

[javascript]  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";  

<html xmlns=";  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<style type="text/css">  

/*必要调动的内容有.inner的font-size,line-height*/  

.inner {width:29px;height:29px;  

    float:left;display:inline;  

    font-size:20px;line-height:20px;text-align:center;font-weight:bold;color:#F00;  

    border-top:1px solid black;  

    border-left:1px solid black;  

}  

 

#outside{  

    padding:0;  

    float:left;  

    border-right:1px solid black;  

    border-bottom:1px solid black;  

}  

.clearFix:after{  

    clear:both;  

    display:block;  

    visibility:hidden;  

    height:0;  

    content:"";  

}  

.clearFix{zoom:1;}  

</style>  

<script type="text/javascript">  

var foodGL450 = -1;//食品坐标  

var foodC = -1;  

var dir = 0;  

window.onload = function(){  

    var r = 15;//行数  

    var c = 20;//列数  

    var w = 18;//单元格宽度  

    var cell = createCell(r,c,w卡塔尔;//创设格子,行,列,单元格宽度。那么些格子是贰个二维数组  

    var snake = new Array(卡塔尔(قطر‎;//成立蛇。那个蛇是三个大器晚成维数组  

    for(var i=0;i<3;i++卡塔尔国//初始化蛇  

    {  

        snake[i] = cell[0][3-i];  

        snake[i].innerText="*";  

    }  

    document.onkeydown = function(卡塔尔国//检查实验当前来势按钮  

    {  

        dir = changeDir(this);  

    }  

    generateFood(cell卡塔尔;//生成食品  

    setInterval(function(卡塔尔(قطر‎{checkDir(cell,snake卡塔尔国;},200卡塔尔国;  //检查评定当前前行方向并发展。在setInterval中不能够从来传入参数,需求动用function举行函数调用  

}  

function generateFood(cellState of Qatar//生成食物  

{     

    do{  

        foodR = Math.floor(Math.random()*cell.length卡塔尔;//依照格子的总的数量量变化  

        foodC = Math.floor(Math.random()*cell[0].length);  

    }while(cell[foodR][foodC].innerText == "*"卡塔尔(قطر‎//食品不能够和蛇重合  

    cell[foodR][foodC].innerText = "○";//画出食品  

}  

  

function changeDir(e卡塔尔//检查评定当前来势开关  

{  

    if(event.keyCode>=37&&event.keyCode<=40卡塔尔国//怎样按钮是方向键,再次来到开关码  

        return event.keyCode;  

}  

function checkDir(cell,snakeState of Qatar//检查评定当前前行方向并进步  

{  

    if(dir>=37&&dir<=40卡塔尔//初阶化的时候,按下率性方向键开头运营  

    {  

        var nextNode = new Array(2卡塔尔(قطر‎;//下一步的坐标  

        nextNode = getNext(dir,cell,snake卡塔尔国;//获取下一步坐标  

        if(nextNode[0]!=-1&&nextNode[1]!=-1&&nextNode[0]!=cell.length&&nextNode[1]!=cell[0].length&&cell[nextNode[0]][nextNode[1]].innerText!="*")  

        //若无撞到旁边,也尚未撞到温馨,继续前进.cell.length行数,cell[0].length列数  

        {  

            snake.unshift(cell[nextNode[0]][nextNode[1]]State of Qatar;//在最前头增添风流倜傥截  

            snake[0].innerText="*";  

            if(nextNode[0]==foodR&&nextNode[1]==foodC卡塔尔国//假如吃到食物,生成新的食物 

            {   generateFood(cell);}  

            else  

            {   snake.pop(卡塔尔.innerText="";}//如果没吃到食品,将最后生机勃勃截去掉  

            for(var i = 0;i<snake.length;i++State of Qatar//设置颜色  

            {  

                switch(i)  

                {  

                    case 0:  

                        snake[i].style.color="#F00";  

                        break;  

                    case 1:  

返回顶部