一個簡單的基於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>

與這個文件放在同一個目錄下就能夠啦。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。