jblu/js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished ch 9

Browse Source
This commit is contained in:
Jonathan Branan 2024-10-23 11:14:14 -05:00
parent 1e756f4f72
commit e48567fa30
11 changed files with 163 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
.vscode/.DS_Store vendored
View File

Binary file not shown.

10
10/index.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Tennjs</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="script.js"></script>
</body>
</html>

12
10/script.js Normal file
View File

@ -0,0 +1,12 @@
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
let width = canvas.width;
let height = canvas.height;
const BALL_SIZE = 5;
let ballPosition = {x: 20, y: 30};
function draw() {
ctx.fillStyle = "black"; ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "white";
ctx.fillRect(ballPosition.x, ballPosition.y, BALL_SIZE, BALL_SIZE);
}
draw();

11
8/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<h1 id="main-heading">Hello <em>World!</em></h1>
<p id="para">ow ow ow ow ow</p>
<script src="script.js"></script>
</body>
</html>

23
8/index2.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers</title>
<link href="style2.css" rel="stylesheet">
</head>
<body>
<h1 id="main-heading">Hello <em>World!</em></h1>
<ul id="word-list">
<li>The</li>
<li>Dog</li>
<li>Cat</li>
<li>Is</li>
<li>Was</li>
<li>And</li>
<li>Hungry</li>
<li>Green</li>
</ul>
<p id="sentence"></p>
<div id="box"></div>
<script src="script2.js"></script>
</body>
</html>

16
8/script.js Normal file
View File

@ -0,0 +1,16 @@
let heading = document.querySelector("#main-heading");
heading.addEventListener("click", () => {
console.log("You clicked the heading!");
});
let para = document.querySelector("#para");
para.addEventListener("click", () => {
console.log("Charlie bit me!");
});
document.querySelector("em").addEventListener("click", () =>{
console.log("You clicked the em element!");
});
document.querySelector("body").addEventListener("click", () => {
console.log("You clicked the body element!");
});

26
8/script2.js Normal file
View File

@ -0,0 +1,26 @@
let wordList = document.querySelector("#word-list");
let sentence = document.querySelector("#sentence");
wordList.addEventListener("click", event => {
let word = event.target.textContent;
sentence.textContent += word;
sentence.textContent += " ";
});
let box = document.querySelector("#box");
let currentX = 0
let currentY = 0
document.querySelector("html").addEventListener("keydown", e => {
if (e.repeat === true){
return
} else if (e.key == "w") {
currentY -= 5;
} else if (e.key == "a") {
currentX -= 5;
} else if (e.key == "s") {
currentY += 5;
} else if (e.key == "d") {
currentX += 5;
}
box.style.left = currentX + "px";
box.style.top = currentY + "px";
});

14
8/style2.css Normal file
View File

@ -0,0 +1,14 @@
li {
cursor: crosshair;
}
li:hover {
text-decoration: underline;
}
#box {
position: fixed;
left: 0px;
top: 0px;
width: 10px;
height: 10px;
background-color: hotpink;
}

9
9/canvas.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="cs.js"></script>
</body

42
9/cs.js Normal file
View File

@ -0,0 +1,42 @@
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
let width = canvas.width;
let height = canvas.height;
let x = 0;
let y = 0;
let forwards = true;
function drawCircle(x, y) {
ctx.fillStyle = "rgb(0, 128, 255)";
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2, false);
ctx.fill();
}
function update() {
if (forwards === true) {
x += 1;
y = 10
}
else{
x -= 1;
y = 10
}
if (x >= 300){
forwards = false;
}
if (x <= 0){
forwards = true
}
// y += 1;
// x %= width;
// y %= height;
}
function draw() {
ctx.clearRect(0, 0, width, height);
drawCircle(x, y);
}
setInterval(() => {
update();
draw();
}, 1);