Commit 95b6d21e authored by Michael Weber's avatar Michael Weber
Browse files

Initial commit

parents
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# IDEs and editors
.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
.sass-cache
connect.lock
typings
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Dependency directories
node_modules/
jspm_packages/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
# Lerna
lerna-debug.log
# System Files
.DS_Store
Thumbs.db
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KeyToImage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="screen">
<img id="screenImage" class="screen__image" src="images/right.png" alt="image">
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
\ No newline at end of file
const screenImage = document.getElementById("screenImage");
document.addEventListener('keydown', changeImage);
const keyImageMap = new Map();
keyImageMap.set('ArrowRight', 'right.png');
keyImageMap.set('ArrowLeft', 'left.png');
keyImageMap.set('ArrowUp', 'right.png');
keyImageMap.set('w', 'lookaround.png');
keyImageMap.set(' ', 'jump.png');
keyImageMap.set('Enter', 'stop.jpg');
keyImageMap.set('Escape', 'stop.jpg');
function changeImage(e) {
console.log(` ${e.key}`);
if (!keyImageMap.has(e.key)) return;
const path = "images/" + keyImageMap.get(e.key);
console.log(` ${e.key} => ${path}`);
screenImage.src = path;
}
\ No newline at end of file
.screen {
position: absolute;
height: 99%;
width: 99%;
}
.screen__image {
object-fit: contain;
width: 100%;
height: 100%;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TouchToSound</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="touchScreen" class="screen">
<!-- Images are added via JavaScript -->
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
\ No newline at end of file
const images = [];
images.push(new ImageSound("left.png", "left.mp3", 15, 5));
images.push(new ImageSound("right.png", "right.mp3", 15, 25));
images.push(new ImageSound("stop.jpg", "stop.mp3", 5, 15));
images.push(new ImageSound("jump.png", "look around.mp3", 25, 15));
images.push(new ImageSound("lookaround.png", "t-rex-roar.mp3", 50, 20, 10, 20));
const touchScreen = document.getElementById("touchScreen");
images.forEach(image => {
console.log(image)
const DOM_img = document.createElement("img");
DOM_img.src = "images/" + image.image;
DOM_img.classList.add("screen__image");
DOM_img.style.top = image.top + "%";
DOM_img.style.left = image.left + "%";
DOM_img.style.width = image.width + "%";
DOM_img.style.height = image.height + "%";
DOM_img.dataset.sound = image.sound;
DOM_img.alt = image.sound;
DOM_img.addEventListener("click", function () {
playSound(image.sound);
});
touchScreen.appendChild(DOM_img);
});
function playSound(sound) {
console.log(sound);
const audio = new Audio('sounds/' + sound);
audio.oncanplaythrough = function () {
audio.play();
}
audio.onended = function () {
console.log("ended", sound);
}
}
function ImageSound(image, sound, top, left, width = 5, height = 10) {
this.image = image;
this.sound = sound;
this.top = top;
this.left = left;
this.width = width;
this.height = height;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment