-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
39 lines (33 loc) · 1.82 KB
/
index.html
File metadata and controls
39 lines (33 loc) · 1.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
<meta charset="utf-8" />
</head>
<h1>Welcome To my Project</h1>
<hr>
<body>
<main>
<div class="canvas"id="sketch-holder"></div>
<div class="menu-button"id ="button-holder"> </div>
<div id="fourth"><h2>Statement</h2>
<p> For this project, I decided to experiment with HTML and CSS to understand their basic ideas. These two are the most challenging aspects of my creative coding class. On this page, I have created two options for you in which you have to interact with my project. You can select the drawing machine to make some sketches or play the snake game. Both options can save the screen so be sure to save some shots when you are having fun.
The Drawing machine has two buttons that help you to select a random stroke color and also to clear the canvas.
The Snake game is very easy to play. You can control the snake with the control keys on your keyboard. That is UP, DOWN, RIGHT, and LEFT keys.
Both the Drawing machine and the snake game have options to save the screen, for the drawing machine, Just press the “UP_ARROW” key to save the screen and for the snake game, just press the “X” key to save the screen.
The interface of my project was made with simple shapes and colors.
</p>
</div>
<div id="drawing"><a href="drawing.html">drawing machine</a></div>
</main>
<script src="./sketch.js"></script>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
<footer>
<small>All rights reserved</small>
</footer>
</html>