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

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

var img = new Image();
alert(111);
img.src = "http://www.mamicode.com/images/1.jpg";
document.body.appendChild(img);
　　2、先出现图片然后再alert 弹出值

var img = new Image();
img.onload = function(){
document.body.appendChild(img);
alert(111);
}
img.src = "http://www.mamicode.com/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 = http://www.mamicode.com/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 = http://www.mamicode.com/‘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;
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
)
}
六、使在自动执行函数中的函数可以在整个浏览器窗口中被调用

　　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调用

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

JavaScript 关于游戏