效果图：
点击查看效果：
http://www.108js.com/article/canvas/5/exam.html
欢迎访问博主的网站：
http://www.108js.com
代码：
<!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>
下载源码：
- 大小: 3.4 KB
分享到：
相关推荐
这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分，即色块的绘制与移动。 首先，我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...
HTML5 Canvas技术是Web开发中的一个关键特性，它允许开发者在网页上绘制图形，实现动态交互效果。在这个“HTML5 Canvas趣味飞船捡金币小游戏...对于想要学习或提升HTML5游戏开发技能的人来说，这是一个极好的实践案例。
学习和理解这个项目，开发者可以深入理解HTML5 Canvas的绘图原理，熟悉jQuery的事件处理和DOM操作，同时掌握如何结合CSS创建吸引人的视觉效果。这有助于提升Web前端开发技能，特别是对于想要创建互动性较强的游戏或...
首先，canvas是HTML5新增的一个元素，通过JavaScript来操纵其上下文（canvas.getContext('2d')），可以实现绘图、动画和游戏等功能。在这个乒乓球游戏中，canvas将被用来渲染游戏场景，包括球拍、乒乓球以及游戏背景...
【Canvas仿切水果小游戏代码.zip】是一个包含使用HTML5 Canvas技术实现的仿切水果小游戏的源代码包。这个小游戏借鉴了流行的"水果忍者"，玩家通过手势在屏幕上划动来切割飞过的水果，获得分数。它展示了如何利用...
2. **Web Storage**：HTML5的localStorage或sessionStorage使得数据可以在本地存储，2048游戏的得分、用户进度等信息可以通过这些API持久化。 3. **事件监听**：HTML5支持更丰富的用户交互事件，如touchstart、...
这是一个基于HTML5 Canvas技术开发的键盘控制游戏，游戏主题类似于“小鬼吃人”，与经典的“贪吃蛇”游戏有异曲同工之妙。在这个游戏中，玩家通过键盘操作一个角色，目标是让这个角色在游戏环境中移动并吞噬特定的...
总的来说，HTML5见缝插针手机游戏结合了HTML5、CSS3和jQuery的优势，通过Canvas实现游戏画面，用jQuery处理交互和动画，CSS提供视觉效果，共同构建了一个具有挑战性和趣味性的手机游戏。对于学习和理解HTML5游戏开发...
HTML5支持`<img>`标签直接嵌入图像，同时`<canvas>`元素则可以动态生成图像，比如游戏中的动态效果。 然后是`js`文件夹，其中包含的是JavaScript代码，这是实现游戏逻辑的关键部分。HTML5的`<script>`标签可以引用...
这个"html5箭头射击网页小游戏代码.zip"压缩包包含了一个基于HTML5构建的箭头射击游戏的源代码，对于学习HTML5编程、游戏开发或者想要进行二次开发的人来说是一个宝贵的资源。 首先，`index.html`是网页的主文件，...
HTML5是一种先进的网页标记语言，它是HTML的第五个版本，主要设计目的是为了增强网页的交互性和多媒体内容支持。"别踩白块儿"是一款流行的微信小...对于想要学习HTML5游戏开发的初学者来说，这是一个很好的实践案例。
5. 数据存储：HTML5的Web Storage（包括localStorage和sessionStorage）可能用于存储玩家的游戏进度或者得分，以便在页面刷新后还能保留这些信息。 6. 游戏逻辑：JavaScript负责处理游戏的逻辑，例如碰撞检测...
本项目“飞机大战游戏”就是一款运用HTML5、CSS3和JavaScript技术编写的轻量级游戏，非常适合前端初学者进行实践学习。下面我们将详细探讨这三个关键技术在游戏开发中的应用。 首先，HTML5是构成网页内容的基础，它...
"html5飞机打字小游戏源码.zip" 是一个包含HTML5游戏源代码的压缩包，适合那些对编程和游戏开发感兴趣的初学者或者有经验的开发者进行学习和实践。 首先，`index.html` 是网页的主入口文件，它定义了网页的基本结构...
总的来说，这个压缩包提供了一个实际的HTML5游戏示例，对于学习和理解HTML5游戏开发、Canvas绘图、JavaScript编程以及微信小游戏的开发流程都具有很高的参考价值。无论是初学者还是经验丰富的开发者，都能从中受益，...
在这个游戏中，`<canvas>`元素尤其关键，它是HTML5的一个重要特性，允许开发者在浏览器上绘制图形，从而实现动态的游戏画面。通过JavaScript，我们可以控制`canvas`上的绘图操作，实现游戏中的动画效果，如热气球的...
这个“html5打乒乓球小游戏代码.zip”压缩包包含了一个使用HTML5技术开发的简单乒乓球游戏的源代码，适合初学者学习和爱好者探索。游戏的核心是通过JavaScript实现动态效果和用户交互。 在HTML5中，`<canvas>`元素...
HTML5弹珠砖块游戏源代码.zip是一款基于HTML5、CSS3和JavaScript技术构建的互动游戏资源，适合网页开发者和游戏爱好者学习与实践。这款游戏借鉴了经典的弹珠台玩法，玩家通过控制挡板来反弹弹珠，消除屏幕上的砖块以...
此外，`<canvas>`元素是HTML5游戏开发的核心，它是一个可绘制图形的画布，允许通过JavaScript来动态绘制2D和3D图像，实现游戏场景的构建。 在`index.html`中，可能会包含`<script>`标签来引用外部JavaScript文件，...