JavaScript 关于游戏

一、图片加载时（为何要写 onload ？？？）

　　1、先 alert 弹出值然后再出现图片

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

　　2、先出现图片然后再alert 弹出值

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

　　3、图片加载完毕后再执行其他的代码

　　//图片数组
    var imgs = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
    //imgCache 装加载完毕图片数组    
    var imgCache = {};
    function load(img){
        //如果传进来的值是一个数组，就调用_load()函数
        if(img instanceof Array){
            img.forEach(function(url){
                _load(url);
            })
        }else{
            _load(img)
        }
    }
    function _load(url){
        var img = new Image();
        img.onload = function(){
            imgCache[url] = img;
            if(isReady()){
                alert('图片全部加载完成');
            }
        }
        imgCache[url] = false;
        img.src = url;
    }
    function isReady(){
        var flag = true;
        for(var i in imgCache){
            if(!imgCache[i]){
                flag = false;
            }
        }
        return flag;
    }
    load(imgs);

二、调用自己写好的函数　

　　var readyCallback = [];   //装调用时传入的数组
    var img = new Image();
    img.src = 'images/1.jpg';
    img.onload = function(){
        document.body.appendChild(img);
        readyCallback.forEach(function(func){  //循环所有调用时传入的函数
            func();
        })
    };

    function onReady(func){
        readyCallback.push(func);   //在图片加载完毕后将要执行的函数push到数组中
    }

    function borders(){
        img.style.border = '1px solid #f00';
    }
    function borderRadius(){
        img.style.borderRadius = '5px';
    }
    function opacity(){
        img.style.opacity = .8;
    }
    onReady(borders);
    onReady(borderRadius);
    onReady(opacity);

三、用 forEach 遍历HTML中的元素标签

　　//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);

四、游戏主循环思想

　　var lastTime = Date.now();
    var box1Speed = 100;
    var box2Speed = 150;

    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');

    function main(){
        var now = Date.now();
        var dt = (now - lastTime) / 1000;

        box1.style.left = parseInt(box1.style.left) + box1Speed * dt + "px";
        box2.style.left = parseInt(box2.style.left) - box2Speed * dt + "px";

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

五、碰撞判断

　　//css 源代码
        #div1{
            position: absolute;
            left: 30px;
            top: 150px;
             100px;
            height: 100px;
            background: #f56205;
        }
        #div2{
            position: absolute;
            left: 1200px;
            top: 150px;
             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,
             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
                )
    }

六、使在自动执行函数中的函数可以在整个浏览器窗口中被调用

　　Javascript中的window对象表示浏览器中打开的窗口。

　　(function(){
        var name = "红红";
        var arr = [];
        function load(){   //在内部调用_load函数，作用是在当外界调用他的时候看不到函数中的内容
            _load();
        }
        function _load(){   //在内部书写不会外泄的代码，增强了代码的可维护性
            alert(name)
        }
        window.loads = {   //把函数指向window，使它可以在整个浏览器窗口中被调用
            load:load
        }
    })();
    loads.load();   //等价于 window.loads.load();  相当于window调用

注：如果你有疑问，可直接将代码复制到编辑器中看其效果，相信聪明的你是能看懂的。