`
128kj
  • 浏览: 600201 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas简单淡入淡出游戏启动界面

阅读更多
欢迎访问博主的网站:http://www.108js.com
查看效果:http://www.108js.com/article/article3/game/ex1/exam.html

效果图:


一、HTML代码:
<!DOCTYPE html>
<html lang='zh'>
<head> 
  <meta charset='gbk' />
  <title>HTML5 Canvas 简单淡入淡出__www.108js.com</title>
  <script src='introState.js'></script>
</head>
<body>
<canvas id='canvas' width='700' height='500'> 你的浏览器不支持canvas</canvas>
</body></html>
<script>
var requestAnimFrame = (function(){
    return window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();

window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame          ||
window.webkitCancelRequestAnimationFrame    ||
window.mozCancelRequestAnimationFrame       ||
window.oCancelRequestAnimationFrame     ||
window.msCancelRequestAnimationFrame        ||
clearTimeout
} )();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var  intro;
var w=canvas.width;
var h=canvas.height;
var timer;
document.onkeydown = function(event){
var code = event.keyCode || event.which;
        if(code==13){
           cancelRequestAnimFrame(timer);
           gameStart();
         }

  }


function init() {
    intro=new introState();
    animation();
}

function animation(){
   intro.update();//更新
   intro.draw(ctx,w,h);//绘制
   timer=requestAnimFrame(animation);
};


function gameStart() {
    alert("游戏开始");
    paintCanvas();
}


function paintCanvas() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
   }

init();
</script>

二、introState.js
代码就不贴了,请下载。
  • 大小: 2.2 KB
1
0
分享到:
评论

相关推荐

    HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

    在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中,我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果,这是一个增强用户体验的重要技巧,尤其在游戏加载、场景切换或过渡效果中。 首先,淡入淡出...

    基于HTML的消消乐游戏.zip

    TweenJS则用于实现平滑的过渡和动画效果,比如元素的淡入淡出或移动。SoundJS处理音频播放,确保游戏音效的正常运作,而PreloadJS则帮助加载和管理游戏资源,如图片、音频文件等。 在这个消消乐游戏中,开发者可能...

    html5 metro 界面

    通过使用`.animate()`方法,开发者可以轻松地创建平滑过渡和动画效果,模仿Windows 8 Metro界面中的滑动、缩放和淡入淡出等动态效果。同时,jQuery的事件处理和选择器功能也能帮助开发者快速响应用户的交互行为,...

    H5小游戏源码 我来帮老师阅卷!.zip

    7. 动画与特效:通过CSS3的动画或者JavaScript实现物体的移动、旋转、淡入淡出等效果,提升游戏的视觉吸引力。 通过分析这个游戏的源码,开发者可以学习到如何组织和管理一个H5游戏项目,以及如何使用HTML5 Canvas...

    H5游戏示范

    5. **Actions**:动作是改变节点属性(如位置、旋转、缩放)的动画效果,如移动、旋转、淡入淡出等,让游戏更具动态性。 6. **Tiled Maps**:对于复杂的游戏地图,Cocos2D支持Tiled地图格式,方便地创建和管理多层...

    飞机大战小游戏.rar

    通过`.animate()`方法,开发者可以实现平滑的移动、缩放、淡入淡出等效果,比如飞机的飞行轨迹、爆炸效果等,增强游戏体验。 4. **Ajax交互**:如果游戏需要在网络环境中获取数据或更新分数,Ajax是理想的选择。...

    Unity2D马戏团游戏素材

    Unity提供了Audio Source和Audio Listener组件来处理音频播放,通过调整各种参数,如音量、淡入淡出效果,可以创造出丰富的听觉体验。 游戏中的交互性往往需要物理模拟。Unity的2D物理引擎能处理碰撞检测和物体运动...

    android动画

    "android动画"这个主题主要涉及到Android系统中对图形元素进行动态变换的技术,这在描述中的应用示例是通过淡入淡出动画来实现图片与登录界面的平滑过渡,就像在微博应用中看到的效果一样。 在Android中,动画可以...

    Android 游戏开发之切换游戏场景特效的实现 源码

    2. **过渡效果设计**:根据游戏风格和需求,设计合适的过渡效果,如淡入淡出、滑动、扭曲、缩放等。这些效果可以通过图形库(如OpenGL ES)或Android的Canvas API来实现。 3. **渲染目标的设定**:使用FBO创建一个...

    Android 仿QQ简易界面(Android studio版,仅供学习参考)

    9. **动画效果**:为了让界面更具动态感,可以添加一些动画效果,如消息发送后的淡入淡出、滑动切换页面的平滑过渡等。这需要了解Android的动画框架,如ObjectAnimator或Transition动画。 10. **版本兼容性**:由于...

    Android水果连连看程序源代码

    2. 动画效果:使用帧动画或者Canvas进行图形绘制,实现消除后的动画效果,如淡入淡出、缩放等。 3. 音效处理:利用MediaPlayer类加载音频文件,控制播放、暂停和停止,根据游戏事件触发相应音效。 4. 界面交互:监听...

    手势滑动引导界面

    6. **动画效果**:为了提升用户体验,可以在滑动页面之间添加平滑过渡的动画效果,如淡入淡出、缩放等。这可以通过`ViewPager.PageTransformer`接口实现。 7. **交互设计**:引导界面不仅仅是展示,还应鼓励用户...

    html5-video-playlist-prototype:HTML5视频播放列表原型,以测试无缝视频过渡的方式

    4. **Canvas渲染**:HTML5的Canvas元素可以用于动态渲染视频帧,这可能被用于实现更复杂的过渡效果,比如淡入淡出或者自定义过渡动画。通过`canvas.getContext('2d')` 获取2D渲染上下文,并使用`drawImage()` 方法将...

    Python GUI tkinter 开发连连看小游戏 源码

    9. **动画效果**:连连看游戏中的消除图标通常会有动画效果,例如淡入淡出或滑动消失。Tkinter的`after`方法可以用来实现定时更新,从而创建动画效果。 10. **错误处理**:良好的错误处理能提升用户体验,例如处理...

    jQuery仿iphone手机秒表计时器代码.zip

    此外,为了增加用户体验,开发者可能会利用jQuery的动画功能,如淡入淡出效果,来增强计时器启动和暂停时的视觉反馈。还可以通过监听按钮的点击事件,使用`.on('click', function() {...})`来实现按钮的交互逻辑。 ...

    Phaser_Boilerplate:桌面和移动 HTML5 游戏框架“Phaser”的样板

    4. **音频管理**:Phaser 支持多种音频格式,包括 MP3、WebM 和 OGG,可以轻松地播放背景音乐和音效,并且提供了音量控制、淡入淡出等效果。 5. **状态管理**:游戏通常包含多个阶段,如加载、主菜单、游戏关卡等。...

    集画图工具 启动画面 对话框弹出效果于一身(自己做的)

    根据标题"集画图工具 启动画面 对话框弹出效果于一身(自己做的)",我们可以推断这是一个自定义的软件,它集成了画图功能、启动界面以及对话框的动态展示效果。这涉及到图形用户界面(GUI)设计、图形处理、事件...

    15款手机端打开菜单动画过渡特效.zip

    在移动设备上,用户体验往往受到屏幕尺寸和交互方式的限制,因此设计师们常常采用各种创新的动画效果来提升用户界面的吸引力和可用性。"15款手机端打开菜单动画过渡特效.zip"这个压缩包中包含的就是一系列专为手机端...

    安卓Android源码——连连看.zip

    - Android的Animation类库支持简单的动画效果,如棋子消除时的淡入淡出、棋盘刷新等。 - 动画效果可以增强用户体验,使游戏更生动。 四、性能优化 1. **内存管理** - 对于复杂的棋盘逻辑,避免内存泄漏和过度...

Global site tag (gtag.js) - Google Analytics