Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    csa
    csa is offline
    New Coder
    Join Date
    Oct 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help to add 'got ya' alert

    Hi, I want to add a message such as 'got ya' to the following game once the monster is caught. Could you please demonstrate how this is done?

    Secondly, if I want to start adding other features such as a second monster (other suggestions welcome) where is the best place to look on the internet to help add the JS into my code?
    Code:
     
    
    Code:
    // Create the canvas
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 512;
    canvas.height = 480;
    document.body.appendChild(canvas);
    
    // Background image
    var bgReady = false;
    var bgImage = new Image();
    bgImage.onload = function () {
    	bgReady = true;
    };
    bgImage.src = "images/background.png";
    
    // Hero image
    var heroReady = false;
    var heroImage = new Image();
    heroImage.onload = function () {
    	heroReady = true;
    };
    heroImage.src = "images/hero.png";
    
    // Monster image
    var monsterReady = false;
    var monsterImage = new Image();
    monsterImage.onload = function () {
    	monsterReady = true;
    };
    monsterImage.src = "images/monster.png";
    
    // Game objects
    var hero = {
    	speed: 256 // movement in pixels per second
    };
    var monster = {};
    var monstersCaught = 0;
    
    // Handle keyboard controls
    var keysDown = {};
    
    addEventListener("keydown", function (e) {
    	keysDown[e.keyCode] = true;
    }, false);
    
    addEventListener("keyup", function (e) {
    	delete keysDown[e.keyCode];
    }, false);
    
    // Reset the game when the player catches a monster
    var reset = function () {
    	hero.x = canvas.width / 2;
    	hero.y = canvas.height / 2;
    
    	// Throw the monster somewhere on the screen randomly
    	monster.x = 32 + (Math.random() * (canvas.width - 64));
    	monster.y = 32 + (Math.random() * (canvas.height - 64));
    };
    
    // Update game objects
    var update = function (modifier) {
    	if (38 in keysDown) { // Player holding up
    		hero.y -= hero.speed * modifier;
    	}
    	if (40 in keysDown) { // Player holding down
    		hero.y += hero.speed * modifier;
    	}
    	if (37 in keysDown) { // Player holding left
    		hero.x -= hero.speed * modifier;
    	}
    	if (39 in keysDown) { // Player holding right
    		hero.x += hero.speed * modifier;
    	}
    
    	// Are they touching?
    	if (
    		hero.x <= (monster.x + 32)
    		&& monster.x <= (hero.x + 32)
    		&& hero.y <= (monster.y + 32)
    		&& monster.y <= (hero.y + 32)
    	) {
    		++monstersCaught;
    		reset();
    	}
    };
    
    // Draw everything
    var render = function () {
    	if (bgReady) {
    		ctx.drawImage(bgImage, 0, 0);
    	}
    
    	if (heroReady) {
    		ctx.drawImage(heroImage, hero.x, hero.y);
    	}
    
    	if (monsterReady) {
    		ctx.drawImage(monsterImage, monster.x, monster.y);
    	}
    
    	// Score
    	ctx.fillStyle = "rgb(250, 250, 250)";
    	ctx.font = "24px Helvetica";
    	ctx.textAlign = "left";
    	ctx.textBaseline = "top";
    	ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
    };
    
    // The main game loop
    var main = function () {
    	var now = Date.now();
    	var delta = now - then;
    
    	update(delta / 1000);
    	render();
    
    	then = now;
    };
    
    // Let's play this game!
    reset();
    var then = Date.now();
    setInterval(main, 1); // Execute as fast as possible

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 589 Times in 588 Posts
    You have the x,y coordinates of both the monster and the player. After a player moves check to see if they are the same. If they are Game over post your message.
    Evolution - The non-random survival of random variants.

  • #3
    csa
    csa is offline
    New Coder
    Join Date
    Oct 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sounds great...just haven't a clue how to implement this!

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Found this in the code
    Code:
    	// Are they touching?
    	if (
    		hero.x <= (monster.x + 32)
    		&& monster.x <= (hero.x + 32)
    		&& hero.y <= (monster.y + 32)
    		&& monster.y <= (hero.y + 32)
    	) {
    // ADD YOU MESSAGE HERE and because of the reset put a slight delay here also
    		++monstersCaught;
    		reset();
    	}
    And if you need to look this stuff up good site to learn stuff http://www.w3schools.com/
    Last edited by sunfighter; 04-29-2013 at 10:04 PM.
    Evolution - The non-random survival of random variants.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by sunfighter View Post
    And if you need to look this stuff up good site to learn stuff http://www.w3schools.com/
    The JavaScript section of that site is of historical interest only. Most of it was written when Netscape 3 was the most popular browser and modern JavaScript is completely different.

    For example an alert() is now only useful as a debugging tool for if you can't be bothered to open the error console. Alerts now display a checkbox that in some browsers turns off all subsequent alerts (and confirms and prompts) on the same page while in other browsers the checkbox is ti turn off JavaScript completely for the page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 589 Times in 588 Posts
    http://www.w3schools.com/ is a good place to start. It is laid out in an easy to understand method. It is also fast for getting specific information, so I like it and recommend it.

    When I want in depth I go to Mozilla Developer Network. I believe you recommended this and I do use it, but feel it maybe a bit over powering to some.
    https://developer.mozilla.org/en-US/docs/HTML
    Evolution - The non-random survival of random variants.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by sunfighter View Post
    http://www.w3schools.com/ is a good place to start. It is laid out in an easy to understand method. It is also fast for getting specific information, so I like it and recommend it.
    It's the ideal source of information where most of your visitors are using Netscape 4. The two guys that own it have yet to update it properly to cover more modern browsers. The JavaScript section is particularly dated as very little of how things were done for Netscape 4 is applicable for using JavaScript with more modern browsers.

    The site is really well laid out. Unfortunately with the number of topics covered maintaining it really needed more than just two people doing it as a hobby. Of course if they hadn't got the misleading domain name then few would have found the site.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,895
    Thanks
    202
    Thanked 2,530 Times in 2,508 Posts
    I think that you are unneccessarily harsh and dismissive in your judgement of w3schools. The reality is that many thousands of people have found it a valuable resource over many years (and doubtless still do). It is indeed a little dated (in a few but not most respects), but to say that it only useful for users of Nescape 4 is simply silly. How many million times have I told you not to exaggerate? As so often, your opinions are unmodulated.

    I do realise that your own tutorial pages are in competition with w3schools, and that you would like to be seen as the principal authority on Javascript.

    I don't accept that "modern Javascript is completely different". There have been some changes, improvements and upgrades, but I would say that at least 50% of Javascript code is the same as it has always been. Alerts, prompts and document.write() are certainly obsolete - but what else is?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,882
    Thanks
    56
    Thanked 539 Times in 536 Posts
    I know that I won't get an answer to this, but I'm asking anyway:
    which bits of W3Schools are written for Netscape 4?

    I agree that MDN is better for best-practices and cutting-edge stuff, but for a broad overview of all of the basics I think W3S is pretty handy.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •