I'm currently working on creating a game menu using HTML, but I'm struggling to figure it out. Despite watching numerous tutorials on platforms like YouTube, none of them have been helpful so far. I'm hoping someone here can provide guidance on creating a game menu with buttons for "Start game," "Settings," and "Credits."
My attempts at coding the menu have all been unsuccessful, and I'm unsure where in my HTML file to include the menu code.
Check out this updated version that eliminates any potential errors! Feel free to experiment with your own images.
I've also swapped out the onload function for an eventListener instead.
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(); // create a new list
//________________________________
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); //image size
gc.drawImage(img, panzer_sp2, canvas.height - 50, 150, 52); //image size
//____________________________________________________
//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);
}
//Move tank in game (+set speed)
function f_keypress(e) {
console.log('key press:' + e.keyCode);
if (e.keyCode == 97) {
panzer_sp = panzer_sp - 7; //6 stands for speed(higher is faster)
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();
//_______________________________
}
window.addEventListener("DOMContentLoaded", load)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;
}<!doctype html>
<html>
<head>
<title>tanks</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script language="javascript" type="text/javascript" src="scripts/myjs.js"></script>
</head>
<body>
<div class="mystyle"></div>
<canvas id="myCanvas" class="canvas" width="1640" height="700"></canvas>
<div style="display:none">
<img id="background" preload="true" src="https://t3.ftcdn.net/jpg/03/02/88/18/360_F_302881829_9aCUDI3TnoajIVTuIFnBecAz6Wn2kQFj.jpg" width="770" height="227">
<img id="panzer_l" preload="true" src="https://w7.pngwing.com/pngs/719/207/png-transparent-panzer-38-churchill-tank-panzer-ii-tank-vehicle-weapon-combat-vehicle-thumbnail.png" width="70" height="27">
<img id="panzer_r" preload="true" src="https://w7.pngwing.com/pngs/719/207/png-transparent-panzer-38-churchill-tank-panzer-ii-tank-vehicle-weapon-combat-vehicle-thumbnail.png" width="70" height="27">
</div>
<audio id="music" src="Audio/fahrt.m4a"></audio>
<audio id="backgroundmusic" src="Audio/backgroundmusic.mp3"></audio>
</body>
<html>I'm attempting to incorporate the persistent header feature demonstrated in this tutorial: http://css-tricks.com/persistent-headers/ Here's My Code: <div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area"> <h2 class ...
I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...
One of the questions posed to me in an interview was about sorting a select option. The options were listed as follows: <select> <option>aaa</option> <option>ccc</option> <option>ddd</option> <option>bbb< ...
Is there a way to dynamically change the color of a div from black to white every two seconds, and then from white to black, continuously toggling as long as the div is visible? Essentially, I want the div to only be displayed when a user clicks and drag ...
Struggling to convert wrapping containers from HTML to ReactJS? Let me break it down for you with an example. Here's the HTML code: <body> <header> <div class="fixed-header"> ...content </div> <div cla ...
The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...
Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...
I need a script that functions like the overlay effect on Dribbble when you hover over an image. However, it needs to be flexible enough to be utilized for multiple images across my website. The simpler and more user-friendly, the better. Appreciate any ...
My mat dialog doesn't seem to expand the width of the container as I expected. <div mat-dialog-title class="blue-gradient">Confirm</div> <div mat-dialog-content> {{information}} </div> <div mat-dialog-actions alig ...
Here is the current structure of my code: <div class="container-fluid"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> ...
I'm working on a layout featuring overlapping images and I'm looking to create a hide-and-seek effect where the images are hidden one by one when clicked, and then shown in reverse order until all of them are visible again – essentially creatin ...
Currently, I'm developing a Hybrid iPad application that utilizes AngularJS and PhoneGap. I've encountered an issue with animations. I need to animate a div from left to right and make it toggleable. By default, the div should be hidden. Could ...
I have a logo and a menu in two separate divs side by side. The logo is on the left and the menu is on the right. I am trying to vertically align the menu in the right div with the logo in the left div. Here is the code snippet: <div id="header"&g ...
Hello, I have a navigation bar with a dropdown menu using ol. However, when I hover over the list items, the width of the list exceeds that of the ol element. I believe this is due to the white-space: nowrap CSS property, but I want the text in the dropdow ...
Need help with vertically centering text in TD elements. Tried various methods but unable to achieve the desired outcome. <table class="student_table"> <tr> <th class="class_box" colspan="4">Batc ...
Utilizing Bootstrap 4.3.1 with React Components I currently have this image: https://i.sstatic.net/rudsE.png And I am aiming for this design: https://i.sstatic.net/VmyTW.png comments: { elementLabel: "Comments", elementType: 'textar ...
I have integrated the JW Player for video playback on both mobile and web browsers. Currently, I have a library of 100 videos with dimensions set at 1280*700 pixels. These videos work well on web browsers and load quickly depending on internet speed. Howe ...
Good evening, I'm attempting to create a functionality where pressing a specific button will open a window. However, I am unsure of how to achieve this using CSS classes. My initial thought was to add a new class in the CSS file and call it every ti ...
Is there a way to retrieve the values of check boxes that are generated dynamically? @ $db = mysql_connect("abc", "abc", ""); mysql_select_db("abc"); $strSQL = "SELECT * FROM student"; ...
To retrieve the next available ID, which serves as the primary key in the table, I need to convert from HTML to PHP within the value attribute of an input tag. Unfortunately, this approach doesn't work as intended. The PHP code seems to interfere wit ...