easeljs web开发围住神经小猫咪【一】

easeljs web开发围住神经小猫咪【一】_第1张图片easeljs web开发围住神经小猫咪【一】_第2张图片easeljs web开发围住神经小猫咪【一】_第3张图片easeljs web开发围住神经小猫咪【一】_第4张图片


前两天学的围住神经小猫咪————图片版,在这里总结一下,与之前的神经猫有了很多新的东西。


开始。

一.加载背景,圆圈,小猫咪


这里要用到easeljs,首先建立index.html之后引入easeljs文件
<script src="easeljs-0.8.0.min.js">script>

观察游戏,我们会发现,与之前圆圈版为主神经猫不同的是,
1.这里的猫咪是踩在圆圈上的,也就是说,猫咪和圆圈不可以封装在一个类中,而是猫单独一个类,圆圈单独一个类。
2.背景图片是贯穿整个游戏始终的,所以可以在canvas外部添加背景图片,即在index中添加,与canvas并列。

那么,首先,就在index.html中加载背景图片吧。

<body>
<img src="res/bg.jpg" id="bg">
<canvas id="myCanvas" width="480" height="800">canvas>
body>

继续为背景图片添加css样式,我发现自己css样式有些不熟练,有时间再把css弄一遍吧。哎。

<link rel="stylesheet" href="css/style.css">
在style.css中
body{
    margin: 0;
    border: 0;
    padding: 0;
    positon:relative
}
#myCanvas{
    position:absolute;
    border: 1px solid blue;
    left:40%;
    top:5%;
}
#bg{
    position:absolute;
    width: 480px;
    height: 800px;
    left:40%;
    top:5%;
}
还是复习一下吧。 easeljs web开发围住神经小猫咪【一】_第5张图片
随便打开一个网页,审查元素,都有这么一个东西,显而易见喽,盒子理论:margin是外边框,padding是内边框,border是那个小边,这里设置body的所有边框都为零。

position:它有四个属性static relative absolute fixed。fixed是固定在浏览器的某个位置,当鼠标不断下滑,位置也固定不变。  static是静态位置,此时无法设置top right left bottom了。而当父级设置为relative时,当子容器设置为absolute时,子容器设置的top right left bottom就都是相较父级容器而言的,我就用到了这种情况,(虽然居中的也不是很好)。如果父级没有设置relative,就是相较浏览器而言的。


下面,就开始加载那些小石子和小猫咪了。

小猫咪和小石子都是会移动或变色的,所以,他们都分别写成类cat类和circle类。另外用main.js来调度她们俩。

小猫咪类:

1.小猫咪是会都比的动的。要加载一个动画。
2.小猫咪的位置是不断改变的,要确定猫咪的位置,和移动函数。

function Cat(){
    this.row;
    this.col;
    this.x;
    this.y;
    this.init();
}这里建立了猫的所有属性,每有一种新的属性,就在这里增添,清晰一些。
Cat.prototype=new createjs.Sprite();  父级实例化 有它才会运行前面一个函数。
Cat.prototype.init=function(){
    var data = {
        images: ["res/stay.png"],
        frames: {width: 61, height: 93,regX:30,regY:93},
        animations: {
            run: [0, 15]                    
        }
    };
    var spriteSheet=new createjs.SpriteSheet(data);
    createjs.Sprite.call(this,spriteSheet,"run");         
}

这几行创建了一个动画,把猫的所有动作都用tiled集成在一张图上,把stay.png和stay.json都引入工程,images引入图片,frames确定每一只小猫的宽高和小猫的锚点。
animations  确定动画从第0个图片到第15个图片,就是16帧。
最后两句就是创建然后运行了,模版代码。
Cat. prototype. setGridPos= function(row,col){ this. col=col; this. row=row;} Cat. prototype. move= function(row,col,destX,destY){ this. setGridPos(row,col); this. x=destX; this. y=destY;}

这两个函数记录小猫在数组中位置,还有真实的移动位置。我发现游戏里有一个元素数组,有一个数组记录数组中几行几列的位置还是必须的,就好像两个世界,一个世界是精灵真正放置的位置,而其实,在制作时,另一个世界是虚拟放置的世界,用它来控制真实的。


写不动了,一会再说吧。









你可能感兴趣的:(javascript,游戏)