自从上次发布一个小恐龙游戏以后,到现在10天了,前后又写了3个游戏,挑了一个感觉比较有挑战的游戏和大家分享一下。
效果演示
这是我模拟一个苹果游戏《stick hero》游戏写的一个小游戏,在这里记录一下,希望大家会喜欢。
一直按下鼠标,会出一根棍子,棍子会变长,小人会根据棍子长度来移动。判断小人是否停留在柱子上,因为放在网上以后,鼠标判断有点卡,请大家见谅。
那我们还是从头开始介绍一下这游戏的开发过程吧。
图片加载
这次的图片加载器是用的《H5手把手教你玛丽游戏》的图片加载器,个人感觉非常好用,可能是我没接触更好的图片加载器,大神都是用自己框架写的,感觉研究起来我很吃力,基础跟不上,最近一个大哥叫我去研究OOP思想来编写框架开发游戏,这也是我以后的方向,很感谢这位大哥给我的指导。
function loadImg(imgCount,callback){
var img = {},
total = imgCount.length,
loaded = 0;
for(var i = 0;i < total;i++){
var imgs = img[imgCount[i].id] = new Image();
imgs.src = imgCount[i].src;
imgs.onload = function(){
loaded++;
};
}
if(typeof callback == "function"){
function check(){
if(loaded >= total)
callback();
else
setTimeout(check,300);
}
check();
}
return img;
}
View Code
调用的方式和我上次那个差不多,也是传id和src,和回调函数,确保图片加载完以后执行。
var imgs = null,
game = null;
function init(){
imgs = loadImg([
{id:"bg",src:"img/bg2.png"},
{id:"player",src:"img/player.png"}
],start);
}
init();
function start(){
game = new Game({
width:500,
height:600,
FPS:30,
});
game.init();
game.move();
}
精灵类
这次比较复杂的是存在着精灵,精灵存在动画,所以加了2个类,Sprite和Animation,在这个游戏中,我把柱子也当做精灵处理,因为每次的柱子他的宽度和初始位置是随机的,而且在检测人物是否站在柱子上的时候比较好检测。
function Sprite(option){
for(var attr in option){
this[attr] = option[attr];
}
}
Sprite.prototype = {
constructor:Sprite,
x:0,
y:340,
w:0,
h:0,
maxX:999,
maxY:999,
animation:null,
accX:0,
accY:0,
init:function(){
if(this.animation){
this.animation.init();
this.animation.setNow(0);
}
},
//每次更变人物的移动动画,让人物动起来。
update:function(sleep,long){
this.x += this.accX;
this.animation.update(sleep);
if(this.x >= long+40){
this.x = long+40;
this.animation.setNow(0);
this.checkCollide();
}
},
//人物的绘制
draw:function(ct){
this.animation.draw(ct,this.x,this.y);
},
//矩形的绘制
drawRect:function(ct){
ct.fillRect(this.x,this.y,this.w,this.h);
},
//检测人物是否在柱子上
checkCollide:function(){
var Px1 = this.x;
var Px2 = this.x + 40;
var Rx1 = game.colRect.x;
var Rx2 = game.colRect.x + game.colRect.w ;
if(Px1 > Rx2 || Px2 < Rx1){
this.y += this.accY;
if(this.y >= this.maxY){
clearInterval(game.mainLoop);
alert("挑战失败! ");
}
}else{
game.initStart();
}
}
};
View Code
下面是生成人物和柱子的代码,通过参数可以区分他们。
function createPlayer(){
var config = {
//人物走路速度
accX:4,
//人物掉落速度
accY:7,
//人物初始位置
x:0,
y:340,
maxY:600,
//人物移动过程
animation:new Animation({
frame:[
{x:20,y:0,w:80,h:80,action:100},
{x:120,y:0,w:80,h:80,action:100},
{x:220,y:0,w:80,h:80,action:100},
{x:320,y:0,w:80,h:80,action:100},
]
})
};
return new Sprite(config);
}
function createRect(){
var config = {
//每次随机获取宽度和x位置,这样让游戏更有挑战
w:(Math.random()*40 + 20)|0,
x:(Math.random()*300+150)|0,
y:400,
h:200,
};
return new Sprite(config);
}
下面介绍的是人物的移动,通过组图的不断更换,让人物动起来。
function Animation(option){
for(var attr in option){
this[attr] = option[attr];
}
}
Animation.prototype = {
constructor:Animation,
img:null,
//移动过程
frame:null,
//动作的索引值
index:null,
//一个动作的进行时间
time:null,
//当前为多少帧
frameNow:null,
len:-1,
init:function(){
this.img = imgs["player"]||null;
this.frame = this.frame||[];
this.len = this.frame.length - 1;
this.index = 0;
this.setNow(this.index);
},
setNow:function(index){
this.index = index;
this.frameNow = this.frame[this.index];
},
//action为每个动作进行多长时间(前面传过来)
update:function(sleep){
if(this.time >= this.frameNow.action){
this.time = 0;
if(this.index >= this.len){
this.index = 0;
}else{
this.index++;
}
this.setNow(this.index);
}else{
this.time += sleep;
}
},
//人物的绘制
draw:function(ct,x,y){
var f = this.frameNow;
ct.drawImage(this.img,f.x,f.y,f.w,f.h,x,y,60,60);
}
};
View Code
游戏类
这个类里面一个主循环控制着我们所有移动的进行,这里我分步来说一下我遇到的问题。
1.如何实现一个柱子倒下的过程,开始我的想法是画一个矩形,然后通过rotate来实现倾斜,因为以前没有用过rotate方法,进入尝试了一次,才知道他的倾斜是将整个画布倾斜,这样连背景一起倾斜,根本无法达到效果,然后通过在纸上画了一下,用数学知识解决了这个问题,我把矩形换成换线,改变他的lineWidth让他看起来像一个矩形。
stick:function(){
//当鼠标按下以后执行,并且在棍子移动时不会再次触发。
if(this.moused && !this.clicked){
this.time += this.sleep;
//让棍子垂直向上伸展,通过循环让他的长度累加
this.drawStick(this.time);
}else if(!this.moused && this.long > 0){
//当鼠标松开(mouseup)以后,让棍子倒下去
this.clicked = true;
this.length = this.stickY - this.long;
this.fallRect(this.length);
}
},
//棍子向上伸展
drawStick:function(time){
this.time = time;
this.long += (time/200)|0;
this.ct.beginPath();
this.ct.lineWidth = 5;
this.ct.moveTo(this.stickX,this.stickY);
this.ct.lineTo(this.stickX,this.stickY - this.long);
this.ct.stroke();
},
//棍子向下掉落,记录下棍子的长度,就是人物行走的距离
fallRect:function(length){
this.length = length;
if(this.angle < 30){
this.angle += this.sleep/50;
this.ct.beginPath();
this.lineWidth = 5;
this.ct.moveTo(this.stickX,this.stickY);
var hudu = (2*Math.PI / 360) * 3 * this.angle;
this.fallX = this.stickX + this.long*Math.sin(hudu);
this.fallY = this.stickY - this.long*Math.cos(hudu);
if(this.fallY >= this.stickY){
this.fallY = this.stickY;
}
this.ct.lineTo(this.fallX,this.fallY);
this.ct.stroke();
}else{
this.ct.beginPath();
this.lineWidth = 5;
this.ct.moveTo(this.stickX,this.stickY);
this.ct.lineTo(this.fallX,this.fallY);
this.ct.stroke();
this.success = true;
}
},
View Code
2.当我以为这个游戏已经结束的时候出现了一个bug,就是每次棍子的绘制路径都被保留下来了,这是我canvas控制能力不足,每次绘制之前加一个beginPath就好了。
结束语
在这里,感谢帮助我的每一个人,以后我也会成为大牛,写更多更好的博文,尽自己的力量去帮助更多人。
最近在实验室学习,突然很想回家了,毕竟好久没看见家人了,还有10天就能回家了,心里还是很高兴。
只有半年的时间就要去找工作了,有时间都去研究JS,感觉JS真是非常强大,我现在的水平想开发框架还是太难了,不过慢慢来吧,欲速则不达,一步一步积累终有一天我能自己开发框架。
谢谢大家,如有什么疑问或者建议请留言。