Scribd
Upload
31 views

Spider Web Dev Inductions

1) The document describes tasks to create a basic game using HTML canvas where the user controls tanks that shoot missiles at each other. 2) It provides links to tutorials for using canvas and examples of simple games built with canvas as a starting point. 3) The normal task is to build a game where two stationary tanks shoot angled missiles at each other, avoiding a mountain, with the goal of scoring points by hitting the opponent's tank. 4) The hacker task adds more advanced features like pause/restart buttons, selectable missile power levels and types, tank sprites, and procedurally generated mountains.

Uploaded by

Dharaneeshwar SK
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Spider Web Dev Inductions

1) The document describes tasks to create a basic game using HTML canvas where the user controls tanks that shoot missiles at each other. 2) It provides links to tutorials for using canvas and examples of simple games built with canvas as a starting point. 3) The normal task is to build a game where two stationary tanks shoot angled missiles at each other, avoiding a mountain, with the goal of scoring points by hitting the opponent's tank. 4) The hacker task adds more advanced features like pause/restart buttons, selectable missile power levels and types, tank sprites, and procedurally generated mountains.

Uploaded by

Dharaneeshwar SK
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

SPIDER WEB DEV INDUCTIONS

Task 1

Task 1 Normal: A basic game created on Canvas

Task 1 Hacker: Improving the game to a full-fledged fun game

Introduction

Now that Task0 is done and dusted, we can look at a concept where the use of
Javascript is very important and is fun to use. This task also serves as an introduction
into the vast field of game development. So sit, back ,relax and lets start coding your
own games. For this purpose, we would be using a Canvas in this task.

What is a canvas ?

Canvas in simple terms is just something like a plain paper displayed on a website.
You can draw simple shapes on it and even perform animations on it. Coordinated
use of these animations in presence of some user controls leads to development of
simple games.

Check out the following links To learn the basic concepts of Canvas and how it is used
in a HTML page before beginning the task:

1) How to use the <canvas> element in a website and draw basic shapes:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage
2) To draw important 2d shapes :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
3) To add color and styles to drawn shapes :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
4) Drawing text on the canvas :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
5) Using images in your canvas :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
6) Performing Operations like translating, rotating shapes and saving the current
state of canvas :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
7) (Important) : performing Basic Animations on the canvas :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
8) (Important): For using user input through keyboard or mouse for your game,
concept of eventlisteners are used,check them out at :
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/HTML-canvas-
guide/AddingMouseandTouchControlstoCanvas/AddingMouseandTouchControlstoCanvas.html

Check out the following links for 2 basic games built using canvas, you can use the
code of these games as a basis for this task :

1) Making a simple brick breaker game using canvas :


https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
please follow every single step of this tutorial to understand all the basic concepts involved in making
a basic game.
2) A simple ball motion using different motion methods :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations
3) Set of 3 simple arcade games built on canvas using javascript :
http://bencentra.com/2017-07-11-basic-html5-canvas-games.html

Your Task:
Task 1 Normal:
You have to create a game similar to Pocket Tanks (This game is available on
Play Store(android). You can check it out for reference but implement only
the features given below.) with the following description :

1) There will be two stationary tanks on the field. These can be placed on a flat
surface and not necessarily on a mountaneous surface. In between the two
tanks there will be a mountain. This game can be created as a single player
or a multiplayer game with separate controls for each player.
2) Each player(tank) will have to shoot missiles on the other. For normal mode,
missiles can be simple circles or a line. Controls have to be given to angle
the missile direction from the horizontal.Based on this angle, the trajectory
of motion of the missile will change.
3) If the missile hits the mountain in the middle, it is destroyed and the player’s
turn is up and it’s the other player’s turn now.
4) If the missile hits the other player’s tank, this player gets an increase in
score.
5) There may be a fixed number of shots for each player. Whoever has the
highest score after the fixed number of shots wins.

Task 1 Hacker :
This task builds on top of the game built on the normal mode. Note that this
task is not compulsory and maybe difficult . Please try this task only when
you finish the basic task and want a challenge. You can implement any
number of the given features below. Implementation of more of the
features, leads to a better grading of this overall Task1.

Extra Features To be implemented in the Above built game :

1) Add a Pause and a Restart button to the game. When clicked on Pause,
the game pauses and now a resume button should be present to
continue the game. Clicking on restart simply restarts the game from
first.
2) When firing a missile , the player can choose a power level for the shot
apart from angle. You can have some fixed number of power levels ,say 3
levels – low,medium and high. The trajectory of the missile should be
decided based on the combination of power level and the angle from
horizontal of launch.
3) You can customize the type of missile, each having different damage and
player can choose the missile type for each shot.
4) Use sprites for the tanks
More features of your choice are welcome. Make the game as amazing
and fun to play as you wish.
5) Generate the central mountain procedurally. i.e each time you open the
game,the height and shape of the mountain should be different.

If you’re stuck anywhere, PLEASE feel free to contact your mentor,or for that
matter, any web dev senior, coz….that’s what we are there for.

Submission

You need to create a separate repository on github for the game and
once game is completed the repository link needs to be submitted to
your mentors, either through Whatsapp or Telegram (Whichever your
mentor is using)

Deadline : 29th May 2018

This a soft deadline and can be extended under valid resons. We want
you to learn as much as possible during the summer and hence a
deadline is given.

HAPPY CODING YOUR OWN GAMES!!!!

You might also like