JavaScript about Games

First, when the picture is loaded (why write onload ??? )

1. Alert pop-up value before the image appears

    var img = new Image ();    Alert (111);    IMG.SRC = "Images/1.jpg";    Document.body.appendChild (IMG);

　　

2, first appear the picture and then alert popup value

    var img = new Image ();    Img.onload = function () {        document.body.appendChild (img);        Alert (111);    }    IMG.SRC = "Images/1.jpg";

　　

　　3. After loading the picture, execute other code.

Image array    var imgs = [' images/1.jpg ', ' images/2.jpg ', ' images/3.jpg ', ' images/4.jpg '];    Imgcache loading complete image array        var imgcache = {};    function Load (img) {        ///If the value passed in is an array, call the _load () function        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 (' Picture full load complete ');            }        }        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);

　　

Second, call a function that you have written well

var readycallback = [];   The array that was passed in when the call was loaded    var img = new Image ();    IMG.SRC = ' images/1.jpg ';    Img.onload = function () {        document.body.appendChild (img);        Readycallback.foreach (func) {  //loop all calls passed in function            func ();        })    };    function Onready (func) {        Readycallback.push (func);   The function to be executed after the picture has been loaded is push into the array    }    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);

　　

Third, with ForEach Traverse HTML the element label in

　　HTML source code: <ul id= "UL1" > <li class= "findli" >1111</li> <li>2222</li> <li class= "Findli" >3333</li> <li>4444</li> <li class= "Findli" >5555</li> &LT;/UL&G　　T <ul id= "Ul2" > <li class= "findli" >1111</li> <li class= "Findli" >2222</li> <l I class= "Findli" >3333</li> <li>4444</li> <li>5555</li> </ul>//js source code F　　　　Unction Findnodes (func) {var nodes = [];    var htmlnodes = document.getelementsbyclassname (' Findli ');    Get all tags of class findli nodes = Array.prototype.slice.call (htmlnodes);　　 　　Converts the resulting object to an array Nodes.foreach (function (node) {//) iterating through the arrays with a ForEach, where node is the element func (node) in the set;　　　　 });   　　return nodes;　　};　　function SetBorder (node) {Node.style.border = "1px solid #ccc";　　};　　function Hide (node) {node.style.display = ' none ';　　}; var nodes = Findnodes (SetBorder)

　　

Four, game main Loop thought

var lasttime = Date.now ();    var box1speed = +;    var box2speed =;    var box1 = document.getElementById (' box1 ');    var box2 = document.getElementById (' Box2 ');    function Main () {        var now = Date.now ();        var dt = (now-lasttime)/+;        Box1.style.left = parseint (box1.style.left) + box1speed * dt + "px";        Box2.style.left = parseint (box2.style.left)-box2speed * dt + "px";        Lasttime = Now;        Use SetTimeout callback update function, let function execute continuously, implement Loop        setTimeout (MAIN,1000/60);    }    Main ();   Call the main function

　　

Five, Collision judgment

　CSS source code #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 Source code <div id= "Div1" ></div> <div id= "div2" ></div>//js source var speed1 = 100;    var speed2 = 200;    var div1 = document.getElementById (' Div1 ');    var div2 = document.getElementById (' div2 ');    var lasttime = Date.now ();        function Update () {//The algorithm that gets the number of milliseconds 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;    Using SetTimeout callback update function, let the function execute continuously, realize cyclic setTimeout (UPDATE,1000/60);    } update (); Gets the left right width height value function getAttr (element) {//Returns an object return {X:ELEMENT.O        Ffsetleft, Y:element.offsettop, Width:element.offsetWidth, Height:element.offsetHeight }}//To determine if the collision is true if it collides, otherwise returns 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)}

　　

Vi. enable functions in the auto-execute function to be called in the entire browser window

　　Javascript in the window Object represents an open window in a browser.

(function () {        var name = "Daily";        var arr = [];        function load () {   //calls the _load function internally, in which the contents of the function are not visible when the outside call            _load ();        }        function _load () {   //write inside code that does not leak, enhanced maintainability of code            alert (name)        }        window.loads = {   //To point function to window So that it can be called Load:load}} in the entire browser window    ) ();    Loads.load ();   Equivalent to Window.loads.load ();  Equivalent to a window call

　　

JavaScript about Games