Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/Trystan-Schmits/Group
Browse files Browse the repository at this point in the history
  • Loading branch information
@Frogpants
Frogpants committed Nov 3, 2023
2 parents 7a12583 + a5c1255 commit 525f58f
Show file tree
Hide file tree
Showing 20 changed files with 605 additions and 34 deletions.
0 _posts/2023-10-11-review_ticket4_Focus.md → _posts/2023-10-11-FinalReview.md
View file
File renamed without changes.
12 changes: 12 additions & 0 deletions _posts/2023-10-11-review_ticket4_Focus copy.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
toc: false
comments: true
layout: post
title: Final dress rehearsel
description: Reviewing what we learned from this week
type: plans
courses: { compsci: {week: 7} }
permalink: /tangibles/week7
---


125 changes: 109 additions & 16 deletions _posts/2023-10-25-Game.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,15 @@ categories: ['C4.1']
background-color:white;
}
</style>
<audio id="audio" src="/Group/audio/2023-10-23-Menu_Theme.mp3" preload="auto"></audio>
<audio id="audio2" src="/Group/audio/box.wav" preload="auto"></audio>

<button id="start">start</button>
<canvas id="mainDisplay" class="container" height="500px" width="500px"></canvas>
<br>
<canvas id="fadeDisplay" class="container2" height="500px" width="500px"></canvas>
<br>
<canvas id="subDisplay" class="container2" height="500px" width="500px"></canvas>
<audio id="audio" src="/Group/audio/2023-10-23-Menu_Theme.mp3" preload="auto"></audio>
<br>
<canvas id="subDisplay1" class="container2" height="500px" width="500px"></canvas>
<div></div>
Expand All @@ -37,6 +39,8 @@ categories: ['C4.1']
<canvas id="subDisplay1d" class="container2" height="500px" width="500px"></canvas>
<canvas id="subDisplay1e" class="container2" height="500px" width="500px"></canvas>
<canvas id="subDisplay1f" class="container2" height="500px" width="500px"></canvas>
<div></div>
<canvas id="subDisplay1g" class="container2" height="500px" width="500px"></canvas>

<audio id="mainAudio" src="/Group/audio/MainRoomAmbience.mp3" preload="auto"></audio>

Expand Down Expand Up @@ -128,9 +132,12 @@ import {Display, subDisplay} from "/Group/myScripts/GameScripts/Displays.js";
var box3 = true;
var box4 = true;

//audio
var boxAudio = document.getElementById("audio2");

//text
var bedText1 = {text:"unpack the boxes",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};
var bedText2 = {text:"talk to the niehbors",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};
var bedText2 = {text:"talk to the neighbors",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};
var bedText3 = {text:"head to bed",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};


Expand All @@ -149,8 +156,15 @@ import {Display, subDisplay} from "/Group/myScripts/GameScripts/Displays.js";
var lightObject2 = new Object("light2",lightingSprite,[500,500],[500,500],[0,0],1,1);

//text
var hallText = {text:"talk to the niehbors",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};
var hallText = {text:"talk to the neighbors",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};
var hallText2 = {text:"head to bed",font:"14px Ariel",fillStyle:"black",posX:20,posY:30};
var hallText3 = {text:"",font:"14px Ariel",fillStyle:"black",posX:250,posY:250};

////////Credits
//objects
var squidSprite = new Image();
squidSprite.src = "/Group/images/Game/squid.png";
var squidObject = new Object("character", squidSprite ,[190,175],[90,90],[40,0],4,1);

////////////End of Object Creation, Start of Display Creation

Expand All @@ -161,6 +175,9 @@ var menuDisplay = new subDisplay(menuCanvas,[menuBackgroundObject5,menuBackgroun

//////Game Part1
var part1Canvas = document.getElementById("subDisplay1");
var part1ConversationCanvas = document.getElementById("subDisplay1g");
var part1ConversationDisplay = new subDisplay(part1ConversationCanvas);

//Room 1
var part1Room1Canvas = document.getElementById("subDisplay1a");
var part1Room1ObjectCanvas = document.getElementById("subDisplay1b");
Expand Down Expand Up @@ -259,7 +276,7 @@ function checkForOverlap(object1, object2) {

//function for switching between displays
var fadingFrame = 0;
var fadingCtx = fadingCanvas.getContext("2d")
var fadingCtx = fadingCanvas.getContext("2d");
function Fadeframe(DisplayToSwitch,oldDisplay,newDisplay,func){
fadingFrame = (fadingFrame+1)%(2*fps);

Expand Down Expand Up @@ -305,23 +322,29 @@ var active3 = false;
var overDoor1 = false;
var overDoor2 = false;
var part1Room2Ctx = part1Room2Display.canvas.getContext("2d");
var allowMovement = true;
function Room2frame(){
currentFrame = (currentFrame+1)%fps;
if (currentFrame == 0){sec+=1};

part1Room2ObjectDisplay.OverrideScroll([0,0]);
part1Room2ShadowDisplay.OverrideScroll([0,0]);
if(allowMovement){
var pos = myCharacter2.onFrame(fps);
pos = [pos.x,500-pos.y]; //fix position
myCharacterObject2.OverridePosition(pos); //update character position
if (currentFrame % Math.round(fps/12)==0 && myCharacter2.moving == true){
myCharacterObject2.UpdateFrame()
}
if(myCharacter2.directionX == 1){
myCharacterObject2.state = 0;
}
else {
myCharacterObject2.state = 1;
}

var pos = myCharacter2.onFrame(fps);
pos = [pos.x,500-pos.y]; //fix position
myCharacterObject2.OverridePosition(pos); //update character position
if (currentFrame % Math.round(fps/12)==0 && myCharacter2.moving == true){
myCharacterObject2.UpdateFrame()
part1Room2ObjectDisplay.OverrideScroll([-pos[0],0]); //scroll everything
part1Room2ShadowDisplay.OverrideScroll([-pos[0],0]);
}

part1Room2ObjectDisplay.OverrideScroll([-pos[0],0]); //scroll everything
part1Room2ShadowDisplay.OverrideScroll([-pos[0],0]);

part1Room2ObjectDisplay.draw(1); //objects

if (currentFrame % Math.round(fps/4)==0){ //lighting
Expand All @@ -342,7 +365,7 @@ function Room2frame(){
overDoor2 = false;
}
// Drawing the EKey sprite
if (pos[0]>300 && pos[0]<500) {
if (pos[0]>300 && pos[0]<500 && allowMovement) {
overDoor1 = true;
if (currentFrame % Math.round(fps/2)==0){
Ekey.UpdateFrame()
Expand All @@ -353,6 +376,7 @@ function Room2frame(){
overDoor1 = false;
}

part1Room2Ctx.textAlign = "left";
if(flag2 == false){
part1Room2Ctx.font = hallText.font;
part1Room2Ctx.fillStyle = hallText.fillStyle;
Expand All @@ -363,6 +387,10 @@ function Room2frame(){
part1Room2Ctx.fillStyle = hallText2.fillStyle;
part1Room2Ctx.fillText(hallText2.text,hallText2.posX,hallText2.posY);
}
part1Room2Ctx.textAlign = "center";
part1Room2Ctx.font = hallText3.font;
part1Room2Ctx.fillStyle = hallText3.fillStyle;
part1Room2Ctx.fillText(hallText3.text,hallText3.posX,hallText3.posY);

part1Display.draw(1); //update section display

Expand Down Expand Up @@ -408,6 +436,12 @@ function Room1frame(){
pos = [pos.x,500-pos.y]; //fix position
}
if(pos[0]>=-64 && pos[0]<1360){
if(myCharacter.directionX == 1){
myCharacterObject.state = 0;
}
else {
myCharacterObject.state = 1;
}
myCharacterObject.OverridePosition(pos); //update character position
if(myCharacter.moving == true){ //if charavter is moving then animate
if (currentFrame % Math.round(fps/12)==0 && showEKeySprite == false){
Expand Down Expand Up @@ -531,13 +565,15 @@ function start(){
Menuframe();
};

var waitForResponse = false; //for situations where you need to wait for an input
//listener for e key events
window.addEventListener('keydown',function(e){
if (e.code === "KeyE") {
// Check for overlap with boxObject2
if (checkForOverlap(myCharacterObject, boxObject2)&&box2==true) {
box2 = false;
// Make boxObject2 disappear
boxAudio.play();
boxObject2.scale = [0,0];
showEKeySprite = false;
}
Expand All @@ -546,13 +582,15 @@ window.addEventListener('keydown',function(e){
box1 = false;
// Make boxObject1 disappear
boxObject1.scale = [0,0];
boxAudio.play();
showEKeySprite = false;
}
// Check for overlap with boxStackObject2
if (checkForOverlap(myCharacterObject, boxStackObject2)&&box4==true) {
box4 = false;
// Make boxStackObject2 disappear
boxStackObject2.scale = [0,0];
boxAudio.play();
showEKeySprite = false;
}
// Check for overlap with boxStackObject1
Expand All @@ -570,8 +608,41 @@ window.addEventListener('keydown',function(e){
Fadeframe(part1Display,part1Room1Display,part1Room2Display,Room2frame);
setTimeout(function(){active2 = false;switching=false;},1000);
};
if (overDoor2) {
if (overDoor2&&flag2==false) {
active3 = false;
flag2 = true;
part1Display.activeDisplay = part1ConversationDisplay;
var ctx = part1ConversationCanvas.getContext("2d");
var conversation = "Oh, your the new neighbor? Welcome the the apartments. My name is Amanada, nice to meet you!";
var conversation2 = "I hope you settle in well. Anyways... its getting late you should head to bed.";
var length = 0;
waitForResponse = true;
function text(){
length+=1;
ctx.clearRect(0,0,part1ConversationCanvas.width,part1ConversationCanvas.height);
ctx.textAlign="center"
ctx.fillText(conversation.substring(0,length),250,250);
if (length >= conversation.length){
ctx.fillText(conversation2.substring(0,length-conversation.length),250,265);
}
if (length >= conversation.length+conversation2.length){
ctx.fillText("press e",250,350);
}
part1Display.draw(1);
mainDisplay.draw(1);
if (length < conversation.length+conversation2.length || waitForResponse){
setTimeout(requestAnimationFrame(text),1000);
}
else{
setTimeout(function(){
part1Display.activeDisplay = part1Room2Display;
active3 = true
allowMovement = true;
Room2frame();},5000)
}
}
text()

};
if (overDoor1&&switching==false&&active3==true) {
switching = true;
Expand All @@ -580,6 +651,28 @@ window.addEventListener('keydown',function(e){
Fadeframe(part1Display,part1Room2Display,part1Room1Display,Room1frame);
setTimeout(function(){active3 = false;switching=false;},1000);
};

if (overBed && flag2 == true){
active2 = false;
flag3 = true;
part1Display.activeDisplay = part1ConversationDisplay;
var ctx = part1ConversationCanvas.getContext("2d");
ctx.clearRect(0,0,500,500);
var conversation = "Thank You For Playing!";
ctx.textAlign="center"
ctx.font = "bold 24px"
ctx.fillText(conversation,250,250);
conversation = "See some other parts of the project that we weren't able to implement!";
ctx.textAlign="center"
ctx.font = "bold 24px"
ctx.fillText(conversation,250,300);
part1Display.draw();
mainDisplay.draw();
}

if (waitForResponse) {
waitForResponse = false;
};
}
});

Expand Down
51 changes: 50 additions & 1 deletion _posts/2023-10-26-SeanProgress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ up = "KeyW";
down = "KeyS";
...
```

This determines which keys mean what functions (move left,rigth, up, down)

```
//handle keydowns(press key)
...
Expand All @@ -66,10 +68,12 @@ case this.up:
this.movingY = false; //stop moving down
break;
```

Define what key does what and when. When you press the W key it move the character up, when you let go it stops, and same for "S" key.
This meant that gravity had to be set to 0/deleted.

This ability to move up and down had the problem that the character could now walk on the wall, which we did not want.

```
var pos = myCharacter.onFrame(fps); //update frame, and get position
pos = [pos.x,500-pos.y]; //fix position
Expand All @@ -84,8 +88,45 @@ var pos = myCharacter.onFrame(fps); //update frame, and get position
pos[0] = -32;
}
```

This checks where the character is, and if they are too far left (if (pos[0]) < -32) then they cannot walk any further. Same for moving up past the floor line, (if (pos[1] < 240)) then they can only walk left, right, or down. [1] means y axis, [0] means x axis.

- Monster and death
In the minigame, the monster will follow you and if it gets too close it will kill you. It follows you by tracking how far the monster is from the character and then move it closer to the character until they are overlapping. When they overlap, it uses collisions to stop drawing the character and remove him from the screen. It also stops all the other sprites from running and then will play the death animation where the character died. It will then run the death sprites and the fade to black sprites and stop when they finish.

```
// Calculate the distance between the character and the monster
var characterX = pos[0];
var characterY = pos[1];
var monsterX = monsterObject.position[0];
var monsterY = monsterObject.position[1];
var deltaX = characterX - monsterX;
var deltaY = characterY - monsterY;
var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
// Define a speed at which the monster follows the character
var monsterSpeed = 2;
if (distance > monsterSpeed) {
var angle = Math.atan2(deltaY, deltaX);
var newX = monsterX + monsterSpeed * Math.cos(angle);
var newY = monsterY + monsterSpeed * Math.sin(angle);
monsterObject.OverridePosition([newX, newY]);
}
```

```
// Check for overlap between the character and the monster
if (checkForOverlap(myCharacterObject, monsterObject)||checkForOverlap(monsterObject, myCharacterObject)) {
isCharacterAlive = false;
showCharacter = false;
active = false;
animationFrame = 0;
display.objects = [windowObject1,windowObject2,windowObject3,windowObject4,windowObject5,backgroundObject,elevatorObject,monsterObject,fadeObject,deathObject]
deathAnimation();
}
```

# Drawings
![bedroom](/Group/images/Game/room1update.png)

Expand All @@ -97,4 +138,12 @@ This checks where the character is, and if they are too far left (if (pos[0]) <

![man walking](/Group/images/Game/walking-sprite.png)

![squid ambient](/Group/images/Game/squidambient-sprite.png)
![man dying](/Group/images/Game/deathsprite.png)

![squid ambient](/Group/images/Game/Squid(3).png)

![minigameroom1](/Group/images/Game/officeroom4.png)

![minigameroom2](/Group/images/Game/minigameroom2.png)

![elevator sprite](/Group/images/Game/elevatorsprite.png)
10 changes: 6 additions & 4 deletions _posts/2023-10-26-TrystanProgress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ I did a lot of code. I made most of the classes and functions (objects) that we
<script type="module">
import Object from "/Group/myScripts/GameScripts/CreateObject.js";
var SquidSprite = new Image();
SquidSprite.src = "/Group/images/Game/squidambient-sprite.png";
SquidSprite.src = "/Group/images/Game/squid.png";
var squidObject = new Object("character", SquidSprite ,[190,175],[90,90],[5,95],4,1);
var currentFrame = 0;
var ctx = document.getElementById("drawOnMe").getContext("2d");
Expand Down Expand Up @@ -269,6 +269,7 @@ var myMovement = new Movement();
document.addEventListener("keydown",function(event){myMovement.handleKeydown(event); update()});
document.addEventListener("keyup",function(event){myMovement.handleKeyup(event); update()});
setInterval(function(){myMovement.onFrame(24)},1000/24);

</script>

<p><br /></p>
Expand Down Expand Up @@ -456,7 +457,7 @@ var myCharacter = new Controller();
document.addEventListener("keydown",myCharacter.handleKeydown.bind(myCharacter));
document.addEventListener("keyup",myCharacter.handleKeyup.bind(myCharacter));
var characterSpriteSheet = new Image();
characterSpriteSheet.src = "/Group/images/Game/squidambient-sprite.png";
characterSpriteSheet.src = "/Group/images/Game/squid.png";
var myCharacterObject = new Object("character", characterSpriteSheet,[190,175],[190,175],[250,500],4,1);
var redPixelSprite = new Image();
redPixelSprite.src = "/Group/images/Game/redPixel.png"
Expand Down Expand Up @@ -513,9 +514,10 @@ window.addEventListener("load",function(){
ctx.font = "bold 80px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "center"
ctx.fillText("Displays!",250,250)
ctx.fillText("Displays!",250,250);
frame(); //run frame
}) //wait for window to load then draw static canvas
frame(); //run frame

</script>
<br /></p>

Expand Down
Loading

0 comments on commit 525f58f

Please sign in to comment.