JS写游戏

 

now

 

JS库选择

 

白鹭引擎（Egret） 总的来说，白鹭引擎是一款非常优秀的免费2D游戏开发引擎，对于前端开发者来说是一个值得尝试的选择。

Phaser：Phaser是一个功能丰富的2D游戏框架，它提供了许多用于创建各种类型游戏的工具和功能。Phaser有大量的社区支持和文档，适合初学者和有经验的开发者。

 

melonJS：melonJS是一个开源的HTML5 2D游戏引擎，提供了丰富的游戏开发功能，包括精灵、动画、物理、音频和碰撞检测等

 

Three.js：虽然Three.js主要用于3D图形和动画，但它也可以用于创建3D游戏。它提供了一个完整的3D渲染引擎，可以创建复杂的3D场景和对象。  

 

 

2017

萧井陌的视频。感觉一些东西挺有意思的，尤其是解决问题的过程，以及一个好程序应该改进的地方。

萧大的GITHUB：github.com/guaxiao/gua.game.js

视频：https://space.bilibili.com/39066904#!/

 

 

 

拖拽

拖拽是3个过程，mousedown,mousemove,mouseup

mousedown：记录最开始的坐标和状态（改为可拖动）

mousemove: 状态可拖动，坐标发生改变

mouseup：记录结束的坐标和状态（改为不可拖动）

 

 

键盘事件监听

//注册键盘监听事件
window.addEventListener('keydown',function(e){
var thisKey = e.key;
)}

 

 

逻辑判断

let a = 1,
        b,
        c = undefined,
        d = null ,
        f = 'null' ,
        g = false,
        h = 'false'
        
    let aa = {
        one : a && 11,    //11
        two : b && 22,    //undefined
        three : c && 33,  //undefined
        four : d && 44,      //null
        five : f && 55,   //55
        six : g && 66,      //false
        seven : h && 77   //77
    }
    console.log(aa.one,aa.two,aa.three,aa.four,aa.five,aa.six,aa.seven)
    let bb = {
        one : a || 11,   //1
        two : b || 22,   //22
        three : c || 33, //33
        four : d || 44,  //44
        five : f || 55,  //"null"
        six : g || 66,   //66
        seven : h || 77  //"false"
    }
    console.log(bb.one,bb.two,bb.three,bb.four,bb.five,bb.six,bb.seven)

 

one : a && 11,
当a为真时,one的属性值为 11
当a为undefined时，one的属性值为undefined
当a为null时，one的属性值为null
当a为false时，one的属性值为false
当a为字符串时，one的属性值为11

two : a || 11,
当a为真时，two的属性值为a的值
当a为null,undefined,false时，two属性值为11

 

//优先级（）> && > ||
        let    a = 11 &&  22 || 33          //22  
            b = (11 &&  22) || 33         //22
            c = false && 22 || 33         //33
            d = 11 || 22 && 33             //11
            e = false || 22 && 33         //33
            f = (11 || 22) && 33         //33
            g = (11 && 22) && 33         //33
            h = false && 22 && 33        //false
            i = 11 && 22 || 33 && ( 44 && 55)  //22
            j = (11 && 22) && 33 || 44 && 55  //33
            k = (11 && 22) && (33 || 44) && 55 && false //false
        console.log(a,b,c,d,e,f,g,h,i,j,k)   

 

计算的优先级

括号 > && > ||

在确立优先级的情况下从左往右计算

 

 

三元运算符 ?:

作用是判断?前的语句是否为真，为真则执行中间的语句，否则执行后面的语句

log("你是人是鬼？") ? alert("你是人") : alert("你是鬼！")

 

 

 

图片的预加载

先载入图片，这样的话，就好用很多

参考http://www.cnblogs.com/v10258/p/3376455.html