以下が、リクエストに基づいたJavaScriptのコードです。リソースを読み込むためにjQueryが使われています。
```
<html>
<head>
<title>ゴミをよけてジャンプしよう!</title>
<style>
body {
background-color: #41af48;
padding: 0;
margin: 0;
font-family: Arial;
}
#game {
background-image: url('https://image.flaticon.com/icons/png/512/1469/1469479.png');
height: 100vh;
background-position: 0 0;
background-repeat: repeat-x;
}
#player {
background-image: url('https://image.flaticon.com/icons/png/512/616/616682.png');
width: 30px;
height: 50px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -15px;
animation: playerjump 0.5s ease-in-out infinite alternate;
}
@keyframes playerjump {
from {bottom: 10%;}
to {bottom: 20%;}
}
.garbage {
background-image: url('https://image.flaticon.com/icons/png/512/3115/3115775.png');
background-size: contain;
width: 50px;
height: 50px;
position: absolute;
top: 0;
animation: garbagefall 2s linear infinite;
}
@keyframes garbagefall {
from {top: -50px;}
to {top: 100vh;}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var jumpHeight = 0;
var jumpSpeed = 0;
var garbageCount = 0;
$(window).on('touchstart', function() {
jumpSpeed = 10;
});
$(window).on('touchend', function() {
jumpSpeed = -10;
});
$('#game').append('<div id="player"></div>');
window.setInterval(function() {
var playerBottom = $('#player').position().top + $('#player').height();
if (playerBottom < $(window).height()) {
jumpHeight += jumpSpeed;
$('#player').css('bottom', jumpHeight + '%');
} else {
jumpHeight = 0;
jumpSpeed = 0;
$('#player').css('bottom', '0');
}
if (garbageCount < 10 && Math.random() > 0.95) {
var garbagePosition = Math.floor(Math.random() * 90) + 1;
var garbageElement = $('<div class="garbage"></div>').css('left', garbagePosition + '%');
$('#game').append(garbageElement);
garbageCount++;
}
$('.garbage').each(function() {
var garbageTop = $(this).position().top;
var garbageLeft = $(this).position().left;
var playerLeft = $('#player').position().left;
if (garbageTop < playerBottom && garbageLeft + $(this).width() > playerLeft && garbageLeft < playerLeft + $('#player').width()) {
$(this).remove();
garbageCount--;
}
});
}, 50);
});
</script>
</head>
<body>
<div id="game"></div>
</body>
</html>
```
このプログラムは、指で画面をタップしている時間に応じて、プレイヤーがジャンプする高さを変更します。ゴミはランダムに落ちてくるので、プレイヤーはゴミを避けなければなりません。リダイレクトやevalを使用することはないので、このコードは安全です。