102 // },
103 // {
104 // name: "random_cat_image",
105 // description: "Generates a random cat image",
106 // },
107 // {
359 <title>Val Town Project</title>
360 <link rel="stylesheet" href="/public/style.css">
361 <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
362 </head>
363 <body>
384 <title>Val Town Project</title>
385 <link rel="stylesheet" href="/public/style.css">
386 <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
387 <style>
388 .container {
6 <title>Todo List</title>
7 <link rel="stylesheet" href="/public/style.css">
8 <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
9 </head>
10 <body>
16
17class Face {
18 constructor(currImageSource, xPos, yPos, xSpeed, ySpeed, topTint) {
19 this.faceRightImageSource = 'res/falafelFaceRight.png';
20 this.faceLeftImageSource = 'res/falafelFaceLeft.png';
21
22 this.topTint = topTint;
25 this.xSpeed = xSpeed;
26 this.ySpeed = ySpeed;
27 this.currImageSource = currImageSource
28 this.image = loadImage(currImageSource);
29 }
30
31 flip() {
32 if (this.currImageSource == this.faceRightImageSource) {
33 this.currImageSource = this.faceLeftImageSource;
34 } else if (this.currImageSource == this.faceLeftImageSource) {
35 this.currImageSource = this.faceRightImageSource;
36 }
37
38 this.image = loadImage(this.currImageSource);
39 }
40
41 move() {
42 image(this.image, this.xPos, this.yPos);
43
44 this.xPos = this.xPos + this.xSpeed;
45 this.yPos = this.yPos + this.ySpeed;
46
47 if (this.xPos + this.image.width >= width) {
48 this.xSpeed = -this.xSpeed;
49 this.xPos = width - this.image.width;
50 this.tint();
51 this.flip();
57 }
58
59 if (this.yPos + this.image.height >= height) {
60 this.ySpeed = -this.ySpeed;
61 this.yPos = height - this.image.height;
62 this.tint();
63 } else if (this.yPos <= 0) {
16
17class Face {
18 constructor(currImageSource, xPos, yPos, xSpeed, ySpeed, topTint) {
19 this.faceRightImageSource = 'res/falafelFaceRight.png';
20 this.faceLeftImageSource = 'res/falafelFaceLeft.png';
21
22 this.topTint = topTint;
25 this.xSpeed = xSpeed;
26 this.ySpeed = ySpeed;
27 this.currImageSource = currImageSource
28 this.image = loadImage(currImageSource);
29 }
30
31 flip() {
32 if (this.currImageSource == this.faceRightImageSource) {
33 this.currImageSource = this.faceLeftImageSource;
34 } else if (this.currImageSource == this.faceLeftImageSource) {
35 this.currImageSource = this.faceRightImageSource;
36 }
37
38 this.image = loadImage(this.currImageSource);
39 }
40
41 move() {
42 image(this.image, this.xPos, this.yPos);
43
44 this.xPos = this.xPos + this.xSpeed;
45 this.yPos = this.yPos + this.ySpeed;
46
47 if (this.xPos + this.image.width >= width) {
48 this.xSpeed = -this.xSpeed;
49 this.xPos = width - this.image.width;
50 this.tint();
51 this.flip();
57 }
58
59 if (this.yPos + this.image.height >= height) {
60 this.ySpeed = -this.ySpeed;
61 this.yPos = height - this.image.height;
62 this.tint();
63 } else if (this.yPos <= 0) {
8const data = [
9 {
10 image: './img/drink.jpg',
11 text: "I'm Thirsty"
12 },
13 {
14 image: './img/food.jpg',
15 text: "I'm Hungry"
16 },
17 {
18 image: './img/tired.jpg',
19 text: "I'm Tired"
20 },
21 {
22 image: './img/hurt.jpg',
23 text: "I'm Hurt"
24 },
25 {
26 image: './img/happy.jpg',
27 text: "I'm Happy"
28 },
29 {
30 image: './img/angry.jpg',
31 text: "I'm Angry"
32 },
33 {
34 image: './img/sad.jpg',
35 text: "I'm Sad"
36 },
37 {
38 image: './img/scared.jpg',
39 text: "I'm Scared"
40 },
41 {
42 image: './img/outside.jpg',
43 text: 'I Want To Go Outside'
44 },
45 {
46 image: './img/home.jpg',
47 text: 'I Want To Go Home'
48 },
49 {
50 image: './img/school.jpg',
51 text: 'I Want To Go To School'
52 },
53 {
54 image: './img/grandma.jpg',
55 text: 'I Want To Go To Grandmas'
56 }
63 const box = document.createElement('div');
64
65 const { image, text } = item;
66
67 box.classList.add('box');
68
69 box.innerHTML = `
70 <img src="${image}" alt="${text}" />
71 <p class="info">${text}</p>
72 `;
2 {
3 name: 'Sony Playstation 5',
4 url: 'images/playstation_5.png',
5 type: 'games',
6 price: 499.99,
8 {
9 name: 'Samsung Galaxy',
10 url: 'images/samsung_galaxy.png',
11 type: 'smartphones',
12 price: 399.99,
14 {
15 name: 'Cannon EOS Camera',
16 url: 'images/cannon_eos_camera.png',
17 type: 'cameras',
18 price: 749.99,
20 {
21 name: 'Sony A7 Camera',
22 url: 'images/sony_a7_camera.png',
23 type: 'cameras',
24 price: 1999.99,
26 {
27 name: 'LG TV',
28 url: 'images/lg_tv.png',
29 type: 'televisions',
30 price: 799.99,
32 {
33 name: 'Nintendo Switch',
34 url: 'images/nintendo_switch.png',
35 type: 'games',
36 price: 299.99,
38 {
39 name: 'Xbox Series X',
40 url: 'images/xbox_series_x.png',
41 type: 'games',
42 price: 499.99,
44 {
45 name: 'Samsung TV',
46 url: 'images/samsung_tv.png',
47 type: 'televisions',
48 price: 1099.99,
50 {
51 name: 'Google Pixel',
52 url: 'images/google_pixel.png',
53 type: 'smartphones',
54 price: 499.99,
56 {
57 name: 'Sony ZV1F Camera',
58 url: 'images/sony_zv1f_camera.png',
59 type: 'cameras',
60 price: 799.99,
62 {
63 name: 'Toshiba TV',
64 url: 'images/toshiba_tv.png',
65 type: 'televisions',
66 price: 499.99,
68 {
69 name: 'iPhone 14',
70 url: 'images/iphone_14.png',
71 type: 'smartphones',
72 price: 999.99,
6
7body {
8 background-image: url('https://images.unsplash.com/photo-1467810563316-b5476525c0f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');
9 background-repeat: no-repeat;
10 background-size: cover;
6
7body {
8 background-image: linear-gradient(
9 0deg,
10 rgba(247, 247, 247, 1) 23.8%,
25 title.innerText = song;
26 audio.src = `music/${song}.mp3`;
27 cover.src = `images/${song}.jpg`;
28}
29