6.30 好号总结

其他 2018-07-28 10:46:47 阅读次数: 0

<script sec="地址"></script> 

  如<script src="css/all.js"></script>(那个文件夹下的文件<注意js引入和css引入的区别>)

    <link rel="stylesheet" href="css/index1.css">;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;
          padding:0
        }

        /*#box{position:absolute;*/
            /*background-color:red;*/
            /*height: 100px;*/
            /*width: 100px;}*/
        
        div{
            height:60px;
            width: 60px;
            border-radius:30px;
            background-color:#0E88EB;
            position:absolute;
           }
        
    </style>
</head>
<body>
<!--<p id="box"></p>-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>

    // var box=document.getElementById("box");
    //offsetTop=top//div内左上角
    //offsetList=left;
    //offsetWidth;
    //offsetHeight;//包括padding和border

    //返回顶部.
    //<h1 style="height:2000px">
    //<script>
    //获取
    //document.documentElement.scrollTop="500"//兼容
    //document.body.scrollTop="500"//ie兼容.
    //onkeydowm//键盘事件
    //document.onkeydown.function(ev){
    //var oEvent =window.enent||ev;
    //oEvent.keyCode

    //console.log(document.documentElement.scrollTop)
    //
    // box.onmousedown=function ()
    //     document.onmousemove=function(out){
    //
    //         box.style.left=out.clientX+"px";
    //         box.style.top=out.clientY+"px";
    //     }
    // }
    // document.onmouseup=function(){
    //     document.onmousedown=null;
    //     document.onmousemove=null;
    // }



    //球
    // var div=document.getElementsByTagName("div");
    //    document.onmousemove=function (that) {
    //
    //     for(i=0;i<div.length;i++){
    //
    //         var thats=window.event||that
    //         var x=thats.clientX;
    //         var y=thats.clientY;
    //
    //         div[i].style.transition=0.08*i+"s";
    //         div[i].style.top=y+'px';
    //         div[i].style.left=x+'px';
    //     }
    // }


       var oDiv=document.getElementsByTagName("div");
          document.onmousemove=function (ev) {
              var events=window.event||ev;
              for(i=oDiv.length-1;i>0;i--){
                  oDiv[i].style.top=oDiv[i-1].style.top;
                  oDiv[i].style.left=oDiv[i-1].style.left;
              }
                  oDiv[i].style.top=events.clientY+"px";
                  oDiv[i].style.left=events.clientX+"px";
          }
          setInterval(document.onmousemove=function (ev) {
              var events=window.event||ev;
              for(i=oDiv.length-1;i>0;i--){
                  oDiv[i].style.top=oDiv[i-1].style.top;
                  oDiv[i].style.left=oDiv[i-1].style.left;
              }
              oDiv[i].style.top=events.clientY+"px";
              oDiv[i].style.left=events.clientX+"px";
          },100)
</script>
</body>
</html>

form:不是定义表单的标签.只是上传给服务器的特定区域..标记

trim:是正则表达式中转换为数组的方法

ol是有序清单(注意别再记错了)

null instanceof Object 是错的(一个是基本数据类型一个是引用数据类型)

基本数据类型:null undefined Number boolean string 

引用数据类型:object array sample(未知)

截取 数组abcdrfg 的 efg ;

1:slice(4,3)(第一个参数是截取的起始位子,第二个是起始位置后截取的位数);

2:splice(0,4,aaaaaaa)(第一个参数是开始位子,第二个是删除位数.3为,插入的替代元素)

var  sting=[23,2342343,234.32432];
sting.splice(0,2,111)
console.log(sting);
//[111,234.32432]


1:强制类型转换:parseInt,parseDouble;parseFlool;

2:隐式类型转换:if + _;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS贪吃蛇-练习</title>
    <style type="text/css">
        #pannel table {
            border-collapse: collapse;
        }
        #pannel table td {
            border: 1px solid #808080;
            width: 10px;
            height: 10px;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
        }
        #pannel table .snake {
            background-color: green;
        }
        #pannel table .food {
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        var Direction = new function () {
            this.UP = 38;
            this.RIGHT = 39;
            this.DOWN = 40;
            this.LEFT = 37;
        };
        var Common = new function () {
            this.width = 20; /*水平方向方格数*/
            this.height = 20; /*垂直方向方格数*/
            this.speed = 250; /*速度 值越小越快*/
            this.workThread = null;
        };
        var Main = new function () {
            var control = new Control();
            window.onload = function () {
                control.Init("pannel");
                /*开始按钮*/
                document.getElementById("btnStart").onclick = function () {
                    control.Start();
                    this.disabled = true;
                    document.getElementById("selSpeed").disabled = true;
                    document.getElementById("selSize").disabled = true;
                };
                /*调速度按钮*/
                document.getElementById("selSpeed").onchange = function () {
                    Common.speed = this.value;
                }
                /*调大小按钮*/
                document.getElementById("selSize").onchange = function () {
                    Common.width = this.value;
                    Common.height = this.value;
                    control.Init("pannel");
                }
            };
        };
        /*控制器*/
        function Control() {
            this.snake = new Snake();
            this.food = new Food();
            /*初始化函数，创建表格*/
            this.Init = function (pid) {
                var html = [];
                html.push("<table>");
                for (var y = 0; y < Common.height; y++) {
                    html.push("<tr>");
                    for (var x = 0; x < Common.width; x++) {
                        html.push('<td id="box_' + x + "_" + y + '"> </td>');
                    }
                    html.push("</tr>");
                }
                html.push("</table>");
                this.pannel = document.getElementById(pid);
                this.pannel.innerHTML = html.join("");
            };
            /*开始游戏 - 监听键盘、创建食物、刷新界面线程*/
            this.Start = function () {
                var me = this;
                this.MoveSnake = function (ev) {
                    var evt = window.event || ev;
                    me.snake.SetDir(evt.keyCode);
                };
                try {
                    document.attachEvent("onkeydown", this.MoveSnake);
                } catch (e) {
                    document.addEventListener("keydown", this.MoveSnake, false);
                }
                this.food.Create();
                Common.workThread = setInterval(function () {
                    me.snake.Eat(me.food); me.snake.Move();
                }, Common.speed);
            };
        }
        /*蛇*/
        function Snake() {
            this.isDone = false;
            this.dir = Direction.RIGHT;
            this.pos = new Array(new Position());
            /*移动 - 擦除尾部，向前移动，判断游戏结束(咬到自己或者移出边界)*/
            this.Move = function () {
                document.getElementById("box_" + this.pos[0].X + "_" + this.pos[0].Y).className = "";
//所有 向前移动一步
                for (var i = 0; i < this.pos.length - 1; i++) {
                    this.pos[i].X = this.pos[i + 1].X;
                    this.pos[i].Y = this.pos[i + 1].Y;
                }
//重新设置头的位置
                var head = this.pos[this.pos.length - 1];
                switch (this.dir) {
                    case Direction.UP:
                        head.Y--;
                        break;
                    case Direction.RIGHT:
                        head.X++;
                        break;
                    case Direction.DOWN:
                        head.Y++;
                        break;
                    case Direction.LEFT:
                        head.X--;
                        break;
                }
                this.pos[this.pos.length - 1] = head;
//遍历画蛇，同时判断游戏结束
                for (var i = 0; i < this.pos.length; i++) {
                    var isExits = false;
                    for (var j = i + 1; j < this.pos.length; j++)
                        if (this.pos[j].X == this.pos[i].X && this.pos[j].Y == this.pos[i].Y) {
                            isExits = true;
                            break;
                        }
                    if (isExits) { this.Over();/*咬自己*/ break; }
                    var obj = document.getElementById("box_" + this.pos[i].X + "_" + this.pos[i].Y);
                    if (obj) obj.className = "snake"; else { this.Over();/*移出边界*/ break; }
                }
                this.isDone = true;
            };
            /*游戏结束*/
            this.Over = function () {
                clearInterval(Common.workThread);
                alert("游戏结束！");
            }
            /*吃食物*/
            this.Eat = function (food) {
                var head = this.pos[this.pos.length - 1];
                var isEat = false;
                switch (this.dir) {
                    case Direction.UP:
                        if (head.X == food.pos.X && head.Y == food.pos.Y + 1) isEat = true;
                        break;
                    case Direction.RIGHT:
                        if (head.Y == food.pos.Y && head.X == food.pos.X - 1) isEat = true;
                        break;
                    case Direction.DOWN:
                        if (head.X == food.pos.X && head.Y == food.pos.Y - 1) isEat = true;
                        break;
                    case Direction.LEFT:
                        if (head.Y == food.pos.Y && head.X == food.pos.X + 1) isEat = true;
                        break;
                }
                if (isEat) {
                    this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y);
                    food.Create(this.pos);
                }
            };
            /*控制移动方向*/
            this.SetDir = function (dir) {
                switch (dir) {
                    case Direction.UP:
                        if (this.isDone && this.dir != Direction.DOWN) { this.dir = dir; this.isDone = false; }
                        break;
                    case Direction.RIGHT:
                        if (this.isDone && this.dir != Direction.LEFT) { this.dir = dir; this.isDone = false; }
                        break;
                    case Direction.DOWN:
                        if (this.isDone && this.dir != Direction.UP) { this.dir = dir; this.isDone = false; }
                        break;
                    case Direction.LEFT:
                        if (this.isDone && this.dir != Direction.RIGHT) { this.dir = dir; this.isDone = false; }
                        break;
                }
            };
        }
        /*食物*/
        function Food() {
            this.pos = new Position();
            /*创建食物 - 随机位置创建立*/
            this.Create = function (pos) {
                document.getElementById("box_" + this.pos.X + "_" + this.pos.Y).className = "";
                var x = 0, y = 0, isCover = false;
                /*排除蛇的位置*/
                do {
                    x = parseInt(Math.random() * (Common.width - 1));
                    y = parseInt(Math.random() * (Common.height - 1));
                    isCover = false;
                    if (pos instanceof Array) {
                        for (var i = 0; i < pos.length; i++) {
                            if (x == pos[i].X && y == pos[i].Y) {
                                isCover = true;
                                break;
                            }
                        }
                    }
                } while (isCover);
                this.pos = new Position(x, y);
                document.getElementById("box_" + x + "_" + y).className = "food";
            };
        }
        function Position(x, y) {
            this.X = 0;
            this.Y = 0;
            if (arguments.length >= 1) this.X = x;
            if (arguments.length >= 2) this.Y = y;
        }
    </script>
</head>
<body>
<div id="pannel" style="margin-bottom: 10px;"></div>
<select id="selSize">
    <option value="20">20*20</option>
    <option value="30">30*30</option>
    <option value="40">40*40</option>
</select>
<select id="selSpeed">
    <option value="500">速度-慢</option>
    <option value="250" selected="selected">速度-中</option>
    <option value="100">速度-快</option>
</select>
<input type="button" id="btnStart" value="开始" />
</body>
</html>
//贪吃蛇

猜你喜欢

转载自blog.csdn.net/thinkingw770s/article/details/80869879
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022