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小游戏的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. 两个Canvas小游戏

    或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...

  3. 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧

    之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...

  4. 并发编程概述 委托（delegate） 事件（event） .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类，支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节：SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...

  5. [Python3 练习] 007 简单的猜数字小游戏

    题目:简单的猜数字小游戏 (1) 描述 程序随机生成一个数字,玩家用键盘输入所猜数字,在规定次数内猜对为胜. (2) 要求 程序随机生成一个 1 到 100 的自然数 有 7 次机会去猜 机会用尽之前 ...

  6. 通过Dapr实现一个简单的基于.net的微服务电商系统(五)——一步一步教你如何撸Dapr之状态管理

    状态管理和上一章的订阅发布都算是Dapr相较于其他服务网格框架来讲提供的比较特异性的内容,今天我们来讲讲状态管理. 目录:一.通过Dapr实现一个简单的基于.net的微服务电商系统 二.通过Dapr实 ...

  7. 通过Dapr实现一个简单的基于.net的微服务电商系统(九)——一步一步教你如何撸Dapr之OAuth2授权

    Oauth2授权,熟悉微信开发的同学对这个东西应该不陌生吧.当我们的应用系统需要集成第三方授权时一般都会做oauth集成,今天就来看看在Dapr的语境下我们如何仅通过配置无需修改应用程序的方式让第三方 ...

  8. 通过Dapr实现一个简单的基于.net的微服务电商系统(十)——一步一步教你如何撸Dapr之绑定

    如果说Actor是dapr有状态服务的内部体现的话,那绑定应该是dapr对serverless这部分的体现了.我们可以通过绑定极大的扩展应用的能力,甚至未来会成为serverless的基础.最开始接触 ...

  9. 通过Dapr实现一个简单的基于.net的微服务电商系统(十五)——集中式接口文档实现

    之前有小伙伴在评论区留言说如何集成swagger,最开始没有想透给了对方一个似是而非的回答.实际上后来下来想了一下,用.NET5 提供的Source Generator其实可以很方便的实现接口集成.今 ...

随机推荐

  1. 某IT校招笔试

    前言 博主明天上午9点还有面试,今天突然看到某大牌IT公司笔试题目,必须做一下了 题目 1.假设把整数关键码K散列到N个槽列表,以下哪些散列函数是好的散列函数 A: h(K)=K/N; B: h(K) ...

  2. cocos2d-x 3.1 集成 云风pbc

    cocos2d-x 3.x版本号变动比較大,从改用cmake管理整个项目,到使用python集成一体化的项目工具. 这些都是我喜欢的.我能够非常easy的在我的ubuntu上面搭建好开发环境,并且根本 ...

  3. Mysql++详解

    MySQL++数据库操作(1).mysqlpp::Connection con(false); //定义了mysql连接对象: (2).con.set_option(new mysqlpp::SetC ...

  4. 3. 表单输入框 在 IE 中 会有 “X” 和 类似wifi图标的图标出现

    原因: IE 自动给 input加了伪类 ::ms-clear 和 ::ms-reveal 解决: input::ms-clear, input::ms-reveal { display: none; ...

  5. 开启新的activity获取它的返回值

    1.开始界面 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  6. SQL Server和MySql获取当前数据库每个表的列数

    Sql server:(连接数据库后,点击当前数据库再新建查询) select count(c.name),o.name from syscolumns c left join sysobjects ...

  7. cdoj 1134 男神的约会 状压dp

    题目链接 给一个10*10的方格, 每个格子里面有0-9,走到一个格子, 就要在这个格子待一段时间, 时间长度为这个格子的数字. 从左上角走到右下角, 要求0-9必须每种格子都要走到, 输出最短时间. ...

  8. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  9. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  10. Linux必学的60个命令【转载】

    Linux提供了大量的命令,利用它可以有效地完成大量的工 作,如磁盘操作.文件存  [转载地址]http://blog.chinaunix.net/uid-16728139-id-3154272.ht ...