dominic/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

maomao

Browse source
This commit is contained in:
Dominic DiTaranto 2026-01-02 12:44:20 -05:00
parent eacc1db61a
commit aa818de398
8 changed files with 43 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/style.css
View file

@ -103,7 +103,7 @@ canvas {
padding: 20px; padding: 20px;
} }
#contact { #contact, #maomao {
background: #a3acbe; background: #a3acbe;
position: relative; position: relative;
height: inherit; height: inherit;

BIN
assets/img/thumbnails/maomao.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 284 KiB

2
assets/js/app.js
View file

@ -18,6 +18,7 @@ canvas.height = canvas.width
var audio = null var audio = null
var contact = new Contact() var contact = new Contact()
var maomao = new Maomao()
var terminal = new Terminal() var terminal = new Terminal()
var games = new Games() var games = new Games()
var music = new Music() var music = new Music()
@ -166,7 +167,6 @@ function gameLoop() {
} else { } else {
this.getKeystroke() this.getKeystroke()
} }
} }
spriteMap.onload = function() { spriteMap.onload = function() {

8
assets/js/constants.js
View file

@ -21,9 +21,15 @@ var boundaryMap = {
"07": [0, 6], "07": [0, 6],
//maomao //maomao
"65": [6, 4] "65": [6, 4]
} }
var maomaoInteractionZones = [
[6, 4],
[7, 5],
[5, 5],
[6, 6]
]
var computerInteractionZones = [ var computerInteractionZones = [
[2, 4], [2, 4],
[3, 4] [3, 4]

4
assets/js/keystroke.js
View file

@ -48,6 +48,10 @@ function onEnter() {
} }
} }
if (maomaoInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
maomao.show();
}
if (player.direction === 'down' || player.direction === 'up') { if (player.direction === 'down' || player.direction === 'up') {
if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) { if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
indicator.hide('resume'); indicator.hide('resume');

5
assets/js/maomao.js Normal file
View file

@ -0,0 +1,5 @@
class Maomao extends Window {
constructor() {
super('maomao')
}
}

6
assets/js/pathfinder.js
View file

@ -215,6 +215,12 @@ async function pathfind(destX, destY) {
music.show() music.show()
} }
if (destX === 6 && destY === 6) {
player.direction = 'up'
maomao.show()
}
dialog.hide()
} }
function changeDir(destX, destY) { function changeDir(destX, destY) {

94
index.html
View file

@ -13,6 +13,7 @@
<script type="text/javascript" src="./assets/js/window.js" defer></script> <script type="text/javascript" src="./assets/js/window.js" defer></script>
<script type="text/javascript" src="./assets/js/terminal.js" defer></script> <script type="text/javascript" src="./assets/js/terminal.js" defer></script>
<script type="text/javascript" src="./assets/js/games.js" defer></script> <script type="text/javascript" src="./assets/js/games.js" defer></script>
<script type="text/javascript" src="./assets/js/maomao.js" defer></script>
<script type="text/javascript" src="./assets/js/music.js" defer></script> <script type="text/javascript" src="./assets/js/music.js" defer></script>
<script type="text/javascript" src="./assets/js/resume.js" defer></script> <script type="text/javascript" src="./assets/js/resume.js" defer></script>
<script type="text/javascript" src="./assets/js/portfolio.js" defer></script> <script type="text/javascript" src="./assets/js/portfolio.js" defer></script>
@ -62,81 +63,6 @@
<img src="./assets/img/empty2.png" usemap="#click-map" alt=""> <img src="./assets/img/empty2.png" usemap="#click-map" alt="">
</div> </div>
<map name="click-map" id="click-map"></map> <map name="click-map" id="click-map"></map>
<!---->
<!-- <area shape="rect" href="#" onclick="console.log('hi'); pathfind(0, 0)" coords="0,0,80,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 1)" coords="0,80,80,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 2)" coords="0,160,80,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 3)" coords="0,240,80,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 4)" coords="0,320,80,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 5)" coords="0,400,80,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 6)" coords="0,480,80,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 7)" coords="0,560,80,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 8)" coords="0,640,80,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 0)" coords="80,0,160,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 1)" coords="80,80,160,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 2)" coords="80,160,160,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 3)" coords="80,240,160,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 4)" coords="80,320,160,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 5)" coords="80,400,160,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 6)" coords="80,480,160,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 7)" coords="80,560,160,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 8)" coords="80,640,160,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 0)" coords="160,0,240,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 1)" coords="160,80,240,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 2)" coords="160,160,240,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 3)" coords="160,240,240,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 4)" coords="160,320,240,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 5)" coords="160,400,240,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 6)" coords="160,480,240,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 7)" coords="160,560,240,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 8)" coords="160,640,240,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 0)" coords="240,0,320,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 1)" coords="240,80,320,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 2)" coords="240,160,320,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 3)" coords="240,240,320,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 4)" coords="240,320,320,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 5)" coords="240,400,320,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 6)" coords="240,480,320,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 7)" coords="240,560,320,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 8)" coords="240,640,320,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 0)" coords="320,0,400,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 1)" coords="320,80,400,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 2)" coords="320,160,400,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 3)" coords="320,240,400,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 4)" coords="320,320,400,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 5)" coords="320,400,400,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 6)" coords="320,480,400,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 7)" coords="320,560,400,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 8)" coords="320,640,400,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 0)" coords="400,0,480,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 1)" coords="400,80,480,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 2)" coords="400,160,480,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 3)" coords="400,240,480,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 4)" coords="400,320,480,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 5)" coords="400,400,480,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 6)" coords="400,480,480,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 7)" coords="400,560,480,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 8)" coords="400,640,480,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 0)" coords="480,0,560,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 1)" coords="480,80,560,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 2)" coords="480,160,560,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 3)" coords="480,240,560,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 4)" coords="480,320,560,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 5)" coords="480,400,560,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 6)" coords="480,480,560,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 7)" coords="480,560,560,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 8)" coords="480,640,560,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 0)" coords="560,0,640,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 1)" coords="560,80,640,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 2)" coords="560,160,640,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 3)" coords="560,240,640,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 4)" coords="560,320,640,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 5)" coords="560,400,640,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 6)" coords="560,480,640,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 7)" coords="560,560,640,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 8)" coords="560,640,640,720" /> -->
<!---->
<!-- </map> -->
<div class="controls" id="controls"> <div class="controls" id="controls">
<img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap"> <img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap">
@ -180,6 +106,24 @@
/> />
</map> </map>
<!-- maomao -->
<div class="window-container" id="maomao-container">
<div class="window-bar">
<div style="float:inline-start;">
😺 MaoMao
</div>
<div style="float:inline-end;">
<button class="close-button" onclick="maomao.hide()">X</button>
</div>
<div style="clear:both;"></div>
</div>
<div id="maomao">
<center>
<img style="margin-top: 50px;height:100%; width:500px;" src="./assets/img/thumbnails/maomao.png" alt="">
</center>
</div>
</div>
<!-- Terminal --> <!-- Terminal -->
<div class="window-container" id="term-container"> <div class="window-container" id="term-container">
<div class="window-bar"> <div class="window-bar">