Wie kann ich ein einfaches Menü für mein Spiel mit HTML implementieren?

Question

Ich mache ein einfaches Spiel nur mit HTML, mehr oder weniger funktioniert es ... Meine Frage ist, ob ich ein einfaches Menü/mit "Klick zum Starten" oder etwas Ähnliches/mit einem Bild im Hintergrund machen kann und 1 Taste, um das Spiel zu starten. Und wenn ich es im selben Archiv machen kann. Danke.

<canvas id="ctx" width="1024" height="800" style="border:3px solid #000000;"></canvas> 
<script> 

var Height = 800; 
var Width = 1024; 
var timeElapset = Date.now(); 

var ctx = document.getElementById("ctx").getContext("2d"); 
ctx.font = '30px Consolas'; 

var frameCount = 0; 
var score = 0; 

var player = { 
    x:50, 
    spdX:30, 
    y:40, 
    spdY:30, 
    name:'P', 
    hp:10, 
    width:20, 
    height:20, 
    color:'green', 
}; 

var enemyList = {}; 

getDistance = function (Obj1,Obj2){ 

    var vx = Obj1.x - Obj2.x; 
    var vy = Obj1.y - Obj2.y; 
    return Math.sqrt((vx*vx)+(vy*vy)); 
} 


checkCollision = function (Obj1,Obj2){ 

    var rect1 = { 
     x: Obj1.x - Obj1.width/2, 
     y: Obj1.y - Obj1.height/2, 
     height: Obj1.height, 
     width: Obj1.width, 
    } 

    var rect2 = { 
     x: Obj2.x - Obj2.width/2, 
     y: Obj2.y - Obj2.height/2, 
     height: Obj2.height, 
     width: Obj2.width, 
    } 
    return testCollisionRectRect(rect1,rect2); //true o false 

} 

Enemy = function (id,x,y,spdX,spdY,width,height){ 

    var enemy = { 
     x:x, 
     spdX:spdX, 
     y:y, 
     spdY:spdY, 
     name:'E', 
     id:id, 
     width:width, 
     height:height, 
     color:'black', 
    }; 
    enemyList[id] = enemy;  
} 

document.onmousemove = function(mouse){ 

    var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left; 
    var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top; 

    if(mouseX < player.width/2) 
     mouseX = player.width/2; 

    if(mouseX > Width-player.width/2) 
     mouseX = Width - player.width/2; 

    if(mouseY < player.height/2) 
     mouseY = player.height/2; 

    if(mouseY > Height - player.height/2) 
     mouseY = Height - player.height/2; 

    player.x = mouseX; 
    player.y = mouseY; 
} 


updateEntity = function (Z){ 

    updatePosition(Z); 
    drawPlayer(Z); 
} 


updatePosition = function(Z){ 

    Z.x += Z.spdX; 
    Z.y += Z.spdY; 

    if(Z.x < 0 || Z.x > Width){ 
     Z.spdX = -Z.spdX; 
    } 
    if(Z.y < 0 || Z.y > Height){ 
     Z.spdY = -Z.spdY; 
    } 
} 


testCollisionRectRect = function(rect1,rect2){ 

    return rect1.x <= rect2.x+rect2.width && 
      rect2.x <= rect1.x+rect1.width && 
      rect1.y <= rect2.y + rect2.height && 
      rect2.y <= rect1.y + rect1.height; 
} 


drawPlayer = function(Z){ 


    ctx.save(); 
    ctx.fillStyle = Z.color; 
    ctx.fillRect(Z.x-Z.width/2,Z.y-Z.height/2,Z.width,Z.height); 

    ctx.restore(); 
} 

update = function(){ 

    ctx.clearRect(0,0,Width,Height); 
    frameCount++; 
    score++; 

    if(frameCount % 100 == 0) 
     randomGenerateEnemy(); 


    for(var key in enemyList){ 
     updateEntity(enemyList[key]); 

     var isColliding = checkCollision(player, enemyList[key]); 

     if(isColliding){ 
      player.hp = player.hp -1; 
     } 
    } 

    if(player.hp <= 0){ 
     var timeSurvived = Date.now() - timeElapset;   
     console.log("Has ganado Kappa, Tiempo vivo " + timeSurvived + " ms."); 
     ctx.fillText(" You Lose! ", Width/2, Height/2); 
     GameEngine(); 
    } 


    drawPlayer(player); 
    ctx.fillText(player.hp + " Hp",20,30); 
    ctx.fillText('Puntuacion: ' + score/10,700,30); 
} 


GameEngine = function(){ 

    player.hp = 13; 
    timeElapset = Date.now(); 
    frameCount = 0; 
    score = 0; 

    enemyList = {}; 

    randomGenerateEnemy(); 
    randomGenerateEnemy(); 
    randomGenerateEnemy(); 
    randomGenerateEnemy(); 

} 


randomGenerateEnemy = function(){ 

    var x = Math.random()*Width; 
    var y = Math.random()*Height; 

    var height = 10 + Math.random()*70;  
    var width = 10 + Math.random()*70; 
    var id = Math.random(); 

    var spdX = 5 + Math.random() * 5; 
    var spdY = 5 + Math.random() * 5; 

    Enemy(id,x,y,spdX,spdY,width,height); 
} 

GameEngine(); 

setInterval(update,30); 

</script> 

Das ist, was ich habe.

Answer 1

Der Code auch javascript.For richtige Datei auf Ihrer html page.Also Verwendung CSS genannt werden hat Js Gaming-Funktion enthält es attractive.Consider dieses Beispiel zu machen ist

enter code here 
<html> 
<head> 
<title>Your game title</title> 
<script type="text/javascript" src="src/Common.js"></script> 
<script type="text/javascript" src="src/Perlin.js"></script> 
<script type="text/javascript" src="src/ChaikinCurve.js"></script> 
<script type="text/javascript"> 
    var app = null; 
    window.onload = function() { 
     utils.loadShaderXml("src/render/shaders.xml", null,   function(shaders) { 
      if (shaders instanceof Exception) { 
       app = shaders; 
      } else { 
       try { 
        app = new App('canvas', shaders, null); 
       } catch (e) { 
        app = e; 
       } 
      } 
     }); 
     document.onselectstart = function() { 
      return false; 
     }; 
    }; 
    function application() { 
     if (app == null) { 
      alert("Application is absent"); 
      throw "no application"; 
     } else if (app instanceof Exception) { 
      alert("An exception occured while creating the application:\n" + app.message); 
      throw app; 
     } else { 
      return app; 
     } 
    } 
</script> 

<style type="text/css"> 
    body{ 
     margin: 0px; padding: 0px; overflow: hidden; 
     background: #000; 
    } 
    #canvas-holder.active { 
     position: absolute; 
     padding: 0px; 
     left: 50%; 
     top: 50%; 
    } 
    #canvas-holder.inactive { 
     position: absolute; 
     top:50%; 
     width: 100%; 
     text-align: center; 
    } 
    #canvas { 
     padding: 0px; 
     width: 100%; 
     height: 100%; 
     color: #fff; 
     font-family: Allan, Arial; 
     font-size: 40px; 
    } 
</style> 
</head> 
<body> 
<div id="canvas-holder" class="inactive"> 
<div id="canvas">Your game` is loading...</div> 
</div> 
<div style="font-family: Lobster; visibility: hidden">one</div> 
<div style="font-family: Allan; visibility: hidden">two</div> 
<div style="font-family: Meddon; visibility: hidden">three</div> 
<div style="font-family: Cuprum; visibility: hidden">four</div> 
</body> 
</html>