H5前端 纸飞机的制作思路

h5混合式开发前端调试|做h5前端开发可以接私活吗|h5前端开发简单吗

支持鼠标,支持手机重力感应,支持左右键盘,
加入漂移玩法,也就是距离障碍物比较近的躲避会使左上方能量条增加,满了之后会发生漂移

游戏的简单思路:
把障碍物精灵和玩家的纸飞机精灵存入到数组中,每一帧都更新状态,然后顺序的画出
伪代码:
game.prototype.start = function() {
this.stimer = requestAnimFrame(function() {
this.start();
}.bind(this));
//精灵状态更新
this.update();
//精灵效果重绘
this.
render();
}

一般我们可以再update里检测碰撞,删除元素,这样就更新了游戏的状态

html5为了使动画更加流畅,加入了requestAnimFrame,每个浏览器前缀都不一样,不需要时间参数,它会告诉你应该在什么时间点重绘。每个浏览器兼容性不一样:
window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function(callback, element) {
window.setTimeout(callback, 1e3 / 60);
};
}();

关于精灵,我们简单的写个类,例如障碍物:
它有四个属性,y坐标,高度,宽度,类型,还有个初始属性,die,判断它是否被删除,如果变为1,就会在game的update时候删除
var wall = function(y, width, height, type) {
this.y = y;
this.width = width;
this.height = height;
this.type = type;
this.die = 0;
};

给wall拓展方法,dr是在此画布画出,update是每一帧去更新状态,比如y-=5,那么每一秒这个障碍物会上移5像素
wall.prototype ={
dr:fucntion(){
//绘制
},
update(){
//更新状态
}
}

关于碰撞检测,我一般用矩阵碰撞(obb),也就是两个矩形碰撞(网上有很多算的方法),
当然最简单的是圆形碰撞,只判断距离和半径就好了,如果想上手,可以先使用圆形碰撞

关于手机重力感应,我们可以如下监听
window.addEventListener(“deviceorientation”, this.orientationListener, !1);
window.addEventListener(“MozOrientation”, this.orientationListener, !1);
window.addEventListener(“devicemotion”, this.orientationListener, !1);

通过判断 e.gamma也就是手机左右水平偏移的大小,来更新飞机状态:
function orientationListener(e) {
var gamma = e.gamma;
gamma > 10 ? game1.fj1.fx = “L2” : gamma < -10 ? game1.fj1.fx = “R2” : game1.fj1.fx = “CR”;
}

简单的思路就是这些,有什么疑惑都可以交流
做html5游戏对提升js水平有很大好处,而且不像写程序那么枯燥,
等你写完一个游戏,你会发现在项目中实现的一些效果很easy

h5前端开发简单吗|前端开发试题app|前端开发app字体

» 本文来自:前端开发者 » 《H5前端 纸飞机的制作思路》
» 本文链接地址:https://www.rokub.com/4700.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!