traderGame.html
<!DOCTYPE html> <html> <head> <title>Stock trader game</title> <link rel="stylesheet" type="text/css" href="traderGame.css"> </head> <body onload="reset()"> <h1>Stock trader game</h1> <table> <tr> <td>Hours remaining:</td> <td><span id="hoursleft"></span></td> </tr> <tr> <td>Stocks:</td> <td><span id="stocks"></span></td> </tr> <tr> <td>Money:</td> <td>$<span id="money"></span></td> </tr> </table> <br><hr><br> <table> <tr> <td>Trading stocks:</td> <td>$<span id="tradeprice"></span></td> </tr> <tr> <td colspan="2">Actions:</td> </tr> <tr> <td colspan="2"> <input type="button" value="Buy" onclick="buy()"> <input type="button" value="Sell" onclick="sell()"> <input type="button" value="Wait 1hr" onclick="wait()"> </td> </tr> </table> <script src="traderGame.js"></script> </body> </html>
table { border-collapse: collapse; } td { border: 3px solid #778899; text-align: left; padding: 5px; }
var shops, hoursleft, tradeprice, stocks, money; function update(){ document.getElementById("hoursleft").innerHTML = hoursleft; document.getElementById("tradeprice").innerHTML = tradeprice; document.getElementById("stocks").innerHTML = stocks; document.getElementById("money").innerHTML = money; } function sell(){ var sellAmount = parseInt(prompt("How many stocks to sell?")); if(sellAmount <= stocks){ var profit = sellAmount * tradeprice; money = money + profit; stocks = stocks - sellAmount; alert("Sold " + sellAmount + " stocks, you have made $" + profit); update(); } else{ alert("You don't have enough stocks.") } } function buy(){ var buyAmount = parseInt(prompt("How many stocks to buy?")); var cost = buyAmount * tradeprice; if(cost <= money){ money = money - cost; stocks = stocks + buyAmount; alert("Bought " + buyAmount + " stocks, which cost you $" + cost); update(); } else{ alert("You don't have enough money.") } } function wait(){ hoursleft = hoursleft - 1; if (hoursleft < 1){ alert("GAME OVER. FINAL SCORE: $" + money); location.reload(); } else{ generateRandomTradePrice(); update(); alert("An hour has passed.."); } } function reset(){ generateRandomTradePrice(); hoursleft = 12; stocks = 0; money = 10; update(); } function generateRandomTradePrice(){ tradeprice = Math.floor((Math.random() * 20) + 1) }
Improve headings, add rules (HTML) and refine aesthetics (CSS)