🥤
JavaScriptでソーダゲーム
昔 DS に「だれでもアソビ大全」というソフトがあり、その中に「ソーダゲーム」というものがあった。交代でソーダを振って、吹き出させた人が負けというゲームである。それをまねてつくった。
だれでもアソビ大全には NPC がいたが、私のつくったゲームにそんな高度なものはない。プレイヤーは一人だけなので、プレイすれば負けることが運命づけられている。
サンプル
コード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="style.css" rel="stylesheet" />
<title>Soda</title>
</head>
<body>
<div class="soda">ソーダ</div>
<script src="index.js"></script>
</body>
</html>
index.js
const soda = document.getElementsByClassName("soda")[0];
const sodaWidth = 50;
const sodaHeight = 100;
const gameOverDistance = 3000; // これ以上振ったらゲームオーバー
let movingDistance = 0; // ソーダの移動距離
// 初期表示
window.addEventListener("DOMContentLoaded", () => {
soda.style.width = `${sodaWidth}px`;
soda.style.height = `${sodaHeight}px`;
});
soda.addEventListener("pointermove", (e) => {
// 泡が出たら、ソーダの移動を停止
if (document.getElementsByClassName("bubble").length) {
return;
}
// 一定量振ったら、泡を出す
if (movingDistance > gameOverDistance) {
const bubble = document.createElement("div");
bubble.className = "bubble";
bubble.style.width = `${sodaWidth / 2}px`;
bubble.style.height = `${sodaWidth / 2}px`;
bubble.style.left = `${soda.offsetLeft + sodaWidth / 4}px`;
bubble.style.top = `${soda.offsetTop - sodaWidth / 2}px`;
document.body.appendChild(bubble);
return;
}
// カーソルに合わせてソーダを移動
if (e.buttons) {
soda.style.left = `${soda.offsetLeft + e.movementX}px`;
soda.style.top = `${soda.offsetTop + e.movementY}px`;
soda.setPointerCapture(e.pointerId);
// ソーダの移動距離を積算
movingDistance += Math.abs(e.movementX) + Math.abs(e.movementY);
}
});
style.css
.soda {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
border: 1px solid black;
writing-mode: vertical-lr;
}
.bubble {
position: absolute;
border: 1px solid black;
border-radius: 100%;
animation: bubble-animation 0.8s ease infinite;
}
@keyframes bubble-animation {
0% {
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
Discussion