blessdyb
- 浏览: 236407 次
- 性别:
- 来自: 北京
-
最新评论
-
李君寻：
内容挺好的，这是widget开发项目的大概框架吗？
Widget应用的基本组成 -
lliiqiang：
首先要有条件，算法只是提升系统而已。如果小范围变化基本可以尝试 ...
几个常用的检索排序算法的JavaScript实现 -
blessdyb：
aikki_gogh 写道最近正在研究canvas,求util ...
Canvas做游戏实践分享(十) -
aikki_gogh：
最近正在研究canvas,求utils.js和arrow.js ...
Canvas做游戏实践分享(十) -
Trinea：
请问你博客百度的广告怎么加的，不会是手动每天文章添加js吧
HTML5 WebGame开源工具之impactjs
文章列表
【转】常用到的特殊符号整理
- 博客分类：
- 前端
■特殊符号：·⊙①⊕◎Θ⊙●○¤㊣㈱＠の■□★☆◆◇◣◢ ◤◥▲△▼▽⊿◢ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊▋▌▍▎▏■ ▓ 回 □ 〓≡↑↓→←↘↙♀♂┇┅‖$ @ * & # ※ 卍 卐 ∞Ψ §∮ № ⌒ ＊? ? ? ? ? ? ? ? ? ? ? ? ◆ ◇ ? ◎ ...
随着浏览器（PC/Mobile）功能的不断增强，特别是近几年来HTML5系列技术，CSS3及JS引擎的快速发展，使用传统的Web前端开发技术来开发网页已经成为了一个新的趋势。就我个人个遇到的几个框架及近期别人推荐的进行一些分析。主要针对使用HTML+CSS+JavaScript技术来开发游戏的技术做一分类，其它第三方语言实现的中间件平台只在最后简要介绍。
HTML Web Games的游戏开发，目前主要有以下三类方式：
纯DOM+CSS的传统方式实现游戏
Canvas/WebGL & CSS3 实现游戏
SVG方式开发游戏
当然，介于这三 ...
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
window.orientation属性与onorientationchange事件
window.orientation
:这个属性给出了当前设备的屏幕方向， ...
按钮是天生为移动平台而生的：移动平台上的按钮往往被设计得比较大以便用户点击——与此形成鲜明对比的就是移动平台上的超链接。移动平台与桌面平台在人机交互上有显著的不同，移动平台的输入工具为用户的手 ...
做为一个Mobile Web开发者，我们除了拥有真机外（这个对于大多数团队不现实呀，IT民工们真心买不起），更重要的就是先在模拟器/仿真器上来测试了。在此列举所需要的所有开发环境：
SDK，仿真器，模拟器
iOS SDK(XCode), 最好的IDE与仿真器(没有之一
)
Android SDK
Opera Mobile,最快的仿真器
Opera Mini ， 一个基于Java Applet的浏览器模拟器
WP7 SDK
以上只是列举了主流的几款，更全的参见（http://www.mobilexweb.com/emulators），
混合编程工具
...
再挖一个坑
，canvas的游戏开发基础暂时没时间弄了，等过一段时间闲下来了做一下。工作需要，补上一系列Mobile Web 开发的基础知识总结与相关文章的翻译。本系列针对传统的桌面浏览Web前端开发者。
我们先来一个基础的HTML5的网页框架，如下
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本HTML5网页架构</title>
...
近期工作需要，开始复习相关的检索排序算法。对常用的几个算法，自行进行了JavaScript实现：
顺序查找
最朴素的查询
/**
@data 目标元素所在的数组
@target 目标查询元素
@return 目标查询元素所在的下标
*/
function sequenceSearch(data,target){
var resultIndex=-1;
for(var i=0;i<data.length;i++){
if(target==data[i]){
resultIndex=i;
...
7 缓冲和弹跳
下面我们来介绍一下很常用的缓冲和弹跳的处理。在我们实现复杂运动时，这两种技术会处理大多种的情况。缓冲与弹跳非常均是用来处理将一个对象从已知起点移动到给定终点的技术——缓冲是指对象滑动到目标位置并停止，而弹跳是指对象做有摩擦力的弹簧振子运动。它们有一些共同点：
已知初始位置与目标位置
运动参数与距离成正相关
具体原理是缓冲的速度大小与距离成正相关，而弹跳的加速度大小与距离成正相关。
7.1 缓冲处理
缓冲有两大类，缓冲进入到某一种与缓冲离开某一点;同时还有一些具体的运动属性，如以正弦形式缓冲，以弹跳形式缓冲等。我们主要讨论缓冲 ...
项目有需求，需要在服务器端把APK信息提取出来后Push到移动终端。虽然APK是zip文件的格式，但直接unzip后得到的AndroidManifest.xml文件是被加密过后的乱码。这就需要使用第三方工具android-apktool来实现此功能。
服务器为CentOS 5.7. 前提是需要JRE6的支持，如果没有，到Oracle下载（http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u31-download-1501634.html
）。
确认JRE环境后，到Android-apkt ...
6 用户交互——移动物体
游戏的核心在于交互，很多时候需要用户动手来操作游戏对象，很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体，在画布上扔物体等。
6.1 选择与释放对象
使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下，鼠标移动及鼠标释放。这涉及到三个鼠标事件：mousedown,mousemove,mouseup。我们按此思路，仍旧以前面介绍的小球系统来实现。
首先需要检测到鼠标是否进入到小球中，为了简化处理，我们把小球看成一个与其外接矩形等效的图形。先得到小球在画布中所占据的位置。如下代码：
b ...
反弹
反弹的处理原理很简单，在运动对象碰到边界后，我们将其放置到与边缘紧貼的位置，之后将其方向反向即可（因为边界是水平或竖直的，我们只需要考虑一个方向上的分速度反向，如果碰撞面是倾斜的，就需要 ...
5.边界控制与摩擦力
在大多数的游戏设计中，会有环境边界控制来帮助我们保证画布中的对象在运动的过程中不会脱离画面。同时，对象的运动环境很少会是真空的情况，所以就会存在着摩擦力阻碍物体的速度变化。
5.1 环境边界控制
如果我们关注的运动对象在移动的过程中消失在了视窗之外，我们有两大类的选择：一种是将对象重新移动到当前的视窗中或者不再关注此对象，另一种方式是使当前的视窗跟随运动对象移动。在程序实现上，这两类很相近。下面我们主要针对第一类来进行分析。
设置边界
运动对象的运动边界可以是整个Canvas视窗，也可以只是其中的一 ...
4.2 加速度
加速度是改变速度大小及方向的一个属性，在物体受力的过程中，会产生加速度来改变速度的大小及方向。加速度的处理与速度的处理非常类似。
一维坐标系统下的加速度
一维坐标系统下加速度的实现很简单，我们仍然使用小球系统来模拟，为小球对象添加X轴与Y轴上的加速度属性。实现起来有两步：初始化加速度值，在每一帧开始时为速度增加加速度的值。如下：
ball.ax=INITIAL_ACCELERATE_VELOCITY;
ball.vx+=ball.ax; //将此句放置于animationLoop中
二维坐标系统下的加速度
与二维坐标系统下的速度处理方 ...
4.1速度
运动最基本的属性就是速度。注意这里的速度是物理中所说的速度(Velocity)，它包括大小及方向两部分组成。在动画中，如果我们已知当前一帧对象的位置以及速度，那在下一帧我们就能计算出物体所在的位置。在大多数情况下，速度的大小是按像素/帧为单位的，但实际运行中，由于浏览器的帧率不稳定性，会出现小的差别。如果应用对于统一帧率要求很严格，可以使用其它的方式来处理，之后我们会介绍这方面的知识。
向量
物理中我们使用向量来表示速度，向量包括大小和方向两个属性。其大小是一个非负整数。向量是没有位置的，它只能表示在某一方向上大小的改变快慢。两个向量在大小和方向都相同的 ...
3.5 渐变
Canvas的渐变有两各路 ，线性或径向。在使用gradient时，注意使用createLinearGradient与createRadiusGradient所创建的fillStyle均只在其指定的矩形/圆环区域内生效，如果要fill的图形处于gradient对象之后，则fill后的区域不会出现预料的渐变效果。
如下代码，演示了如何使用渐变：
window.onload=function(){
var canv ...