Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@whoskaden
whoskaden committed Oct 26, 2023
2 parents 8d78425 + 00a3ae3 commit 76a3218
Show file tree
Hide file tree
Showing 17 changed files with 951 additions and 19 deletions.
23 changes: 6 additions & 17 deletions _posts/2023-10-11-MainGameFile.md → _posts/2023-10-11-OOP.md
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
---
layout: post
title: Main Game!
description: Jump with Link!
title: Migrating to OOP
description: Integrating OOP
author: Katelyn Gelle, Gabriel Gravin, Kaden Vo, Daisy Zhang
courses: {'compsci': {'week': 6}}
type: hacks
comments: True
---

**Directions**
Freeplay with Link! Use "D" to make him move right, use the "A" to make him move left, and use the space bar to jump.

<!DOCTYPE html>
<html>
<head>
<title>Flip or Freeze!</title>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script type="module">
import { Character } from '{{site.baseurl}}/assets/js/Character.js'
var Link = new Character('{{site.baseurl}}/images/linksprites.png', 96, 104, 100, 400 - 104, -10, .5, 2);
var Link = new Character('{{site.baseurl}}/images/linksprites.png', 96, 104, 100, 400 - 104, -10, .5, 2, 10);
// Get the canvas and its 2D rendering context
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
Expand Down Expand Up @@ -85,16 +77,14 @@ Freeplay with Link! Use "D" to make him move right, use the "A" to make him move
// Game loop
let framesPerSecond = 30;
function gameLoop() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the background image
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
// Update sprite position based on key down left and right
if (Link.isMovingLeft) {
Link.spriteX -= 10;
Link.spriteX -= Link.movementSpeed;
}
if (Link.isMovingRight) {
Link.spriteX += 10;
Link.spriteX += Link.movementSpeed;
}
// Update the sprite position based on gravity
Link.spriteVelocityY += Link.gravity;
Expand Down Expand Up @@ -126,5 +116,4 @@ Freeplay with Link! Use "D" to make him move right, use the "A" to make him move
}
gameLoop();
</script>
</body>
</html>
</body>
2 changes: 1 addition & 1 deletion _posts/2023-10-12-teamwork.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ courses: { compsci: {week: 7} }

generateRandomPlatform();

setInterval(generateRandomPlatform, 700); // Decrease the spawn interval
setInterval(generateRandomPlatform, 650); // Decrease the spawn interval

function checkCollisions() {
platforms.forEach(function (platform) {
Expand Down
158 changes: 158 additions & 0 deletions _posts/2023-10-24-Tic_tac_toe_game.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
toc: false
comments: false
layout: post
title: Tic-Tac-Toe
description: Simple Tic-Tac-Toe minigame made from youtube tutorial
type: hacks
courses: { compsci: {week: 7} }
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tic-tac-toe JavaScript</title>
<link rel="stylesheet" href="styvles.css">
</head>
<body>
<div id="gameboard"></div>
<p id="info"></p>
</body>
</html>

<script>
const gameBoard = document.querySelector('#gameboard')
const infoDisplay = document.querySelector('#info')
const startCells = [
"", "", "", "", "", "", "", "", ""
]
let go = "circle"
infoDisplay.textContent = "Circle goes first"

function createBoard(){
startCells.forEach((_cell, index) => {
const cellElement = document.createElement('div')
cellElement.classList.add('square')
cellElement.id = index //giving id to each box element
cellElement.addEventListener('click', addGo)
gameBoard.append(cellElement)
})
}
createBoard()


function addGo(e) { //add circle or cross if nothing is there yet
console.log(e.target) //returns id of square each time you click it
const goDisplay = document.createElement('div')
goDisplay.classList.add(go) //add class of circle every time we click, append to whatever we click on
e.target.append(goDisplay) //append element that we just created
go = go === "circle" ? "cross" : "circle" //if this is true, return cross, otherwise return circle
infoDisplay.textContent = "it is now " + go + "'s go." //will read, it is cross's go if it was circle's go before
e.target.removeEventListener("click", addGo)
checkScore()
}

function checkScore() {
const allSquares = document.querySelectorAll(".square")
const winningCombos = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], //horizontal combos
[0, 3, 6], [1, 4, 7], [2, 5, 8] //vertical combos
[0, 4, 8], [2, 4, 6]
]

console.log(allSquares[4])

winningCombos.forEach(array => {
const circleWins = array.every(cell =>
allSquares[cell].firstChild?.classList.contains('circle'))

if (circleWins) {
infoDisplay.textContent = "Circle Wins!"
allSquares.forEach(square => square.replaceWith(square.cloneNode(true)))
return
}

})

winningCombos.forEach(array => {
const crossWins = array.every(cell =>
allSquares[cell].firstChild?.classList.contains('cross'))

if (crossWins) {
infoDisplay.textContent = "Cross Wins!"
allSquares.forEach(square => square.replaceWith(square.cloneNode(true)))
return
}

})


}
</script>

<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}

#gameboard { /*hashtag for ID*/
width: 300px;
height: 300px;
background-color: black;
display: flex;
flex-wrap: wrap;
border: solid 1px black;
}

.square { /*class of square*/
width: 100px;
height: 100px;
background-color: white;
border: solid 2px black;
box-sizing: border-box;
display: flex;
justify-content: center; /*centering O*/
align-items: center;
}

.circle {
height: 90px;
width: 90px;
border-radius: 50%;
border: 15px solid blue;
box-sizing: border-box;
}

.cross {
height: 90px;
width: 90px;
position: relative;
transform: rotate(45deg);
}

.cross:before, .cross:after {
content: "";
position: absolute;
background-color: red;
}

.cross:before {
left: 50%;
width: 30%;
margin-left: -15%;
height: 100%;
}

.cross:after {
top: 50%;
height: 30%;
margin-top: -15%;
width: 100%;
}
</style>
166 changes: 166 additions & 0 deletions _posts/2023-10-24-alienWorld.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
---
layout: base
title: Alien World
image: /images/alien_planet.jpg
images:
background:
src: /images/Stone_Background.jpg
dog:
src: /images/dogSprite.png
monkey:
src: /images/monkeySprite.png
---

<!-- Liquid code, run by Jekyll, used to define location of asset(s) -->
{% assign backgroundFile = site.baseurl | append: page.images.background.src %}
{% assign dogSpriteImage = site.baseurl | append: page.images.dog.src %}
{% assign monkeySpriteImage = site.baseurl | append: page.images.monkey.src %}

<style>
#controls {
position: relative;
z-index: 2; /* Ensure the controls are on top */
}
</style>

<!-- Prepare DOM elements -->
<!-- Wrap both the dog canvas and controls in a container div -->
<div id="canvasContainer">
<div id="controls"> <!-- Controls -->
<!-- Background controls -->
<button id="toggleCanvasEffect">Invert</button>
<!-- Dog controls -->
<input type="radio" name="animation" id="idle">
<label for="idle">Idle</label>
<input type="radio" name="animation" id="barking">
<label for="barking">Barking</label>
<input type="radio" name="animation" id="walking" checked>
<label for="walking">Walking</label>
</div>
</div>

<script type="module">
import GameEnv from '{{site.baseurl}}/assets/js/alienWorld/GameEnv.js';
import GameObject from '{{site.baseurl}}/assets/js/alienWorld/GameObject.js';
import Background from '{{site.baseurl}}/assets/js/alienWorld/Background.js';
import Character from '{{site.baseurl}}/assets/js/alienWorld/Character.js';
import Platform from '{{site.baseurl}}/assets/js/alienWorld/Platform.js';
import { initDog } from '{{site.baseurl}}/assets/js/alienWorld/CharacterDog.js';
import { initMonkey } from '{{site.baseurl}}/assets/js/alienWorld/CharacterMonkey.js';

// Create a function to load an image and return a Promise
function loadImage(src) {
return new Promise((resolve, reject) => {
const image = new Image();
image.src = src;
image.onload = () => resolve(image);
image.onerror = reject;
});
}

// Game loop
function gameLoop() {
for (var gameObj of GameObject.gameObjectArray){
gameObj.update();
gameObj.draw();
}
requestAnimationFrame(gameLoop); // cycle game, aka recursion
}

// Window resize
function setSize() {
GameEnv.setGameEnv(); // Update GameEnv dimensions

// Call the sizing method on all game objects
for (var gameObj of GameObject.gameObjectArray){
gameObj.size();
}
}


async function startGame() {
// Resolve file dependencies before starting gam
try {

// Define data for Game Objects

const [backgroundImg, dogImg, monkeyImg] = await Promise.all([
loadImage('{{backgroundFile}}'),
loadImage('{{dogSpriteImage}}'),
loadImage('{{monkeySpriteImage}}'),
]);

// Prepare HTML with Background Canvas
const backgroundCanvas = document.createElement("canvas");
backgroundCanvas.id = "background";
document.querySelector("#canvasContainer").appendChild(backgroundCanvas);

// Prepare HTML with Dog Canvas
const dogCanvas = document.createElement("canvas");
dogCanvas.id = "characters";
document.querySelector("#canvasContainer").appendChild(dogCanvas);

// Prepare HTML with Monkey Canvas
const monkeyCanvas = document.createElement("canvas");
monkeyCanvas.id = "characters";
document.querySelector("#canvasContainer").appendChild(monkeyCanvas);

// Setup Globals
GameEnv.gameSpeed = 2;
GameEnv.controls = document.getElementById("controls");
GameEnv.gravity = 3;

// Create Game Objects

// Background object(s)
const backgroundSpeedRatio = 0.5
var backgroundObj = new Background(backgroundCanvas, backgroundImg, backgroundSpeedRatio);

// Character object(s)
const dogSpeedRatio = 0.2
var dogObj = initDog(dogCanvas, dogImg, dogSpeedRatio);
const monkeySpeedRatio = 0.7
var monkeyObj = initMonkey(monkeyCanvas, monkeyImg, monkeySpeedRatio);

//var platform = new Platform(0, GameEnv.bottom - 50, GameEnv.innerWidth, 10);

// Define Event Listeners

// Listen for window resize events and trigger the handleResize function
window.addEventListener('resize', setSize);

/* Toggle "canvas filter property" between alien and normal */
var isFilterEnabled = true;
const defaultFilter = getComputedStyle(document.documentElement).getPropertyValue('--default-canvas-filter');

toggleCanvasEffect.addEventListener("click", function () {
if (isFilterEnabled) { // toggle off
backgroundCanvas.style.filter = "none"; // remove filter
dogCanvas.style.filter = "none";
monkeyCanvas.style.filter = "none";
} else { // toggle on
backgroundCanvas.style.filter = defaultFilter; // Apply the default filter value
dogCanvas.style.filter = defaultFilter;
monkeyCanvas.style.filter = defaultFilter;
}
isFilterEnabled = !isFilterEnabled; // switch boolean value
});


// Start the game

setSize();
gameLoop();


// Trap errors on bad images
} catch (error) {
console.error('Failed to load one or more images:', error);
}
}

// Call the initializeGame function to start the game
startGame();

</script>

Loading

0 comments on commit 76a3218

Please sign in to comment.