一个简单的基于canvas小游戏

时间 2019-11-12

标签一个简单基于 canvas 游戏栏目游戏繁體版

原文原文链接

GDOI2016是个人退役战，不知道是题目画风不对，仍是我自身的问题。html

不过不要紧啦，反正已经进过一次队OI生涯就没有什么遗憾的了。html5

这几天尝试着去作了个所谓的html5小游戏，略显简陋，但仍是写个总结吧。web

我是跟着这个网站作的http://www.w3schools.com/games/default.asp/，这个网站值得学习的内容有不少，质量也不错。浏览器

游戏的更新方式让我有些吃惊：居然是每\(0.02\)秒彻底重绘一次画布，虽然这样速度上过得去，可是彻底重绘这一步感受确实是有点浪费了。函数

随后发现一个更新画布的方式：经过浏览器提供的一个函数requestAnimFrame，浏览器会在恰当的时间调用咱们的重绘函数。oop

恰当的时间大概是这样的意思：学习

if you’re running the animation loop in a tab that’s not visible, the browser won’t keep it running网站

不过这样我以为一个不方便的地方是，每次重绘时须要计算两个重绘的间隔时间来绘制游戏画面，那么对于一个要计算物体碰撞的游戏，若是间隔时间比较长，计算物体在这段时间内是否有碰撞不会是个简单的工做。spa

详细信息：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/rest

// 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>

与这个文件放在同一个目录下就能够啦。