GDOI2016是我的退役战,不知道是题目画风不对,还是我自身的问题。
不过没关系啦,反正已经进过一次队OI生涯就没有什么遗憾的了。
这几天尝试着去做了个所谓的html5小游戏,略显简陋,但还是写个总结吧。
我是跟着这个网站做的http://www.w3schools.com/games/default.asp/,这个网站值得学习的内容有很多,质量也不错。
游戏的更新方式让我有些吃惊:竟然是每\(0.02\)秒完全重绘一次画布,虽然这样速度上过得去,但是完全重绘这一步感觉确实是有点浪费了。
随后发现一个更新画布的方式:通过浏览器提供的一个函数requestAnimFrame,浏览器会在恰当的时间调用我们的重绘函数。
恰当的时间大概是这样的意思:
if you’re running the animation loop in a tab that’s not visible, the browser won’t keep it running
不过这样我觉得一个不方便的地方是,每次重绘时需要计算两个重绘的间隔时间来绘制游戏画面,那么对于一个要计算物体碰撞的游戏,如果间隔时间比较长,计算物体在这段时间内是否有碰撞不会是个简单的工作。
详细信息:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// usage:
// instead of setInterval(render, 16) ....
(function animloop(){
requestAnimFrame(animloop);
render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.
我的作品
大体是用鼠标拉动一个小球,使得小球避开障碍物。
如何打开?
新建一个html文件:
<!DOCTYPE html>
<html>
<head> </head>
<body onload="startGame()">
<button onclick="startGame()">restart</button>
<script src="simpleGame.js"></script>
</body>
</html>
与这个文件放在同一个目录下就可以啦。