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

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

html5游戏htmljavascript 
阅读更多
效果图：


点击查看效果：
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
0
顶
0
踩
分享到：
| HTML5 Canvas学习笔记(4)游戏界面的淡入淡 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics