以下が実際のプログラムです。セキュリティ脆弱性に注意しつつ実装しました。
```html
<!DOCTYPE html>
<html>
<head>
<title>上に向かって進むゲーム</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>上に向かって進むゲーム</h1>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// ジャンプするための力
const jumpPower = 10;
// 棒の寿命
const lifespan = 200;
// キャンバスの取得
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// ●の設定
let stick = {
x: canvas.width / 2, // 初期位置はキャンバスの中央
y: canvas.height - 50, // 画面下部から50だけ離す
width: 10,
height: 10,
jumping: false, // ジャンプ状態かどうか
jumpCount: 0, // ジャンプしてから経過したフレーム数
jumpDirection: 1, // ジャンプの方向。1なら上、-1なら下
speed: 5, // 左右の移動スピード
score: 0 // 得点
};
// 足場の設定
let sticks = [];
// 棒を生成する関数
function createStick() {
const stickWidth = canvas.width / 4;
const stickHeight = 10;
const stickX = Math.random() * (canvas.width - stickWidth);
const stickY = Math.random() * (canvas.height - stickHeight * 2) + stickHeight * 2; // 上下に少し余裕を持たせる
const newStick = {
x: stickX,
y: stickY,
width: stickWidth,
height: stickHeight,
life: lifespan
};
sticks.push(newStick);
}
// 最初に棒を10本生成する
for (let i = 0; i < 10; i++) {
createStick();
}
// フレームごとの処理
function update() {
// キャンバスをクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ●を描画
ctx.fillStyle = "black";
ctx.fillRect(stick.x - stick.width / 2, stick.y - stick.height / 2, stick.width, stick.height);
// ●のジャンプ処理
if (stick.jumping) {
stick.y += jumpPower * stick.jumpDirection;
stick.jumpCount++;
if (stick.jumpCount > 10) { // 1秒経過したらジャンプ状態解除
stick.jumping = false;
stick.jumpCount = 0;
}
} else {
stick.y += stick.speed;
}
// ●の移動処理
canvas.addEventListener("touchmove", function(event) {
const rect = canvas.getBoundingClientRect();
const x = event.touches[0].clientX - rect.left;
stick.x = x;
});
// ●がキャンバスからはみ出ないようにする
if (stick.x < stick.width / 2) {
stick.x = stick.width / 2;
} else if (stick.x > canvas.width - stick.width / 2) {
stick.x = canvas.width - stick.width / 2;
}
// ●が足場に触れたらジャンプできるようにする
for (let i = 0; i < sticks.length; i++) {
const s = sticks[i];
if (stick.x > s.x && stick.x < s.x + s.width && stick.y + stick.height / 2 > s.y && stick.y - stick.height / 2 < s.y + s.height) {
stick.jumping = true;
stick.jumpDirection = -1;
s.life--; // 足場の耐久力を減らす
if (s.life <= 0) {
sticks.splice(i, 1); // 足場が壊れたら配列から削除する
}
}
}
// スコアの更新
stick.score += Math.round(stick.speed / 10);
// 足場を描画
ctx.fillStyle = "green";
for (let i = 0; i < sticks.length; i++) {
const s = sticks[i];
ctx.fillRect(s.x, s.y, s.width, s.height);
}
// 新しい足場を追加する
if (sticks.length < 10 + Math.round(stick.score / 1000)) {
createStick();
}
// スコアを表示
ctx.fillStyle = "black";
ctx.fillText("Score: " + stick.score, 10, 20);
// 10秒ごとにジョーク
if (Math.round(stick.score / 100) % 10 === 0 && stick.score !== 0) {
console.log("「上に向かって進む」だと言われたけど、すごく前向きなゲームじゃない？");
}
// 再描画
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
</body>
</html>
```
このプログラムはJavaScriptを使って、Canvasを使ったゲームを実装しています。
セキュリティ脆弱性を防ぐために、evalや他のサイトへの遷移、リダイレクトは実装していません。また、alertも使用せず、コンソールにジョークを出力することで楽しさを提供しています。
操作方法はタッチで行うため、PCでは動作しないことに注意してください。
