簡単に株を売買できます。2秒ごとに株価が更新され、売買のタイミングを計る楽しさ。
ゲーム開始時の資産は1000円です。
（これはゲームです。本物ではありません。）
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株価ゲームダッシュボード</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.portfolio {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.stock {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.stock-name {
font-weight: bold;
}
.actions {
display: flex;
align-items: center;
}
button {
margin-left: 10px;
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #28a745;
color: white;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.stock-price {
color: #007bff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<h1>株価ゲームダッシュボード</h1>
<p>架空の株を売買して資産を増やしましょう！</p>
</div>
<div class="portfolio">
<h2>ポートフォリオ</h2>
<div id="portfolioContainer"></div>
<div class="stock">
<span>資産: ¥<span id="totalValue">1000</span></span>
</div>
</div>
<div id="stocksContainer"></div>
<script>
const stocks = [
{ name: "企業A", price: 100 },
{ name: "企業B", price: 200 },
{ name: "企業C", price: 150 },
{ name: "企業D", price: 250 }
];
let portfolio = {};
let totalValue = 1000; // 初期資金 1000円
const stocksContainer = document.getElementById("stocksContainer");
const portfolioContainer = document.getElementById("portfolioContainer");
const totalValueDisplay = document.getElementById("totalValue");
function updateStockPrices() {
stocks.forEach(stock => {
const priceChange = (Math.random() * 10 - 5).toFixed(2); // ±5の価格変動
stock.price = Math.max(0, (stock.price + parseFloat(priceChange)).toFixed(2));
});
renderStocks();
}
function renderStocks() {
stocksContainer.innerHTML = "";
stocks.forEach(stock => {
const stockDiv = document.createElement("div");
stockDiv.className = "stock";
stockDiv.innerHTML = `
<span class="stock-name">${stock.name}</span>
<span class="stock-price">¥${stock.price}</span>
<div class="actions">
<button onclick="buyStock('${stock.name}')">購入</button>
<button onclick="sellStock('${stock.name}')">売却</button>
</div>
`;
stocksContainer.appendChild(stockDiv);
});
}
function buyStock(stockName) {
const quantity = 1; // 購入時は常に1株
const stock = stocks.find(s => s.name === stockName);
const cost = stock.price * quantity;
if (totalValue >= cost) {
totalValue -= cost;
portfolio[stockName] = (portfolio[stockName] || 0) + quantity;
updatePortfolio();
alert(`${stockName}を${quantity}株購入しました。`);
} else {
alert("資金が不足しています。");
}
}
function sellStock(stockName) {
const quantity = 1; // 売却も常に1株
if (portfolio[stockName] && portfolio[stockName] >= quantity) {
const stock = stocks.find(s => s.name === stockName);
totalValue += stock.price * quantity;
portfolio[stockName] -= quantity;
updatePortfolio();
alert(`${stockName}を${quantity}株売却しました。`);
} else {
alert("保有株数が不足しています。");
}
}
function updatePortfolio() {
portfolioContainer.innerHTML = "";
for (let stock in portfolio) {
if (portfolio[stock] > 0) {
const stockDiv = document.createElement("div");
stockDiv.innerHTML = `${stock}: ${portfolio[stock]}株`;
portfolioContainer.appendChild(stockDiv);
}
}
totalValueDisplay.innerText = totalValue.toFixed(2);
}
setInterval(() => {
updateStockPrices();
}, 2000); // 2秒ごとに株価を更新
updateStockPrices(); // 初期株価を表示
</script>
</body>
</html>