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
代码就不贴了，请下载。
查看效果： 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
代码就不贴了，请下载。