zoukankan      html  css  js  c++  java
  • 一个简单的基于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>
    

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

  • 相关阅读:
    rails enum用于存储数据
    single-table inheritance 单表继承
    imageable.touch
    jbuilder的set!方法重构接口
    Two Strings Are Anagrams
    java项目导入IntelliJ IDEA
    mac 下载安装 IntelliJ IDEA Tomcat
    Merge k Sorted Lists Leetcode Java
    ruby on rails validates uniqueness
    使用update!导致的更新时候的错误信息不显示 ruby on rails
  • 原文地址:https://www.cnblogs.com/wangck/p/5498370.html
Copyright © 2011-2022 走看看