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

最新推荐文章于 2022-06-15 10:46:49 发布

iteye_8466

最新推荐文章于 2022-06-15 10:46:49 发布

阅读量1k

点赞数

分类专栏： HTML5 动画游戏 javascript 文章标签： html5 游戏 html javascript canvas ViewUI

HTML5 动画游戏同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

欢迎访问博主的网站：[url]http://www.108js.com[/url]
查看效果：[url]http://www.108js.com/article/article3/game/ex1/exam.html[/url]

效果图：
[img]http://dl2.iteye.com/upload/attachment/0097/8010/ee30220a-6775-31c9-b338-707bae41dc57.gif[/img]

一、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
代码就不贴了，请下载。