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 loading 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 the function that you write well

var readycallback = []; Array that is passed in when the call is mounted
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); Push the function that will execute after the picture is loaded 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, iterate through the element tags in html with ForEach

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>
</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 Source code
function Findnodes (func) {
var nodes = [];
var htmlnodes = document.getelementsbyclassname (' Findli '); Get all tags that are class Findli
nodes = Array.prototype.slice.call (htmlnodes); Convert the resulting object to an array
Nodes.foreach (node) {//Iterate through arrays with ForEach, where node represents the elements in the array
Func (node);
});
return nodes;
};
function SetBorder (node) {
Node.style.border = "1px solid #ccc";
};
function Hide (node) {
Node.style.display = ' None ';
};
var nodes = Findnodes (SetBorder);

Four, the game main circulation thought

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;
Callback the update function with setTimeout, let the function execute continuously, realize the loop
SetTimeout (MAIN,1000/60);
}
Main (); Call the main function
V. 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 code
var speed1 = 100;
var speed2 = 200;
var div1 = document.getElementById (' Div1 ');
var div2 = document.getElementById (' div2 ');
var lasttime = Date.now ();

function Update () {
Algorithm for obtaining millisecond number
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;

Callback the update function with setTimeout, let the function execute continuously, realize the loop
SetTimeout (UPDATE,1000/60);

}
Update ();

Gets the left right width height value of an element's label
function getAttr (Element) {
Returns an object
return {
X:element.offsetleft,
Y:element.offsettop,
Width:element.offsetWidth,
Height:element.offsetHeight
}
}

Determines whether the collision, if the collision to return true, 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

The Window object in JavaScript represents the windows that are open in the browser.

(function () {
var name = "Red Red";
var arr = [];
function load () {//Call the _load function internally to see the contents of the function when the outside calls him
_load ();
}
function _load () {//write in-house code that does not leak, enhanced maintainability of the Code
Alert (name)
}
Window.loads = {//The function is pointed to the window so that it can be called in the entire browser window
Load:load
}
})();
Loads.load (); Equivalent to Window.loads.load (); Equivalent to a window call

Note: If you have questions, you can copy the code directly into the editor to see how it works, and believe that you can understand the smart.

JavaScript about Games