3Dキネティックバウンスアリーナゲームプロンプト
フリーのプロンプト百科事典 Wikiprompt より
3Dキネティックバウンスアリーナゲームプロンプト AIが単一ファイルのHTML5 3Dゲームを生成するための包括的なプロンプト。物理演算、ネオン美学、インタラクティブなマウス傾きコントロールを備えたもの。
プロンプト内容保存
🌐
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Kinetic Bounce Arena</title>
<style>
body {
margin: 0;
padding: 0;
background: #0a0a12;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
border-radius: 12px;
}
#info {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #00ffff;
font-size: 14px;
letter-spacing: 2px;
text-shadow: 0 0 10px #00ffff;
opacity: 0.8;
pointer-events: none;
z-index: 10;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script>
// ===== 定数・設定 =====
const PARTICLE_COUNT = 25;
const CYLINDER_RADIUS = 200;
const CYLINDER_HEIGHT = 300;
const SPHERE_RADIUS = 25;
const PARTICLE_RADIUS = 6;
const GRAVITY = 0.15;
const DAMPING = 0.98;
const TRAIL_LENGTH = 12;
// ===== 状態 =====
let mainSphere;
let particles = [];
let trails = [];
let tiltX = 0;
let tiltZ = 0;
let camZoom = 1;
let targetZoom = 1;
// ===== セットアップ =====
function setup() {
createCanvas(600, 600, WEBGL);
pixelDensity(1);
// メインスフィア初期化
mainSphere = {
pos: createVector(0, 0, 0),
vel: createVector(5, 8, 3),
radius: SPHERE_RADIUS,
color: [0, 255, 255]
};
// パーティクル初期化
for (let i = 0; i < PARTICLE_COUNT; i++) {
particles.push({
pos: createVector(
random(-CYLINDER_RADIUS * 0.7, CYLINDER_RADIUS * 0.7),
random(-CYLINDER_HEIGHT * 0.4, CYLINDER_HEIGHT * 0.4),
random(-CYLINDER_RADIUS * 0.7, CYLINDER_RADIUS * 0.7)
),
vel: createVector(random(-2, 2), random(-2, 2), random(-2, 2)),
radius: PARTICLE_RADIUS,
color: [random(100, 255), random(100, 255), random(100, 255)],
trail: []
});
}
// トレイル配列初期化
trails = particles.map(p => []);
}
// ===== 描画ループ =====
function draw() {
background(10, 10, 18);
// マウスで傾き制御
tiltX = map(mouseX, 0, width, -0.15, 0.15);
tiltZ = map(mouseY, 0, height, -0.15, 0.15);
// カメラズーム自動調整（スフィア速度に基づく）
let speed = mainSphere.vel.mag();
targetZoom = map(speed, 0, 20, 1.2, 0.8);
camZoom = lerp(camZoom, targetZoom, 0.05);
// ライティング設定
ambientLight(60, 60, 80);
directionalLight(200, 100, 255, 0.5, 0.5, -1);
pointLight(0, 255, 255, 0, 0, 0);
// カメラ回転・ズーム
rotateX(tiltZ);
rotateZ(tiltX);
scale(camZoom);
// シリンダー描画
drawCylinder();
// 物理更新
updateMainSphere();
updateParticles();
// 描画
drawMainSphere();
drawParticles();
drawTrails();
// 情報表示
push();
resetMatrix();
fill(0, 255, 255, 200);
noStroke();
textSize(12);
textAlign(CENTER);
text('KINETIC BOUNCE ARENA', 0, -280);
pop();
}
// ===== シリンダー描画 =====
function drawCylinder() {
push();
noFill();
stroke(0, 255, 255, 150);
strokeWeight(2);
// 側面（ワイヤーフレーム）
beginShape(TRIANGLE_STRIP);
for (let i = 0; i <= 60; i++) {
let angle = map(i, 0, 60, 0, TWO_PI);
let x = cos(angle) * CYLINDER_RADIUS;
let z = sin(angle) * CYLINDER_RADIUS;
vertex(x, -CYLINDER_HEIGHT / 2, z);
vertex(x, CYLINDER_HEIGHT / 2, z);
}
endShape();
// 上下リング
stroke(255, 0, 255, 100);
strokeWeight(1);
for (let y = -CYLINDER_HEIGHT / 2; y <= CYLINDER_HEIGHT / 2; y += CYLINDER_HEIGHT / 4) {
beginShape();
for (let i = 0; i <= 60; i++) {
let angle = map(i, 0, 60, 0, TWO_PI);
vertex(cos(angle) * CYLINDER_RADIUS, y, sin(angle) * CYLINDER_RADIUS);
}
endShape(CLOSE);
}
// グロー効果
stroke(0, 255, 255, 30);
strokeWeight(8);
beginShape(TRIANGLE_STRIP);
for (let i = 0; i <= 60; i++) {
let angle = map(i, 0, 60, 0, TWO_PI);
let x = cos(angle) * (CYLINDER_RADIUS + 5);
let z = sin(angle) * (CYLINDER_RADIUS + 5);
vertex(x, -CYLINDER_HEIGHT / 2 - 5, z);
vertex(x, CYLINDER_HEIGHT / 2 + 5, z);
}
endShape();
pop();
}
// ===== メインスフィア更新 =====
function updateMainSphere() {
// 重力（傾きに応じて方向変化）
let gravityVec = createVector(
tiltX * 2,
GRAVITY,
tiltZ * 2
);
mainSphere.vel.add(gravityVec);
mainSphere.vel.mult(DAMPING);
mainSphere.pos.add(mainSphere.vel);
// シリンダー壁衝突
let distFromAxis = sqrt(mainSphere.pos.x * mainSphere.pos.x + mainSphere.pos.z * mainSphere.pos.z);
if (distFromAxis > CYLINDER_RADIUS - mainSphere.radius) {
let normal = createVector(mainSphere.pos.x, 0, mainSphere.pos.z).normalize();
mainSphere.pos.x = normal.x * (CYLINDER_RADIUS - mainSphere.radius);
mainSphere.pos.z = normal.z * (CYLINDER_RADIUS - mainSphere.radius);
let dot = mainSphere.vel.dot(normal);
mainSphere.vel.sub(normal.mult(2 * dot));
mainSphere.vel.mult(0.9);
}
// 上下衝突
if (mainSphere.pos.y > CYLINDER_HEIGHT / 2 - mainSphere.radius) {
mainSphere.pos.y = CYLINDER_HEIGHT / 2 - mainSphere.radius;
mainSphere.vel.y *= -0.9;
}
if (mainSphere.pos.y < -CYLINDER_HEIGHT / 2 + mainSphere.radius) {
mainSphere.pos.y = -CYLINDER_HEIGHT / 2 + mainSphere.radius;
mainSphere.vel.y *= -0.9;
}
// パーティクルとの衝突
for (let p of particles) {
let dist = p5.Vector.dist(mainSphere.pos, p.pos);
if (dist < mainSphere.radius + p.radius) {
let normal = p5.Vector.sub(p.pos, mainSphere.pos).normalize();
let relVel = p5.Vector.sub(p.vel, mainSphere.vel);
let speed = relVel.dot(normal);
if (speed < 0) {
let impulse = normal.mult(-2 * speed);
p.vel.add(impulse);
mainSphere.vel.sub(impulse.mult(0.5));
p.vel.mult(1.05);
}
}
}
}
// ===== パーティクル更新 =====
function updateParticles() {
for (let i = 0; i < particles.length; i++) {
let p = particles[i];
// 重力
p.vel.add(createVector(tiltX * 0.5, GRAVITY * 0.3, tiltZ * 0.5));
p.vel.mult(DAMPING);
p.pos.add(p.vel);
// 壁衝突
let distFromAxis = sqrt(p.pos.x * p.pos.x + p.pos.z * p.pos.z);
if (distFromAxis > CYLINDER_RADIUS - p.radius) {
let normal = createVector(p.pos.x, 0, p.pos.z).normalize();
p.pos.x = normal.x * (CYLINDER_RADIUS - p.radius);
p.pos.z = normal.z * (CYLINDER_RADIUS - p.radius);
let dot = p.vel.dot(normal);
p.vel.sub(normal.mult(2 * dot));
p.vel.mult(0.8);
}
if (p.pos.y > CYLINDER_HEIGHT / 2 - p.radius) {
p.pos.y = CYLINDER_HEIGHT / 2 - p.radius;
p.vel.y *= -0.8;
}
if (p.pos.y < -CYLINDER_HEIGHT / 2 + p.radius) {
p.pos.y = -CYLINDER_HEIGHT / 2 + p.radius;
p.vel.y *= -0.8;
}
// パーティクル間衝突
for (let j = i + 1; j < particles.length; j++) {
let other = particles[j];
let dist = p5.Vector.dist(p.pos, other.pos);
if (dist < p.radius + other.radius) {
let normal = p5.Vector.sub(other.pos, p.pos).normalize();
let relVel = p5.Vector.sub(other.vel, p.vel);
let speed = relVel.dot(normal);
if (speed < 0) {
let impulse = normal.mult(-speed * 0.5);
p.vel.sub(impulse);
other.vel.add(impulse);
}
}
}
// トレイル更新
p.trail.push(p.pos.copy());
if (p.trail.length > TRAIL_LENGTH) {
p.trail.shift();
}
}
}
// ===== 描画関数 =====
function drawMainSphere() {
push();
translate(mainSphere.pos.x, mainSphere.pos.y, mainSphere.pos.z);
// グロー
noStroke();
fill(0, 255, 255, 30);
sphere(mainSphere.radius * 2);
// 本体
fill(0, 255, 255, 200);
specularMaterial(255);
shininess(100);
sphere(mainSphere.radius);
// ハイライト
fill(255, 255, 255, 100);
sphere(mainSphere.radius * 0.5);
pop();
}
function drawParticles() {
for (let p of particles) {
push();
translate(p.pos.x, p.pos.y, p.pos.z);
noStroke();
fill(p.color[0], p.color[1], p.color[2], 180);
specularMaterial(255);
shininess(50);
sphere(p.radius);
// グロー
fill(p.color[0], p.color[1], p.color[2], 20);
sphere(p.radius * 2);
pop();
}
}
function drawTrails() {
for (let p of particles) {
if (p.trail.length > 1) {
push();
noFill();
strokeWeight(2);
for (let i = 1; i < p.trail.length; i++) {
let alpha = map(i, 0, p.trail.length, 0, 150);
stroke(p.color[0], p.color[1], p.color[2], alpha);
line(
p.trail[i-1].x, p.trail[i-1].y, p.trail[i-1].z,
p.trail[i].x, p.trail[i].y, p.trail[i].z
);
}
pop();
}
}
}
</script>
</head>
<body>
<div id="info">マウスを動かしてコンテナを傾ける</div>
</body>
</html>
ログインして完全なプロンプトを表示
次で続行:
ログインすると、次に同意したことになります： 利用規約 と プライバシーポリシー
使い方
このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー（角括弧や大文字で示された部分）を具体的な要件に置き換えてください。
ノート
0 件のコメント