<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ジャンプゲーム</title>
<style>
#game {
background-color: #FFF;
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
#player {
position: absolute;
bottom: 0;
width: 50px;
height: 50px;
background-color: red;
transition: bottom 0.3s;
}
.garbage {
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
animation: garbageAnimation 2s linear infinite;
}
@keyframes garbageAnimation {
0% { left: 100%; }
100% { left: -50px; }
}
</style>
</head>
<body>
<div id="game">
<div id="player"></div>
<div id="garbage1" class="garbage"></div>
<div id="garbage2" class="garbage"></div>
<div id="garbage3" class="garbage"></div>
</div>
<script>
const player = document.getElementById('player');
const garbage1 = document.getElementById('garbage1');
const garbage2 = document.getElementById('garbage2');
const garbage3 = document.getElementById('garbage3');
let jumpHeight = 0;
document.addEventListener('touchstart', () => {
jumpHeight = 100;
player.style.bottom = `${jumpHeight}px`;
});
document.addEventListener('touchend', () => {
jumpHeight = 0;
player.style.bottom = `${jumpHeight}px`;
});
function moveGarbage() {
const garbageSpeed = 10;
const maxLeft = -50;
const garbage1Left = parseInt(getComputedStyle(garbage1).left);
const garbage2Left = parseInt(getComputedStyle(garbage2).left);
const garbage3Left = parseInt(getComputedStyle(garbage3).left);
if (garbage1Left <= maxLeft) {
garbage1.style.left = '100%';
} else {
garbage1.style.left = `${garbage1Left - garbageSpeed}px`;
}
if (garbage2Left <= maxLeft) {
garbage2.style.left = '100%';
} else {
garbage2.style.left = `${garbage2Left - garbageSpeed}px`;
}
if (garbage3Left <= maxLeft) {
garbage3.style.left = '100%';
} else {
garbage3.style.left = `${garbage3Left - garbageSpeed}px`;
}
requestAnimationFrame(moveGarbage);
}
moveGarbage();
</script>
</body>
</html>
ジョーク：なぜプログラマは悲劇のヒーローのような存在なのでしょうか？
JavaScriptでevalを使ってしまうから、常に評価されてしまうためです！
