I am really new to coding, and I might have picked off a project that's bigger than I can chew....
I am trying to code an "avoider" game where the player moves the mouse around the screen in order to avoid the enemies following, or coming at the player. If the enemies touch the player-- game over.
So far, all the tutorials I've found that don't involve using Unity or some other game building software only have the enemies falling from the top of the screen-- not actually following the player around.
Is something like this even possible just using basic HTML5 and JS? Does anyone have any tips on where to start with this or any good tutorials or example code?
Thank you!
Yeah, this is possible in vanilla js. You may want to break down the problem. First you need to track the player's location. All you need are the x and y coordinates. Then you just increase the movement of the enemy towards those coordinates.
This tutorial does the opposite. The enemy avoids. It's also based on the mouse, but it should lead you in the right direction if you can't figure it out.
https://code.tutsplus.com/articles/html5-avoider-game-tutorial-multiple-moving-enemies--active-9956
Related
EDIT: Decided to add actual sprites and animations instead of using fillRects.
Currently drawing all this on a canvas.
I have an update function and a draw function.
Within the update function, i loop through all the people and update their positions slightly. Then I call the draw function which renders it onto the canvas.
Currently all the do is slide around the bounds of the map but I think it'll add a lot more polish to the game if the little guys have a small walking animation.
The people are all drawn with a fillRect() function. I figured a small animation where the people rotate side to side when moving would be a nice effect. However, i'm not sure how to go about this as well as best practices.
Do you guys have any idea on how to achieve this effect? It seems like if I want to do what im looking for, i would need to then keep track of more states within the people. eg. isTiltedLeft, isTiltedRight, tiltDuration, etc etc. This seems a bit complicated(?) but maybe this is the only way.
Since you don't have any specific code questions, you're generally on the right path. There's a lot of different states to manage, and you'll need to track each of them. If things seem complex, they sure can be. People spend lots of money to run games nicely. A lot of code needs to run very fast in order to make these experiences.
Common things I've found useful to know:
Use a sin wave to add a bounce to your animation.
Use Math.Atan2 to find the angle between two points
Understand how to convert between Radians and Degrees
Use Composition over inheritance as much as possible.
I'm always happy to chat about game dev, feel free to look up my contact info and reach out. Happy Coding!
I'm wondering how to make a viewport that follows the player such as in sidescrolling games. I have a semi-working version, but it requires me to move everything except the player.
ctx.translate(canvX,canvY);
drawBlocks();
ctx.restore()
This works for now, but I will have to draw enemies and other objects, and I don't want to constantly have to redo the process. I'm looking for a simple solution that basically involves a camera that follows the player. Is this possible?
Use something like three.js for games. Because you have to draw as many frames per second, and canvas just isn't great for that (if you don't believe me now, wait until you have to draw more things on the screen).
However, for your current code, one thing I notice is you're missing a save.
If that's not the problem, which I dont think it is, based on your question, you don't want to re-draw everything, only the background? You could actually use multiple layers, so that each enemy is an HTML element, and you only redraw the enemy when their animation frame changes. Then you just move their element ( a little cheaper than re-drawing in terms of performance ).
THREE.JS is what you should learn.. it will really help you out.
Im looking to create an ellipse with a feathered or soft edge, as if it has been drawn with a spray can. I cant get my head around it...?? :-i
Any Help will be truly appreciated.
You have to break this down further. Pretend you have a friend who has never seen anything drawn with a spray can, so they have no idea what that looks like. Your goal is to give your friend a piece of paper, a pencil, and a list of steps they can follow to create the effect even though they've never seen it before.
Write down a series of steps (in English, not in code) that your friend could follow using the pen and paper. Remember that your friend has never seen the effect before, so you have to be as specific as possible. Try to break steps down into smaller sub-steps whenever possible. Maybe try watching videos of the effect in slow motion to figure out exactly what's going on.
When you have the list of steps written down, that's an algorithm that you can think about implementing with code.
Even though this doesn't feel like programming, this process of breaking your main goal down into several smaller steps is at the core of programming (especially creative coding).
That being said, I can help you get started by offering several approaches you might want to play with.
Just use an image stamp. Draw the effect beforehand and then just draw that image to the canvas, optionally randomly rotating and coloring it.
Or draw a series of circles, maybe getting more transparent as they get further from the center.
Or draw a random dot within a random range at a random angle. Do this several times per frame.
In ammo.js I am trying to make a creative type game - everything works as expected but when objects collide they do not rotate.
Code can be found here
http://blockhaven.uk.is/dev/BHJSP/
The example can be played if you just follow instructions from here
http://blockhaven.uk.is/dev
Not sure what the problem is - even if the rendering engine does not show rotation the blocks should still rotate when dropped on the corner of another right?
To be clear ammo.js is a port of Bullet Physics.
To help anyone else I though I should answer my own question.
Make sure to set your mass to a non zero value! else everything will mess up.
The mass is defined here :
new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, blockShape, localInertia)
Hope this helps :D
I have followed a couple of tutorials (http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html, http://www.html5rocks.com/en/tutorials/canvas/notearsgame/) and spliced the two together to create a game (https://github.com/gazzwi86/HTML5-Motion-Detection). While I have a few things to work out with the blending to improve the quality of the detection, I was wondering how I would go about detecting grabbing and swipe gestures, say for navigating a web page.
Could you point me in the direction of some examples or outline the principles so that I may try it myself.
I wouldn't go for it. It would require huge processing on client side to be quite good detection.
You can simply track moving objects(like hand) with some threshold(you can simply blur to get rid of noise). The background of user mostly will stay the same, so you can ignore it too.
Then convert image to black and white and try to have your moving object as one polygon.
What I would go to experiment after - set up a little neural network and train it myself by moving my hand.
Well that's just my 2 cents on how I would try to implement it. It would be really nice to hear from you later how did you do that and what the results are :)