Click here for free DL of the app version that can save data.

No:1155

147

←

Prev Next

→

A tycoon game
Developer TimoshQ｜Date and time 23/6/18 6:24:28
Build time 55.043 sec｜Game capacity 3.645KB｜

Script

Here is an example of a tycoon game written in a single HTML file with JavaScript:

My Tycoon Game

You are the owner of a small business

This game allows the player to buy different buildings, each with its own cost and income. The player earns money by owning buildings and can use that money to buy more buildings. The game is controlled with buttons that are displayed on the screen. The UI is designed to be simple and intuitive, with plenty of emojis to add some fun. The game is optimized for mobile devices and can be played on a smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

Here is an example of a tycoon game written in a single HTML file with JavaScript:

<!DOCTYPE html>
<html>
<head>
	<title>My Tycoon Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: sans-serif;
			font-size: 20px;
			background-color: #003366;
			color: #ffffff;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		canvas {
			width: 100%;
			height: auto;
			display: none;
		}
		button {
			font-size: 20px;
			background-color: #ffffff;
			color: #003366;
			border: none;
			padding: 10px 20px;
			margin: 10px;
			border-radius: 5px;
			cursor: pointer;
		}
		#money {
			font-size: 30px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>My Tycoon Game</h1>
	<h2>You are the owner of a small business</h2>
	<button onclick="startGame()">Start Game</button>
	<canvas id="gameCanvas"></canvas>
	<div id="money"></div>
	
	<script>
		// define variables
		var canvas, ctx;
		var money = 0;
		var buildings = [
			{
				name: "House",
				cost: 100,
				income: 10,
				owned: 0
			},
			{
				name: "Shop",
				cost: 500,
				income: 50,
				owned: 0
			},
			{
				name: "Restaurant",
				cost: 1000,
				income: 100,
				owned: 0
			},
			{
				name: "Factory",
				cost: 5000,
				income: 500,
				owned: 0
			}
		];
		
		// initialize game
		function startGame() {
			canvas = document.getElementById("gameCanvas");
			ctx = canvas.getContext("2d");
			canvas.style.display = "block";
			document.body.style.overflow = "hidden"; // hide scrollbar
			setInterval(updateGame, 100); // run updateGame every 100 milliseconds
			
			// display buildings
			for (var i = 0; i < buildings.length; i++) {
				var button = document.createElement("button");
				button.innerHTML = buildings[i].name + " (Cost: " + buildings[i].cost + ")";
				button.onclick = (function(index) { // use closure to pass index as argument
					return function() {
						if (money >= buildings[index].cost) {
							money -= buildings[index].cost;
							buildings[index].owned++;
							buildings[index].cost = Math.round(buildings[index].cost * 1.2); // increase cost
							document.getElementById("money").innerHTML = "Money: " + money;
							button.innerHTML = buildings[index].name + " (Cost: " + buildings[index].cost + ")";
						}
					};
				})(i);
				document.body.appendChild(button);
			}
		}
		
		// update game
		function updateGame() {
			// draw background
			ctx.fillStyle = "#00cc66";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			
			// draw buildings
			ctx.fillStyle = "#ffffff";
			for (var i = 0; i < buildings.length; i++) {
				var x = (i % 2 == 0) ? 50 : canvas.width - 250;
				var y = 100 + Math.floor(i / 2) * 150;
				ctx.fillRect(x, y, 200, 100);
				ctx.fillStyle = "#003366";
				ctx.fillRect(x + 10, y + 10, 180, 80);
				ctx.fillStyle = "#ffffff";
				ctx.fillText(buildings[i].name + ": " + buildings[i].owned, x + 20, y + 40);
				ctx.fillText("Cost: " + buildings[i].cost, x + 20, y + 80);
			}
			
			// update income
			for (var i = 0; i < buildings.length; i++) {
				money += buildings[i].income * buildings[i].owned;
				document.getElementById("money").innerHTML = "Money: " + money;
			}
		}
	</script>
</body>
</html>