JavaScript 关于游戏

    var img = new Image();
    alert(111);
    img.src = "images/1.jpg";
    document.body.appendChild(img);

    var img = new Image();
    img.onload = function(){
        document.body.appendChild(img);
        alert(111);
    }
    img.src = "images/1.jpg";

    var readyCallback = [];
    var img = new Image();
    img.onload = function(){
        readyCallback.forEach(function(func){
            func();
        });

    };

    img.src = "images/1.jpg";
    document.body.appendChild(img);

    function onReady(func){
        readyCallback.push(func);
    }

    function move(){
        img.style.position = ‘absolute‘;
        img.style.left = "100px";
    }
    function move2(){
        img.style.top = "100px";
    }
    function border(){
        img.style.border = "1px solid red";
    }
    onReady(move);
    onReady(move2);
    onReady(bor);

　　//html源代码：
　　<ul id="ul1">
    　　<li class="findLi">1111</li>
    　　<li>2222</li>
    　　<li class="findLi">3333</li>
    　　<li>4444</li>
    　　<li class="findLi">5555</li>
　　</ul>
　　<ul id="ul2">
    　　<li class="findLi">1111</li>
    　　<li class="findLi">2222</li>
    　　<li class="findLi">3333</li>
    　　<li>4444</li>
    　　<li>5555</li>
　　</ul>

　　//js源代码
　　function findNodes(func){
　　　　var nodes = [];
　　　　var htmlNodes = document.getElementsByClassName(‘findLi‘);    //获取所有class为findLi的标签

　　　　  nodes = Array.prototype.slice.call(htmlNodes);    //将得到的对象转换为数组
　　　　　nodes.forEach(function(node){     //用forEach 遍历出数组， 这里的node代表数组中的元素
　　　　  　　func(node);
　　 　　});
　　　　 return nodes;   
　　};
　　function setBorder(node){
　　　　node.style.border = "1px solid #ccc";
　　};
　　function hide(node){
　　　　node.style.display = ‘none‘;
　　};
　　var nodes = findNodes(setBorder);

　　//css 源代码
        #div1{
            position: absolute;
            left: 30px;
            top: 150px;
            width: 100px;
            height: 100px;
            background: #f56205;
        }
        #div2{
            position: absolute;
            left: 1200px;
            top: 150px;
            width: 100px;
            height: 100px;
            background: greenyellow;
        }

　　//html源代码
    <div id="div1"></div>
    <div id="div2"></div>

　　//js 源代码
    var speed1 = 100;
    var speed2 = 200;
    var div1 = document.getElementById(‘div1‘);
    var div2 = document.getElementById(‘div2‘);
    var lastTime = Date.now();

    function update(){
        //得到毫秒数的算法
        var nowTime = Date.now(),dt = (nowTime - lastTime) / 1000;

        var rect1 = getAttr(div1);
        var rect2 = getAttr(div2);
        var flag = collides(rect1,rect2);
        if(flag){
            return;
        }else{
            div1.style.left = (parseInt(div1.offsetLeft) + speed1 * dt) + "px";
            div2.style.left = (parseInt(div2.offsetLeft) - speed2 * dt) + "px";
        }

        lastTime = nowTime;

        //用 setTimeout 回调 update 函数，让函数不停地执行，实现循环
        setTimeout(update,1000 / 60);

    }
    update();

    //得到某元素标签的 left right width height 值
    function getAttr(element){
        //返回一个对象
        return {
            x: element.offsetLeft,
            y: element.offsetTop,
            width: element.offsetWidth,
            height:element.offsetHeight
        }
    }

    //判断是否碰撞,如果碰撞到了返回 true，否则返回 false
    function collides(div1,div2){
        return !((div1.x + div1.width) < div2.x ||
                (div2.x + div2.width) < div1.x ||
                (div1.y + div1.height) < div2.y ||
                (div2.y + div2.height) < div1.y
                )
    }