HTML5 Canvas学习笔记(5)游戏得分动画

最新推荐文章于 2024-10-30 20:01:39 发布

iteye_8466

最新推荐文章于 2024-10-30 20:01:39 发布

阅读量276

点赞数

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

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

32 篇文章 1 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

效果图：
[img]http://dl2.iteye.com/upload/attachment/0098/5168/e0519189-e6c2-35a7-88db-cc0fc074af20.gif[/img]

点击查看效果：
[url]http://www.108js.com/article/canvas/5/exam.html[/url]

欢迎访问博主的网站：[url]http://www.108js.com[/url]

代码：
<!doctype html>
<html>
<head>
<title>
游戏得分动画
</title>
</head>
<canvas id = "canvas" style = "background-color: black;" width="800" height="650"></canvas>
<script>
var requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var time = 500;
var score1 = 0;
var score2 = 0;
var numHit=30;
var lose=true;

function update() {
ctx.clearRect(0,0,canvas.width,canvas.height);
if (lose) {
ctx.font = "50px Arial";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.fillText("YOU LOSE",canvas.width / 2,canvas.height / 2);
ctx.font = "25px Verdana";
ctx.fillText("Balls hit : " + numHit,canvas.width / 2,canvas.height / 2 + 200);
ctx.fillText("Time : " + time,canvas.width / 2,canvas.height / 2 + 250);
score1 = (time + time * 0.75) + (numHit * 1000);
if (score2 < score1) {
score2 += 5;
}
ctx.fillText("Score : " + score2, canvas.width / 2, canvas.height / 2 + 300);
}
requestAnimFrame(update);
}
update();
</script>
</html>
下载源码：