Pinder Posted June 13, 2014 Share Posted June 13, 2014 So i've been making my first html5 game (just a simple squash style game) and it seems the hardest part has been how to go from main menu to the actual game. ... heres my code im using external scrips but just so you guys can see it all ive pasted the code into the script tags Haaalllpp D:<!DOCTYPE html><html><head> <link rel='stylesheet' href='style.css'/> <title>Squash Game</title></head><body><canvas id="canvas"></canvas><script src='main.js'>//Setting up the canvasvar FPS = 30;var score = 0;var lives = 3; window.onkeydown = function( e ) { e = e || window.event; var code = e.keyCode; if (code === 38) { //up player.vy = -200; } else if (code === 40) { //down player.vy = 200; } }; window.onkeyup = function( e ) { e = e || window.event; var code = e.keyCode; if (code === 38) { //left player.vy = 0; } else if (code === 40) { //up player.vy = 0; } };player = { width: 10, height: 80, x: 30, y: (canvas.height/2)-40, vx: 0, vy: 0, color: "white", draw: function() { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); }, update: function() { this.x += this.vx / FPS; this.y += this.vy / FPS; //collision if ( this.y < 0 ) { this.y = 0; } if ( this.y > canvas.height - this.height) { this.y = canvas.height - this.height; } },};onScreen = { drawScore: function() { ctx.fillStyle ="white"; ctx.font ="30px Arial"; ctx.fillText("Score: ", 230, 40); ctx.fillText(score, 320, 40); }, drawLives: function() { ctx.fillStyle="white"; ctx.font = "30px Arial"; ctx.fillText("Lives: ", 30, 40); ctx.fillText(lives, 120, 40); }, gameOver: function() { if (lives <= 0) { ctx.fillStyle="red"; ctx.font="50px Arial"; ctx.fillText("GAME OVER", (canvas.width/4),200); score = 0; lives= 0; } } };ball = { x: 250, y: 150, vx: 200, vy: 200, ax: 0, ay: 0, radius: 20, color: "red", draw: function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc( this.x, this.y, this.radius, 0, 2 * Math.PI ); ctx.fill(); }, update: function() { this.vx += this.ax / FPS; this.vy += this.ay / FPS; this.x += this.vx / FPS; this.y += this.vy / FPS; // Collision detection if ( this.x < ( 0 + this.radius ) ) { this.x = 0 + this.radius; this.vx = -this.vx; lives--; } if ( this.x > (canvas.width - this.radius) ) { this.x = canvas.width - this.radius; this.vx = -this.vx; this.color = "red"; score++; } if ( this.y < (0 + this.radius) ) { this.y = 0 + this.radius; this.vy = -this.vy; } if ( this.y > (canvas.height - this.radius) ) { this.y = canvas.height - this.radius; this.vy = -this.vy; } if ( ball.x + ball.radius >= player.x && ball.x + ball.radius <= player.x + player.height && player.y <= ball.y + ball.radius && player.y + player.height >= ball.y + ball.radius) { this.vx = 250; this.color = "green"; } } } function draw1() { ctx.clearRect(0,0,canvas.width,canvas.height); player.draw(); ball.draw(); onScreen.drawScore(); onScreen.drawLives(); onScreen.gameOver(); }function update1() { player.update(); ball.update(); }//runs 30 times a secondfunction tick1() { draw1(); update1();} </script><script src="menu.js">var canvas = document.getElementById("canvas");canvas.width = 600;canvas.height = 400 ;var ctx = canvas.getContext("2d");FPS = 30;var clicked = false; window.onmousemove = function(e) { // IE doesn't always have e here e = e || window.event; var rect = canvas.getBoundingClientRect(); // get event location var mouse_x = (e.clientX-rect.left)/(rect.right-rect.left)*canvas.width || (e.pageX-rect.left)/(rect.right-rect.right)*canvas.width; var mouse_y = (e.clientY-rect.top)/(rect.bottom-rect.top)*canvas.height || (e.pageY-rect.top)/(rect.bottom-rect.top)*canvas.height; //test if hit play button if (mouse_x >= 200 && mouse_x <= 400 && mouse_y >= 130 && mouse_y <= 200) { console.log("mouse on start"); Button_Play.color = "red"; } else { Button_Play.color = "green"; } window.onmousedown = function(e) { if (mouse_x >= 200 && mouse_x <= 400 && mouse_y >= 130 && mouse_y <= 200) { console.log("clicked start"); clicked = true; } else { Button_Play.color = "green"; } } };Button_Play = { width: 200, height: 70, x: 200, y: 130, color: "green", draw: function() { ctx.fillStyle = this.color; ctx.fillRect(this.x,this.y,this.width,this.height); ctx.fillStyle = "white"; ctx.font = "40px Tahoma"; ctx.fillText("PLAY", 250,180); }, update: function() { }}Button_Help = { width: 200, height: 70, x: 200, y: 220}function draw() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "white"; ctx.font = "50px Tahoma"; ctx.fillText("SQUASH GAME", 110 , 100 ); Button_Play.draw();}function update() { Button_Play.update();}function startscreen() { draw(); update(); console.log(clicked);}if (clicked == true){ setInterval(tick1, 1000/FPS); console.log("entering game");} else if (clicked == false){setInterval(startscreen, 1000/FPS);}</script><script src="pong.js">var canvas = document.getElementById("canvas"); canvas.width = 600; canvas.height = 400 ; var ctx = canvas.getContext("2d");startscreen();</script></body></html> Quote Link to comment Share on other sites More sharing options...
Pinder Posted June 13, 2014 Author Share Posted June 13, 2014 Sorry about this bad post ^^ what i ment to say is Im trying to make it so when i click the button_play i want it to change the clicked variable to true. i then console.log clicked and it changes fine window.onmousedown = function(e) { if (mouse_x >= 200 && mouse_x <= 400 && mouse_y >= 130 && mouse_y <= 200) { console.log("clicked start"); clicked = true; } else { Button_Play.color = "green"; } }But the problem is, im using an if statement to detect if clicked == true which is ment to then start updating the game and only update the startmenu if clicked is not true. if (clicked == true){ setInterval(tick1, 1000/FPS); console.log("entering game");} else if (clicked == false){setInterval(startscreen, 1000/FPS);}But it never does the setInterval(tick1, 1000/FPS); and always just updates the startscreen? can someone explain why/fix it for me? help appriciated Quote Link to comment Share on other sites More sharing options...
Chupup Games Posted June 15, 2014 Share Posted June 15, 2014 i didn't look at all your code now, because it's a bit confusing (and it's late , too), but try to useif (clicked) { ... }else if (!clicked) { ... }writing var == true/false is not a good option, because Javascript converts intern to numbers and this gives not always the result you are looking for. Quote Link to comment Share on other sites More sharing options...
Pinder Posted June 16, 2014 Author Share Posted June 16, 2014 i didn't look at all your code now, because it's a bit confusing (and it's late , too), but try to useif (clicked) { ... }else if (!clicked) { ... }writing var == true/false is not a good option, because Javascript converts intern to numbers and this gives not always the result you are looking for. Thanks man! i've figured it out now. Ended up with this if statement inside a function and it works function game() { if (clicked) { console.log("going to level"); level(); } else if (!clicked) { startscreen(); }}setInterval(game,1000/FPS); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.