I'm in the process of programming a game menu in html. However, I have no idea how best to do this. I have already watched many tutorials on Youtube etc. but none have worked so far. Maybe someone can help me here and tell me how to make a game menu with a "Start game" button, a "Settings" button and a "Credits" button.
I tried to code the menu but that was completely wrong. I also don't know where in html I have to put the menu code
var kugel = 0;
var player_health = 100;
var panzer_sp = {
x: 0,
y: 0,
width: 10,
height: 5,
player_health
}
var panzer_sp2 = {
x: 0,
y: 0,
width: 10,
height: 5,
player_health
}
var damage = 20;
function load() {
window.setInterval(f_timer, 20);
//______________________________
kugel = new Array(); // neue Liste erzeugen
//________________________________
canvas = document.getElementById('myCanvas');
canvas.setAttribute('tabindex', '0');
canvas.focus();
canvas.addEventListener('mousedown', f_mousedown, false);
canvas.addEventListener('keypress', f_keypress, false);
music = document.getElementById("music");
panzer_sp = canvas.width / 2;
panzer_sp2 = canvas.width / 2 - 10;
f_draw();
}
function f_draw() {
canvas = document.getElementById('myCanvas');
canvas.width = canvas.width;
var gc = canvas.getContext("2d");
gc.fillStyle = "#800";
{
let background = document.getElementById("background");
gc.drawImage(background, 0, 0, 1640, 700);
}
gc.fillStyle = "#800";
//gc.fillRect(panzer_sp2, canvas.height-10,20,5);
let img = document.getElementById("panzer_l");
gc.drawImage(img, panzer_sp, canvas.height - 50, 150, 52); //bildergröße
gc.drawImage(img, panzer_sp2, canvas.height - 50, 150, 52); //bildergröße
//____________________________________________________
//gc.fillRect(panzer_sp2, canvas.height-10,20,5);
//_____________________________________________________
gc.fillStyle = "#900";
for (let i = 0; i < kugel.length; i++) {
gc.fillRect(kugel[i].x, kugel[i].y, kugel[i].w + 10, kugel[i].h + 10);
}
//_____________________________________________________
}
function f_mousedown(e) {
console.log('CLICK : x=' + e.offsetX + ',y=' + e.offsetY);
console.log('Canvas: w=' + canvas.width + ',h=' + canvas.height);
}
//Panzer im Spiel bewegen(+Geschwindigkeit einstellen)
function f_keypress(e) {
console.log('key press:' + e.keyCode);
if (e.keyCode == 97) {
panzer_sp = panzer_sp - 7; //6 steht für Geschwindigkeit(je höher desto schneller)
player_health = player_health - 20;
console.log(`Health: ${player_health} `);
if (player_health == 0) {
console.log(`Player one...its over`);
backgroundmusic.play();
}
}
if (e.keyCode == 100) {
panzer_sp = panzer_sp + 7;
}
if (e.keyCode == 100) {
music.play();
}
f_draw();
if (e.keyCode == 52) {
panzer_sp2 = panzer_sp2 - 6;
}
if (e.keyCode == 54) {
panzer_sp2 = panzer_sp2 + 6;
}
//______________________________________
if (e.keyCode == 32) {
let t = {
x: panzer_sp + 60,
y: 660,
w: 3,
h: 10
};
kugel.push(t);
}
if (e.keyCode == 53) {
let t = {
x: panzer_sp2 + 60,
y: 660,
w: 3,
h: 10
};
kugel.push(t);
}
//_____________________________________
f_draw();
}
function f_timer() {
let curTime = Date.now();
for (let i = 0; i < kugel.length; i++) {
kugel[i].x += 5;
if (kugel[i].x > 1640)
kugel.splice(i, 1);
}
f_draw();
//_______________________________
}body {
background-color: rgb(0, 0, 0);
color: blue;
font-size: 40x;
}
.mystyle {
color: #444;
padding: 5px;
font-size: 25px;
margin: 10px;
}
.canvas {
margin: 20px;
border: 1px solid rgb(154, 11, 11);
}
.displays {
margin: 20px;
}<html>
<head>
<div style="display:none"> <img id="background" preload="true" src="img/Marslandschaft2.jpg" width="770" height="227">
</div>
<div style="display:none"> <img id="panzer_l" preload="true" src="img/panzer2.png" width="70" height="27"></div>
<div style="display:none"> <img id="panzer_r" preload="true" src="img/panzer2_s.png" width="70" height="27">
</div>
<audio id="music" src="Audio/fahrt.m4a">
</audio>
<audio id="backgroundmusic" src="Audio/backgroundmusic.mp3">
</audio>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script language="javascript" type="text/javascript" src="scripts/myjs.js"></script>
<title>tanks</title>
</head>
<body onload="load()">
<div class="mystyle">
</div>
<canvas id="myCanvas" class="canvas" width="1640" height="700"></canvas>
</body>
<html>
