一个简单的基于canvas小游戏我的作品

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>

与这个文件放在同一个目录下就可以啦。

一个简单的基于canvas小游戏 我的作品

如何打开？

相关推荐

一个简单的基于canvas小游戏我的作品