Kamelo10 Kamelo10 - 1 year ago 55
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 Source

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>