Space is Key游戏算法原型–HTML5版

昨天我写了一个Space is Key游戏算法原型，使用Flash实现的，其实用HTML5的canvas实现起来也并不难算法上时完全相同的，不用的是如果处理矩形的旋转和键盘事件的处理以及JS面向对象编程

一、矩形旋转算法
canvas本身是又rotate方法的，但是我们值需要旋转矩形部分，需要按下面的步骤来

1. 调用save()方法，保存当前canvas状态
2. 用translate()方法，将舞台的左上角移动到矩形的中心点
3. 调用canvas的rotate方法旋转舞台，这样矩形也就旋转了
4. 用restore()方法，恢复初始的舞台

另外你还可以参考我的HTML5学习笔记，了解更多HTML5绘图知识

二、键盘事件处理
我没有单独侦听canvas的键盘事件，而是利用jquery的keydown方法侦听整个文档的键盘事件

三、JS面向对象编程
如果你对JS面向对象编程不熟悉，请参考我的帖子JavaScript面向对象编程基础[laden666]

效果预览

具体代码如下：

//利用Jquery的$()方法，在文档加载完毕后调用init方法
$(init);
//定义常量 重力加速度和 帧频
const GRAVITY=1;
const FRAME_RATE=30;
const VX=8;

var canvas;
var ctx;
var rect;
var steps;
var jumpVy=-10;

function init(){
        canvas=document.getElementById("game");
        ctx=canvas.getContext("2d");

        //根据jumpVy计算跳起的帧数steps
        calculateStep();

        //创建方块对象
        rect=new Rect(20,20);
        //设置方块的地面
        rect.setGround(300);
        //设置方块的x速度
        rect.vx=VX;
        //根据steps计算反馈的角速度
        rect.va=-180/steps;

        //侦听键盘事件
        $(document).keydown(onStageKeyDown);
        //用setInterval调用loop，刷新屏幕相当于Flash里的ENTER_FRAME事件侦听
        setInterval(loop,1000/FRAME_RATE);
}
//键盘事件处理器
function onStageKeyDown(ke){
        var keycode=ke.which;
        //当方块在地面上时，按下空格键使方块跳起
        if(keycode==32 && !rect.isJumping){
                rect.vy=jumpVy;
                rect.isJumping=true;
        }
}
function calculateStep(){
        //根据重力加速度的公式，上升和下降的时间是一样的，所以重力只计算
        //在上升过程中，速度加至0所消耗的帧数
        steps=jumpVy/ GRAVITY;
        steps=steps*2;
}
function loop(){
        //清除屏幕
        ctx.clearRect(0,0,550,400);
        //更新方块的加速度和坐标
        rect.vy+=GRAVITY;
        rect.update();
        //当方块超出屏幕边界时，折返到0位置
        wrapBoundary(rect);
        //绘制方块
        drawRect(ctx,rect);
        //绘制背景
        drawBackground(ctx);
}
function drawRect(stage,r){
        //绘制rect的方法，请参考我的HTML5基础帖http://bbs.9ria.com/thread-102838-1-2.html
        stage.save();
        stage.fillStyle=r.color;
        stage.translate(r.x,r.y);
        stage.rotate(r.rotation*Math.PI/180);
        stage.fillRect(-r.width/2,-r.height/2,r.width,r.height);
        stage.restore();
}
function drawBackground(stage){
        stage.fillStyle=rect.color;
        stage.fillRect(0,rect.ground,550,400-rect.ground);
}
function wrapBoundary(r){
        if(r.x>550){
                r.x=0;
        }
}
//定义Rect类，
function Rect(width,height){
        this.width=width;
        this.height=height;
        this.x=0;
        this.y=0;
        this.rotation=0;
        this.color="#033502";

        this.vx=0;
        this.vy=0;
        this.va=0;

        this.isJumping=false;
        this.ground=0;

        this.setGround=function(value){
                this.ground=value;
                this.y=this.ground-this.height/2;
        }
        this.update=function(){
                //更新方块的坐标
                this.x+=this.vx;
                this.y+=this.vy;
                //如果方块跳起来，同时旋转方块
                if(this.isJumping){
                        this.rotation+=this.va;
                }
                //落地后设置跳起_isJumping为false
                if(this.y>this.ground-this.height/2){
                        this.y=this.ground-this.height/2;
                        this.isJumping=false;
                }
        }

}
function trace(msg){
        console.log(msg);
}

 源码下载