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字体