一个简单的基于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小游戏的更多相关文章
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- 两个Canvas小游戏
或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧
之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...
- 并发编程概述 委托（delegate） 事件（event） .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类，支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节：SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- [Python3 练习] 007 简单的猜数字小游戏
题目:简单的猜数字小游戏 (1) 描述 程序随机生成一个数字,玩家用键盘输入所猜数字,在规定次数内猜对为胜. (2) 要求 程序随机生成一个 1 到 100 的自然数 有 7 次机会去猜 机会用尽之前 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(五)——一步一步教你如何撸Dapr之状态管理
状态管理和上一章的订阅发布都算是Dapr相较于其他服务网格框架来讲提供的比较特异性的内容,今天我们来讲讲状态管理. 目录:一.通过Dapr实现一个简单的基于.net的微服务电商系统 二.通过Dapr实 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(九)——一步一步教你如何撸Dapr之OAuth2授权
Oauth2授权,熟悉微信开发的同学对这个东西应该不陌生吧.当我们的应用系统需要集成第三方授权时一般都会做oauth集成,今天就来看看在Dapr的语境下我们如何仅通过配置无需修改应用程序的方式让第三方 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十)——一步一步教你如何撸Dapr之绑定
如果说Actor是dapr有状态服务的内部体现的话,那绑定应该是dapr对serverless这部分的体现了.我们可以通过绑定极大的扩展应用的能力,甚至未来会成为serverless的基础.最开始接触 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十五)——集中式接口文档实现
之前有小伙伴在评论区留言说如何集成swagger,最开始没有想透给了对方一个似是而非的回答.实际上后来下来想了一下,用.NET5 提供的Source Generator其实可以很方便的实现接口集成.今 ...
随机推荐
- Glog
Glog的简单入门,glog虽然在配置参数方面比较麻烦,但是在小规模程序中,由于其简单灵活,也许会有优势. 0, glog 是google的开源日志系统,相比较log4系列的日志系统,它更加轻巧灵活 ...
- [01] Preparation - Sitecore Installment
Sitecore CMS 是一套内容管理系统商业软件,其底层平台依托于微软.net技术.由于最近的一个项目采用了这个平台,所以有机会接触到了这个产品. 虽然接触该产品已有一段时间,但总感觉对这个产品缺 ...
- zoj 1962 How Many Fibs?（字符串化为数字处理）
事实证明还是,题目拿到手之后,还是还是好好动手划一下比较好,不然直接想打哪!打到哪!很容易乱掉的.将数字倒着弄成字符串比较好处理. #include<stdio.h> #include&l ...
- JavaWeb学习过程 之c3p0的使用
这几天在学习使用MVC模式来做几个小项目,在学习的过程中,用到了数据库连接池.便特意去学习了一下. 一.谈一谈为什么要使用数据库连接池 在开发基于数据库的web程序时,传统的模式(在servlet,b ...
- Snap.svg中transform旋转值的“r+数组”表现形式
Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...
- ASP.NET MVC Framework
ASP.NET MVC Framework是微软在ASP.NET中所添加的一组类库,这组类库可以使用Model-View-Controller的设计模式来开发ASP.NET的应用程序.它与现有的ASP ...
- JS的单例模式
维基百科对单例模式的介绍如下: 在应用单例模式时,生成单例的类必须保证只有一个实例的存在,很多时候整个系统只需要拥有一个全局对象,才有利于协调系统整体的行为.比如在整个系统的配置文件中,配置数据有一个 ...
- Sublime 编辑器主题
Sublime主题分为两种 一种是编辑框中的代码的颜色 另一种是编辑器本身的颜色(不只是颜色哟 Sublime编辑器左边侧边栏的字很小对不对 !有了主题就可以改) 这个主题叫做Soda http ...
- C++标准程序库的输入输出流(I/O Stream)复制文件（4种方法）
使用C++标准程序库的输入输出流(I/O Stream)复制文件,存在许多的方法, 方法一:逐个字符复制#include < fstream > std::ifstream ...
- 最佳实践：Windows Azure 网站 (WAWS)
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理Sunitha Muthukrishna 撰写. Windows Azure 网站 (WAWS) 允许您在 Windows ...