Question

我有一个乒乓球游戏，我希望在网站上发布。有没有办法创建一个可以托管我的代码的免费网站？我首先尝试了wordpress.com，但他们的html片段不起作用，而且，我不想要一个博客，只是我的游戏，覆盖整个页面。

这是游戏：

命令：

用 w 和 s 控制左桨用↑和↓

控制右桨

按输入重新启动
按 space 暂停
点击 a 打开左侧球拍的自动模式

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div id="gameArea">
  <canvas id="canvas"></canvas>
  <div id="statsPanel"></div>
</div>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
    html, body {
    background: #171700;
}

canvas {
    position:fixed;
left:0;
top:0;
width:100%;
height:100%;
    background: #171700;
    
}
</style>
<script>
var ar=new Array(32, 33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
 var key = e.which;
  //console.log(key);
  //if(key==35 || key == 36 || key == 37 || key == 39)
  if($.inArray(key,ar) > -1) {
      e.preventDefault();
      return false;
  }
  return true;
});
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight-50;

rectw = 6.333;
recth = 50;

var player1 = {
    x: 50,
    y: canvas.height/2-recth/2,
    velY: 0,
    velX: 0,
    color: getRandomColor(),
},
player2 = {
    x: canvas.width-(50+rectw),
    y: canvas.height/2-recth/2,
    velY: 0,
    velX: 0,
    color: getRandomColor(),
};
multiply = [-1, 1];
var choice = multiply[Math.floor(Math.random() * multiply.length)];
temp = getRandomInt(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
temp*=-1;
circle = {
    x: canvas.width/2-rectw/2,
    y: canvas.height/2-recth/2,
    velY: temp,
    velX: temp2,
    color: getRandomColor(),
}
var x = 150,
    y = 150,
    velY = 0,
    velX = 0,
    speed = 2,
    friction = 0.98,
    keys = [];
    auto = false;
    score1 = score2 = 0;

var atime = ptime = getTime();
function getTime(){
    return(new Date().getTime() / 1000);
}
col1 = getRandomColor();
col2 = getRandomColor();
col3 = getRandomColor();
tempX = 0
tempY = 0
paused = false;

function update() {
    if (keys[38]) {
        if (player2.velY > -speed) {
            player2.velY--;
        }
    }

    if (keys[40]) {
        if (player2.velY < speed) {
            player2.velY++;
        }
    }
    if (keys[65]) {
        if(getTime()-atime > 0.75){
            if (auto == false){
                auto = true;
            }else{
                auto = false;
            }
            atime = getTime();
        }
    }
    if (keys[32]) {
        if(getTime()-ptime > 0.75){
          if(paused == false){
            tempX = circle.velX;
            tempY = circle.velY;
            circle.velX = circle.velY = 0;
            paused = true;
          }else{
            circle.velX = tempX;
            circle.velY = tempY;
            paused = false;
          }
          ptime = getTime();
        }
    }
    if (keys[13]){
      multiply = [-1, 1];
      var choice = multiply[Math.floor(Math.random() * multiply.length)];
      temp = getRandomInt(0.5, 2.5);
      choice = multiply[Math.floor(Math.random() * multiply.length)];
      temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
      temp*=-1;
      circle.x = canvas.width/2-rectw/2;
      circle.y = canvas.height/2-recth/2;
      circle.velX = circle.velY = 0;
      
      setTimeout(function(){
        score1=score2=0;
        circle = {
          x: canvas.width/2-rectw/2,
          y: canvas.height/2-recth/2,
          velY: temp,
          velX: temp2,
          color: getRandomColor(),
        }
      }
      , 3000);
    }
    if (keys[67]){
      col1 = getRandomColor();
      col2 = getRandomColor();
      col3 = getRandomColor();
      player1.color = getRandomColor();
      player2.color = getRandomColor();
      circle.color = getRandomColor();
    }
    if (auto == false){
        if (keys[87]) {
            if (player1.velY > -speed) {
                player1.velY--;
            }
        }
    
        if (keys[83]) {
            if (player1.velY < speed) {
                player1.velY++;
            }
        }
    }else{
        player1.y = circle.y;
        player1.velY = 0;
    }
    
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "30px Verdana";
    // Create gradient
    var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop("0", col1);
    gradient.addColorStop("0.5", col2);
    gradient.addColorStop("1.0", col3);
    // Fill with gradient
    ctx.fillStyle = gradient;
    ctx.fillText(score1, 100, 90);
    ctx.fillText(score2, canvas.width-160, 90);
    updatePlayer(player1);
    updatePlayer(player2);
    updateCircle(circle, player1, player2);
    setTimeout(update, 10);
    document.title = score1+", "+score2;
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var audio = new Audio('http://www.mediacollege.com/downloads/sound-effects/alien/alien-noise-01.ogg');

function updateCircle(player, play1, play2) {
    player.y += player.velY;
    player.x += player.velX;

    if (player.x >= canvas.width-(50+rectw)) {
	if (play2.y <= player.y && player.y <= play2.y+recth){
	       	player.x = canvas.width-(50+rectw);
		    player.velX*=-1;
            play2.color = getRandomColor();
            player.color = getRandomColor();
            col1 = getRandomColor();
            col2 = getRandomColor();
            col3 = getRandomColor();
            audio.play();
                        
	}else{
    		player.x = canvas.width/2-rectw/2;
    		player.y = canvas.height/2-recth/2;
            multiply = [-1, 1];
            var choice = multiply[Math.floor(Math.random() * multiply.length)];
            temp = getRandomInt(0.5, 2.5);
            choice = multiply[Math.floor(Math.random() * multiply.length)];
            temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
            temp*=-1;
            player.velY = temp;
            player.velX = temp2;
            score1++;
	}
    } else if (player.x <= 60) {
	if (play1.y <= player.y && player.y <= play1.y+recth){
		    player.x = 60;
        	player.velX*=-1
            play1.color = getRandomColor();
            player.color = getRandomColor();
            col1 = getRandomColor();
            col2 = getRandomColor();
            col3 = getRandomColor();
            audio.play();
        }else{
            player.x = canvas.width/2-rectw/2;
            player.y = canvas.height/2-recth/2;
            multiply = [-1, 1];
            var choice = multiply[Math.floor(Math.random() * multiply.length)];
            temp = getRandomInt(0.5, 2.5);
            choice = multiply[Math.floor(Math.random() * multiply.length)];
            temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
            temp*=-1;
            player.velY = temp;
            player.velX = temp2;
            score2++;
        }
    }

    if (player.y > canvas.height-5) {
        player.y = canvas.height-5;
	player.velY*=-1
    } else if (player.y <= 5) {
        player.y = 5;
	player.velY*=-1
    }

    ctx.fillStyle = player.color;
    ctx.beginPath();
    ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
    ctx.fill();

}
function getRandomColor() {
/*    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;*/
    return "whiteSmoke";
}

function updatePlayer(player) {

    player.velY *= friction;
    player.y += player.velY;

    if (player.y > canvas.height-recth) {
        player.y = canvas.height-recth;
    } else if (player.y <= 0) {
        player.y = 0;
    }

    ctx.fillStyle = player.color;
    ctx.beginPath();
    ctx.fillRect(player.x, player.y, 10, recth);
//    ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
    ctx.fill();
}

update();

document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});
</script> 

</body>
</html>

＆＃13;

Answer 1

您可以使用http://codepen.io/pen进行快速在线测试或共享代码。

然后，您可以与人分享该链接，他们可以播放它。如果你想在服务器上托管它，你可以随时谷歌“免费网络托管”为一个临时的在线沙箱。

例如，这是您的在线工作游戏：http://codepen.io/anon/pen/bNaqRW

<div id="gameArea">
  <canvas id="canvas"></canvas>
  <div id="statsPanel"></div>
</div>

如何在线发布我的JavaScript代码？

1 个答案: