Javascript 画布游戏中的不同页面
问题 我正在使用HTML5画布创建一个游戏，游戏有一个主菜单，主菜单有多个按钮供您选择。我发现我很难理解如何显示游戏，例如，如果用户按下“播放”按钮，我会如何显示游戏。以下是主菜单的图像： 问题 问题是我如何在游戏中从这个页面转到另一个页面 我想你明白了。我故意用画布创建了菜单，我知道我可以用HTML制作菜单，但我不能，因为这是一个画布可以做什么，什么是好的和坏的，等等的学生的例子 代码Javascript 画布游戏中的不同页面,javascript,html,canvas,Javascript,Html,Canvas,问题 我正在使用HTML5画布创建一个游戏，游戏有一个主菜单，主菜单有多个按钮供您选择。我发现我很难理解如何显示游戏，例如，如果用户按下“播放”按钮，我会如何显示游戏。以下是主菜单的图像： 问题 问题是我如何在游戏中从这个页面转到另一个页面 我想你明白了。我故意用画布创建了菜单，我知道我可以用HTML制作菜单，但我不能，因为这是一个画布可以做什么，什么是好的和坏的，等等的学生的例子 代码 <html> <head> <title>Sean Coyn
<html>
<head>
<title>Sean Coyne</title>
</head>
<body onload="start_game()">
<body>
<div style id="canvas">
<canvas id="myCanvas" style="border:5px solid #410b11" height="320" width="480">
<p>Your browser does not support HTML5!</p>
</canvas>
<script type="text/javascript">
//Referencing the canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var width = canvas.getAttribute('width');
var height = canvas.getAttribute('height');
//Finding the position of the mouse
var mouseX;
var mouseY;
//Images
var bgImage = new Image();
var logoImage = new Image();
var playImage = new Image();
var instructImage = new Image();
var settingsImage = new Image();
var aboutImage = new Image();
var peaceImage = new Image();
var backgroundY = 0;
var speed = 1;
//Arrays below used for mouse over function
var buttonX = [130,110,130,160];
var buttonY = [100,140,180,220];
var buttonWidth = [96,260,182,160];
var buttonHeight = [40,40,40,40];
var peaceX = [0,0];
var peaceY = [0,0];
var peaceWidth = 35;
var peaceHeight = 35;
var peaceVisible = false;
var peaceSize = peaceWidth;
var peaceRotate = 0;
var frames = 30;
var timerId = 0;
var fadeId = 0;
var time = 0.0;
peaceImage.src = "Images/peace.png";
bgImage.onload = function(){
context.drawImage(bgImage, 0, backgroundY);
};
bgImage.src = "Images/background.png";
logoImage.onload = function(){
context.drawImage(logoImage, 50, -10);
}
logoImage.src = "Images/logo.png";
playImage.onload = function(){
context.drawImage(playImage, buttonX[0], buttonY[0]);
}
playImage.src = "Images/play.png";
instructImage.onload = function(){
context.drawImage(instructImage, buttonX[1], buttonY[1]);
}
instructImage.src = "Images/instructions.png";
settingsImage.onload = function(){
context.drawImage(settingsImage, buttonX[2], buttonY[2]);
}
settingsImage.src = "Images/settings.png";
aboutImage.onload = function(){
context.drawImage(aboutImage, buttonX[3], buttonY[3]);
}
aboutImage.src = "Images/about.png";
timerId = setInterval("update()", 1000/frames);
canvas.addEventListener("mousemove", checkPos);
canvas.addEventListener("mouseup", checkClick);
function update() {
clear();
move();
draw();
}
function clear() {
context.clearRect(0, 0, width, height);
}
function move(){
backgroundY -= speed;
if(backgroundY == -1 * height){
backgroundY = 0;
}
if(peaceSize == peaceWidth){
peaceRotate = -1;
}
if(peaceSize == 0){
peaceRotate = 1;
}
peaceSize += peaceRotate;
}
function draw(){
context.drawImage(bgImage, 0, backgroundY);
context.drawImage(logoImage, 50,-10);
context.drawImage(playImage, buttonX[1], buttonY[0]);
context.drawImage(instructImage, buttonX[2], buttonY[1]);
context.drawImage(settingsImage, buttonX[2], buttonY[2]);
context.drawImage(aboutImage, buttonX[3], buttonY[3]);
if(peaceVisible == true){
context.drawImage(peaceImage, peaceX[0] - (peaceSize/2), peaceY[0], peaceSize, peaceHeight);
context.drawImage(peaceImage, peaceX[2] - (peaceSize/2), peaceY[2], peaceSize, peaceHeight);
}
}
function checkPos(mouseEvent){
if(mouseEvent.pageX || mouseEvent.pageY == 0){
mouseX = mouseEvent.pageX - this.offsetLeft;
mouseY = mouseEvent.pageY - this.offsetTop;
}else if(mouseEvent.offsetX || mouseEvent.offsetY == 0){
mouseX = mouseEvent.offsetX;
mouseY = mouseEvent.offsetY;
}
for(i = 0; i < buttonX.length; i++){
if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
peaceVisible = true;
peaceX[0] = buttonX[i] - (peaceWidth/2) - 2;
peaceY[0] = buttonY[i] + 2;
peaceX[1] = buttonX[i] + buttonWidth[i] + (peaceWidth/2);
peaceY[1] = buttonY[i] + 2;
}
}else{
peaceVisible = false;
}
}
}
function checkClick(mouseEvent){
for(i = 0; i < buttonX.length; i++){
if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
fadeId = setInterval("fadeOut()", 1000/frames);
clearInterval(timerId);
canvas.removeEventListener("mousemove", checkPos);
canvas.removeEventListener("mouseup", checkClick);
}
}
}
}
function fadeOut(){
context.fillStyle = "rgba(0,0,0, 0.2)";
context.fillRect (0, 0, width, height);
time += 0.1;
if(time >= 2){
clearInterval(fadeId);
time = 0;
timerId = setInterval("update()", 1000/frames);
canvas.addEventListener("mousemove", checkPos);
canvas.addEventListener("mouseup", checkClick);
}
}
</script>
</body>
</html>
肖恩·科因
您的浏览器不支持HTML5
//引用画布
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var width=canvas.getAttribute（'width'）；
var height=canvas.getAttribute（'height'）；
//找到鼠标的位置
var mouseX；
var mouseY；
//图像
var bgImage=新图像（）；
var logoImage=新图像（）；
var playImage=新图像（）；
var instructionmage=新图像（）；
var settingsImage=新图像（）；
var aboutImage=新图像（）；
var peaceImage=新图像（）；
var-backgroundY=0；
无功转速=1；
//下面的数组用于鼠标悬停功能
var buttonX=[130110130160]；
变量按钮=[100140180220]；
var buttonWidth=[96260182160]；
var buttonHeight=[40,40,40,40]；
var peaceX=[0,0]；
var peaceY=[0,0]；
宽度=35；
高度=35；
var=false；
var peaceSize=和平宽度；
var=0；
var帧=30；
var-timerId=0；
var-fadeId=0；
var时间=0.0；
peaceImage.src=“Images/peace.png”；
bgImage.onload=函数（）{
drawImage（bgImage，0，背景）；
};
bgImage.src=“Images/background.png”；
logoImage.onload=函数（）{
背景。drawImage（logoImage，50，-10）；
}
logoImage.src=“Images/logo.png”；
playImage.onload=函数（）{
drawImage（playImage，buttonX[0]，buttonY[0]）；
}
playImage.src=“Images/play.png”；
指令mage.onload=函数（）{
drawImage（指令图像，按钮[1]，按钮[1]）；
}
instructionmage.src=“Images/instructions.png”；
settingsImage.onload=函数（）{
drawImage（设置图像，按钮[2]，按钮[2]）；
}
settingsImage.src=“Images/settings.png”；
aboutImage.onload=函数（）{
drawImage（关于图像，buttonX[3]，buttonY[3]）；
}
aboutImage.src=“Images/about.png”；
timerId=setInterval（“update（）”，1000/帧）；
canvas.addEventListener（“mousemove”，checkPos）；
canvas.addEventListener（“mouseup”，选中单击）；
函数更新（）{
清除（）；
move（）；
draw（）；
}
函数clear（）{
clearRect（0，0，宽度，高度）；
}
函数move（）{
背景-=速度；
如果（背景==-1*高度）{
背景y=0；
}
如果（和平大小==和平宽度）{
平均轮换=-1；
}
如果（和平大小==0）{
平均轮换=1；
}
和平大小+=和平轮换；
}
函数绘图（）{
drawImage（bgImage，0，背景）；
背景。drawImage（logoImage，50，-10）；
drawImage（playImage，buttonX[1]，buttonY[0]）；
drawImage（指令图像，按钮[2]，按钮[1]）；
drawImage（设置图像，按钮[2]，按钮[2]）；
drawImage（关于图像，buttonX[3]，buttonY[3]）；
如果（可见==true）{
context.drawImage（peaceImage，peaceX[0]-（peaceSize/2），peaceSize[0]，peaceSize，PeaceSheight）；
context.drawImage（peaceImage，peaceX[2]-（peaceSize/2），peaceSize[2]，peaceSize，PeaceSheight）；
}
}
功能检查位置（mouseEvent）{
if（mouseEvent.pageX | | mouseEvent.pageY==0）{
mouseX=mouseEvent.pageX-this.offsetLeft；
mouseY=mouseEvent.pageY-this.offsetTop；
}else if（mouseEvent.offsetX | | mouseEvent.offsetY==0）{
mouseX=mouseEvent.offsetX；
mouseY=mouseEvent.offsetY；
}
对于（i=0；ibuttonX[i]&mouseXbuttonY[i]&&mouseYvar STATES = {
Menu: 0,
PauseMenu: 1,
Playing: 2
};
var currentState = STATES.Menu;
...
function draw() {
switch(currentState) {
case STATES.Menu:
// Draw buttons, etc..
break;
case STATES.Playing:
// Draw the game screen, the player, etc...
break;
}
}
function onPlayButtonClick() {
currentState = STATES.Playing;
// Starting the next frame the new state will be "magically" drawn
}