基于HTML5的游戏不会出现在浏览器上？

Question

Recently, i made a game on codepen.io called flappy bird an it was working fine there but when i tried to show it on my website it doesn't show up anything. 最近，我在codepen.io上做了一个名为flappy bird的游戏，它在那里工作得很好但是当我试图在我的网站上显示它时它没有显示任何东西。

Can someone tell what's missing or what is the problem in my code. 有人可以告诉我的代码中缺少什么或者问题是什么。 here is the code ( sorry it's too long , i know but i need help ): 这是代码（抱歉，它太长了，我知道，但我需要帮助）：

<html>
<head>
<style type="text/css">
#stage {
    display:block;
    border:solid 1px #000;
    margin:auto;
}
body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

  background:#333;
}
</style>
<script type="text/javascript">
window.requestAnimationFrame = (function(){
  return window.requestAnimationFrame || 
    window.mozRequestAnimationFrame ||                            
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(cb){
      return setTimeout(cb, 1000/60);
    };
})()

var can = document.getElementById("stage"),
    ctx = can.getContext('2d'),
    wid = can.width,
    hei = can.height,
    player, floor, pillars, gravity, thrust, running, 
    rainbows, colider, score, gPat, pPat, trans, termVel, pillGap, 
    pillWid, pillSpace, speed, stars, high,
    sprite = document.createElement("img");
sprite.src = "http://www.cutmypic.com/uploads/title85083782.png";
//sprite.src = "http://i.stack.imgur.com/Vy3qB.gif";
sprite.onload = function(){
    sprite.style.height = 0;
    loop();
};
sprite.width = 34;
sprite.height = 21;


document.body.appendChild(sprite);

function init() {
    high = localStorage.getItem("high") || 0;

    player = {
        x: 1 / 3 * wid,
        y: 2 / 5 * hei,
        r: 13,
        v: 0
    };
    speed = 2.5;
    floor = 4 / 5 * hei;
    pillars = [];
    rainbows = [];
    stars = [];
    gravity = .30;
    thrust = gravity * -21;
    termVel = -thrust + 2;
    running = false;
    colider = false;
    score = 0;
    trans = 0;
    pillGap = 135;
    pillWid = 55;
    pillSpace = pillWid*3;
    pPat = ctx.createPattern((function(){
      var can = document.createElement("canvas"),
          ctx = can.getContext("2d");

        can.width = 60;
        can.height = 60;

        ["green", "green", "green", 
         "#3b5998", "green", "#3b5998"].forEach(function(color, i){
           ctx.fillStyle = color;

           ctx.beginPath();
           ctx.moveTo(i*10, 0);
           ctx.lineTo(i*10+10, 0);
           ctx.lineTo(0, i*10+10);
           ctx.lineTo(0, i*10);
           ctx.closePath();
           ctx.fill();

           ctx.beginPath();
           ctx.moveTo(i*10, 60);
           ctx.lineTo(i*10+10, 60);
           ctx.lineTo(60, i*10+10);
           ctx.lineTo(60, i*10);
           ctx.closePath();
           ctx.fill();
         });

      return can;
    })(), "repeat");
    gPat = ctx.createPattern((function(){
        var can = document.createElement("canvas"),
            ctx = can.getContext("2d");

        can.width = 32;
        can.height = 32;
        ctx.save();
        ctx.translate(16,16);
        ctx.rotate(Math.PI/4);
        ctx.fillStyle = "#79CDCD";
        ctx.fillRect(-64,-64,128,128);
        ctx.fillStyle = "#528B8B";
        ctx.fillRect(-8,-64,8,128);
        ctx.fillRect(14.5,-64,8,128);
        ctx.restore();

        return can;
    })(), "repeat");
}


function render() {
    trans -= speed;
    rainbows = rainbows.filter(function(r){
        r.x -= speed;
        return r.x > -speed;
    });
    if (trans % speed === 0){
        rainbows.push({x:player.x-10, y:player.y - (trans%50/25|0)*2 - 1});
    }

    stars = stars.filter(function(s){
        trans % 10 || (s.r += 1);
        s.x -= speed;
        return s.x > -speed && s.r < 10;
    });
    if(trans % 20 === 0){
      stars.push({
        x: Math.round(Math.random()*(wid-50)+100), 
        y:Math.round(Math.random()*floor), 
        r:0
      });
    }


    // backdrop
    ctx.fillStyle = "#418bbc";
    ctx.fillRect(0, 0, wid, hei);

    //stars
    ctx.fillStyle = "white";
    stars.forEach(function (s){
        ctx.fillRect(s.x, s.y - s.r-2, 2, s.r/2);
        ctx.fillRect(s.x - s.r-2, s.y, s.r/2, 2);
        ctx.fillRect(s.x, s.y+s.r + 2, 2, s.r/2);
        ctx.fillRect(s.x+s.r + 2, s.y, s.r/2, 2);

        ctx. fillRect(s.x + s.r, s.y + s.r, 2, 2);
        ctx. fillRect(s.x - s.r, s.y - s.r, 2, 2);
        ctx. fillRect(s.x + s.r, s.y - s.r, 2, 2);
        ctx. fillRect(s.x - s.r, s.y + s.r, 2, 2);

    });

    //ground

    ctx.fillStyle = "#2F4F4F";
    ctx.fillRect(0, floor, wid, hei-floor);

    ctx.save();
    ctx.translate(trans, 0);

    //pillars
    ctx.fillStyle = pPat;
    ctx.strokeStyle = "#ccc";
    ctx.lineWidth = 2;
    for (var i = 0; i < pillars.length; i++){
        var pill = pillars[i];
        ctx.fillRect(pill.x, pill.y, pill.w, pill.h);
        ctx.strokeRect(pill.x, pill.y, pill.w, pill.h);
    }

    // stripe
    ctx.fillStyle = gPat;
    ctx.fillRect(-trans, floor+2, wid, 15);
    ctx.restore();

    //rainbowwwwws
    rainbows.forEach(function(r){

        ["red","orange","blue","green","blue","indigo"].forEach(function(color, i){
            ctx.fillStyle = color;
            ctx.fillRect(r.x - speed, r.y-9 + i*3, speed+1, 3);
        });
    });

    //player
    ctx.save();
    ctx.translate(player.x, player.y);
    ctx.rotate(player.v*Math.PI/18);
    ctx.drawImage(sprite, - 17,  - 10);
    ctx.restore();

    ctx.fillStyle = "#97FFFF";
    ctx.fillRect(0, floor, wid, 2);
    ctx.fillStyle = "#2F4F4F";
    ctx.fillRect(0, floor+1, wid, 1);
    ctx.fillStyle = "#97FFFF";
    ctx.fillRect(0, floor+17, wid, 2);
    ctx.fillStyle = "#2F4F4F";
    ctx.fillRect(0, floor+17, wid, 1);


    //score
    ctx.font = "bold 30px monospace";
    var hScore = "best:" + (score > high ? score : high),
        sWid = ctx.measureText(hScore).width,
        sY = 50;

    ctx.fillStyle = "black";
    ctx.fillText(score, 12, floor + sY + 2);
    ctx.fillText(hScore, wid - sWid - 10, floor + sY + 2);  
    ctx.fillStyle = "white";
    ctx.fillText(score, 10, floor + sY);
    ctx.fillText(hScore, wid - sWid - 12, floor + sY);
}

function adjust() {
    if (trans%pillSpace === 0){
        var h;
        pillars.push({
            x: -trans + wid,
            y: 0,
            w: pillWid,
            h: (h = Math.random() * (floor - 300) + 100)
        });

        pillars.push({
            x: -trans + wid,
            y: h + pillGap,
            w: pillWid,
            h: floor - h - pillGap
        });
    }

    pillars = pillars.filter(function(pill){

        return -trans < pill.x + pill.w;
    });




    player.v += gravity;
    if (player.v > termVel){
        player.v = termVel;
    }
    player.y += player.v;

    if (player.y < player.r) {
      player.y = player.r;
      player.v = 0;
    }

    for(var i = 0; i < pillars.length; i++){
        var pill = pillars[i];
        if (pill.x + trans < player.x + player.r && 
            pill.x + pill.w + trans > player.x - player.r){           

            if (player.y - player.r > pill.y &&
                player.y - player.r < pill.y + pill.h){
                colider = true
                running = false;
                render();
                break;
            }
            if (player.y + player.r < pill.y + pill.h &&
                player.y + player.r > pill.y){
                colider = true
                running = false;
                render();
                break;
            }
            if (!pill.passed && i%2 == 1){
                score++;
                pill.passed = true;
            }
        }
    }

    if (player.y + player.r - player.v > floor) {
        player.y = floor - player.r;
        running = false;
        colider = true;
        render();
    }
}

document.onmousedown = function () {
    if (running) {
        player.v = thrust;
    } else if (!colider) {
        running = true;
    } else {
        if (score > high){
            localStorage.setItem("high", score);
        }
        init();
    }
};

</script>
</head>
<body>
<canvas id="stage" width="400" height="600"></canvas>
</body>

Answer 1

Your calling document.getElementById('stage') before #stage exists in the DOM. 在#stage存在于DOM之前调用document.getElementById('stage') 。

Javascript is run in the order that it is loaded into the page. Javascript按照加载到页面中的顺序运行。 So, you could either move the Javascript to the bottom of your HTML document, or us an onload event listener. 因此，您可以将Javascript移动到HTML文档的底部，也可以移动到onload事件监听器。

In detail, as the page loads, things at the top of the page are pulled in and parsed first. 详细地说，当页面加载时，页面顶部的内容将被拉入并首先进行解析。 When a <script> tag is encountered, the browser automatically runs the Javascript immediately -- before it has reached the body of the page. 遇到<script>标记时，浏览器会立即自动运行Javascript - 在它到达页面主体之前。 Your CodePen was likely set to run the code after the page had loaded completely, but when you moved it all to it's own page you were now running it before load. 您的CodePen可能设置为在页面完全加载后运行代码，但当您将其全部移动到它自己的页面时，您现在正在加载之前运行它。

基于HTML5的游戏不会出现在浏览器上？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-02-13 05:44:50

基于HTML5的游戏不会出​​现在浏览器上？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-02-13 05:44:50

基于HTML5的游戏不会出现在浏览器上？

解决方案1
2 已采纳 2014-02-13 05:44:50