Kamelo10 Kamelo10 - 6 months ago 15
HTML Question

How can i implement a simple menu for my game made with HTML?

i'm making a simple game with HTML only, more or less it works... My question is if i can make a simple menu /with "click to start" or something similar/ with an image at the background and 1 button to start the game. And if i can make it in the same archive.
Thanks.

<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>


That's what i have.

Answer

The code also contains javascript.For proper gaming function .js file has to be called on your html page.Also use css to make it attractive.Consider this example

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>