You must hand in by using git
-
Create an empty repo on
bitbucket.org,gitlab.com, orgithub.com, -
git pushyour local repo to the above remote repo. -
For node assignments please put the line(s)
into yournode_modules/.gitignorefile.
Send a mail to <nmla@iba.dk> with:
-
The word '
handin <subjectname>' in the subject line of your mail - The url of your repo(s).
Please refer to code in Example 11.2. Now alter the drawing of the polygon in such a way that you strike all three sides with the context method lineTo. Use a line width of 10.
Hand in an HTML5 as well as a JavaScript file. HTML5 must validate. JavaScript must be validated without errors on jslint.com, or jshint.org.
Please refer to code in Example 11.2.
Now alter the drawing of the polygon in such a way that
you close the region of the polygon
with the context method closePath. Use a line width of 10.
Hand in an HTML5 as well as a JavaScript file. HTML5 must validate. JavaScript must be validated without errors on jslint.com, or jshint.com.
Create a webpage. In the right hand side of the webpage you must create a 'toolbox' canvas with four rectangles of different sizes, and a half circle. They represent the standard shapes in the toolbox.
In addition you must create another, separate canvas on the page. Let us call it the room. The size of that canvas must be with user entered width and height. Please let it's outline be visible.
I expect an html file, a css file, and one or more js files to make up the solution.
Hint for beginners:
You may prefer to work with embedded JavaScript while you
test your code. Once it works as desired, separate the JavaScript into an
individual .js file, test again, then hand in your
solution.
With the webpage created in the previous assignment you must create an event such that you may click on a toolbox shape to select it. Then you must be able to click in the other canvas so that the standard shape will be drawn there.
The shapes must be kept at a minimum distance from the walls of the room.
This assignment should be solved by adding code to the JavaScript code file(s) made in the previous assignment.
With the result of the previous assignment you must improve the placing of the shapes such that in addition to the minimum distance from the walls, the shapes may touch, but not overlap each other.
Again, this assignment should be solved by adding code to the JavaScript code files resulting from the previous assignment.
-
Write this HTML5 page.
The outlined area is a canvas with the
id
myCanvas0. Show it to your prof.
-
Create the necessary JavaScript to fill the canvas with
fillStyle = 'silver'. Show it to your prof.
-
This is a die in perspective:
Here is the die seen from one side:
-
Construct a die seen from one side with canvas
drawing tools. Draw it on the canvas. Then show
it to your prof.
-
Change your HTML5 to add a
Play!button such that when you click it, the code rolls the die; wipes the canvas; and redraws the canvas with the die reflecting its new value. - Change the number of dice from 1 to 5. The behaviour, ie rolling the individual die to a new value when hitting play, must be on all the 5 dice.
-
Add a
lockto a die when you click it. If locked, the die does not change its value when you clickPlay!If you click a locked die, it must be released.
Today we, you shall write a tic-tac-toe game. The game is also known as naughts and crosses.
Take a look at this page: Click here :)
And then consider
- A win is three Xs or three Os in a line. A line may be a row, a column, or a diagonal.
- If there's two Xs or two Os in a line, then the opponent must play the third to block or to win.
- Knowing where to play when you mustn't block or play to win.
The playing ground, the board, is a 3x3 matrix. The obvious choice will be to map the board into an array. You have two choices. A one dimensional array such as
[0, 1, 2, 3, 4, 5, 6, 7, 8]which you may decide to look at as
[0, 1, 2
3, 4, 5
6, 7, 8]is definitely simpler. You may also choose
[ [0, 1, 2],
[0, 1, 2],
[0, 1, 2] ]
Either way, looping through the board to check
for points will be finding three rows, three columns,
two diagonals, and counting points in them. Associating
a 4 with an X, and a 1 with an O, a play
means placing an X or an O on the screen, and a 4, or a 1 in the array.
- 12 points show 3 Xs, and the human wins.
- 3 points show 3 Os and the computer wins.
- 8 means 2 Xs, 2 means 2 Os. In either case the human or the computer must make a blocking move to survive.
- Any other sum, the human or the computer must choose an intelligent next play.
We need the following functionality:
- To (re)initialize the array and the bord in case of a new game.
- To put an O into an empty place. The empty place given as a parameter.
- Read the board and populate the array with 4s for every X. Count rows, columns, and diagonals for points.
- Find an intelligent empty square for the computer to play
Write the handlers, functions, and create the proper event listeners to activate them.
Test and repeat until it works.