我正在用html编写游戏菜单。然而，我不知道如何做到这一点最好。我已经在Youtube等网站上看了很多教程，但到目前为止都没有效果。也许有人可以在这里帮助我，告诉我如何制作一个带有"开始游戏"的游戏菜单。按钮，设置"按钮和"信用"按钮。
我试图编码菜单，但这是完全错误的。我也不知道应该把菜单代码放在html的什么地方
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>这是一个没有错误的版本。用你自己的图片试试
我还将onload替换为eventListener
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();
//_______________________________
}
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>