<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>Follow Mouse</title>

    <script type="text/javascript" src="utils.js"></script>

    <script type="text/javascript" src="ball.js"></script>

    <style type="text/css">

        body{background-color: silver;}

        #canvas{background-color: black;}

    </style>

</head>

<body>

    <canvas id="canvas" width="400" height="400"></canvas>

    <textarea name="" id="log" cols="30" rows="10"></textarea>

    <script type="text/javascript">

        window.onload=function(){

            var canvas=document.getElementById("canvas"),

                context=canvas.getContext("2d"),

                ship=new Ship(),

                vr=0,

                vx=0,

                vy=0,

                thrust=0;

            ship.x=canvas.width/2;

            ship.y=canvas.height/2;

            window.addEventListener("keydown", function(event){

                switch(event.keyCode){

                    case 37:

                        vr=-3;

                        break;

                    case 39:

                        vr=3;

                        break;

                    case 38:

                        thrust=0.05;

                        ship.showFlame=true;

                        break;

                }

            }, false)

            window.addEventListener("keyup", function(){

                vr=0;

                thrust=0;

                ship.showFrame=false;

            }, false);

            (function drawFrame(){

                window.requestAnimationFrame(drawFrame,canvas);

                context.clearRect(0,0,canvas.width,canvas.height);

                ship.rotation+=vr*Math.PI/180;

                var angle=ship.rotation,

                    ax=Math.cos(angle)*thrust,

                    ay=Math.sin(angle)*thrust,

                    left=0,

                    right=canvas.width,

                    top=0,

                    bottom=canvas.height;

                vx+=ax;

                vy+=ay;

                ship.x+=vx;

                ship.y+=vy;

                if (ship.x-ship.width/2>right) {

                    ship.x=ship.width/2;

                }else if(ship.x+ship.width/2<left){

                    ship.x=right+ship.width/2;

                }

                if (ship.y-ship.height/2>bottom) {

                    ship.y=top-ship.height/2;

                }else if(ship.y<top-ship.height/2){

                    ship.y=bottom+ship.height/2;

                }

                ship.draw(context);

            }())

        }

    </script>

</body>

</html>
function Ship(){

    this.x=0;

    this.y=0;

    this.width=25;

    this.height=20;

    this.rotation=0;

    this.showFlame=false;

}

Ship.prototype.draw=function(context){

    context.save();

    context.translate(this.x,this.y);

    context.rotate(this.rotation);

    context.lineWidth=1;

    context.strokeStyle="white";

    context.beginPath();

    context.moveTo(10,0);

    context.lineTo(-10,10);

    context.lineTo(-5,0);

    context.lineTo(-10,-10);

    context.lineTo(-5,0);

    context.lineTo(-10,-10);

    context.lineTo(10,0);

    context.stroke();

    if(this.showFlame){

        context.beginPath();

        context.moveTo(-7.5,-5);

        context.lineTo(-15,0);

        context.lineTo(-7.5,5);

        context.stroke();

    }

    context.restore();

}

html5 飞船动画的更多相关文章

  1. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  2. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  3. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  4. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  5. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  6. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  7. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  8. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. 30几个HTML5经典动画应用回顾 让你大饱眼福

    周末大放送,让我们来回顾一下HTML5经典动画应用,一定会让你大饱眼福. 1.HTML5 Canvas画板画图工具 可定义笔刷和画布 HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这 ...

随机推荐

  1. SQL Server调优系列进阶篇 - 如何重建数据库索引

    随着数据的数据量的急剧增加,数据库的性能也会明显的有些缓慢这个时候你可以考虑下重建索引或是重新组织索引了. DBCC SHOWCONTIG('表名') 可以查看当前表的索引碎情况. 重建索引 方法一: ...

  2. JS基本类型和引用类型的值

    JS中可以把变量分成两部分,基本类型和引用类型. 基本类型比较简单,包括:Undefined.Null.Boolean.Number和String,基本类型值就是简单的数据段:引用类型值可能由多个值构 ...

  3. 19_高级映射：一对多查询（使用resultMap）

    [需求] 查询订单以及订单明细的信息. 确定主查询表:订单表orders 确定关联查询表:订单明细表 orderdetail 在一对一查询的基础上添加订单明细表关联即可. [分析] 使用resultM ...

  4. 代码版本管理/SVN/Git

    代码版本管理 一.SVN 1.SVN diff(create patch) 遇到了一个问题: Index: 通信协议.doc ===================================== ...

  5. python 安装mysql 客户端遇到的问题

    一. Win7 64位编译Python扩展解决”error: Unable to find vcvarsall.bat”问题   系统上安装有Visual Studio 2010以及相应的SDK,然后 ...

  6. Java7 switch新特性

    在Java7之前,switch只能匹配整数值,和字符:而Java7添加了字符串的匹配特性. 代码如下: package blog; public class Main { public static ...

  7. c++中动态尾随内存的技巧和定位new

    c 和 c++ 最大的特点就是对内存的自由操作,数据类型,其实都是对内存的一种解释方式.C语言中常用的一个技巧就是尾随数据,网络编程中经常会用到这个特性, 特别是以前写完成端口的时候,这个特性肯定是会 ...

  8. CENTOS7 使用网络管理器配置静态IP地址

    CENTOS7 的网络配置和CENTOS6有些不同. 如果你想要使用网络管理器来管理该接口,你可以使用nmtui(网络管理器文本用户界面),它提供了在终端环境中配置配置网络管理器的方式. 在使用nmt ...

  9. PHPStrom 使用技巧以及基本设置教程【更新完结】

    本博文由北京乐学一百在线教育科技有限公司平台开发组成员提供,在此表示感谢,截图来源于Tower,热力推荐的一款不错的办公工具. 1.SVN链接上的条件下,修改子文件,父文件夹以及祖辈文件夹变色设置:​ ...

  10. Ajax请求过程中显示“进度”的简单实现

    Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击 ...