I made a potluck game using JavaScript (with HTML and CSS)

programming

"I want to make a game, but I don't know where to start."
It is perfect for such beginners,"Pork Chop Game"is.
In this article, we will show you how to create a website using only HTML, CSS, and JavaScript.Simple but funTogether we will create a mini game.

Completed code included,Safe for beginnersHow to use JavaScriptBasic HTML structure,CSS style specificationI will explain the entire process from start to finish.

What is JavaScript? A beginner-friendly language

Conclusion: Start making games with JavaScript

JavaScript isBrowser-based languageis.
No installation required.Just write it in the HTML fileSo it's perfect for beginners.

Reason: You can move it around on the screen right away

  • Completed with just a browser
  • Visually see the results
  • A development environment is easy to prepare (e.g. VSCode or browser developer tools)

Example: Writing in a script tag in HTML

1
2
3
<script>
  alert("こんにちは、世界！");
</script>

Summary: JavaScript is the best way to experience the fun of programming

What is a pot game? Learn the overview of the game

Conclusion: It's a game where you randomly choose ingredients from a pot with no idea what's in it.

Rules and Objectives

  • When the user presses a button, ingredients are randomly selected from the pot.
  • Ingredients include both "hits" and "misses"
  • Display can be done with images or text

Recommended for:

  • JavaScriptMath.random()or those who want to learn event processing
  • Those who want to refresh their knowledge of HTML
  • Those who want to learn layout and animation with CSS

Building the game with HTML

Conclusion: Create a button and a display area using HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>闇鍋ゲーム</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Pot game</h1>
  <button id="startBtn">Scoop from the pot</button>
  <div id="resultArea"></div>
  <script src="game.js"></script>
</body>
</html>
  • buttonReceiving user actions with tags
  • DivShow results by tag

Use CSS to adjust the appearance

Conclusion: Center elements on the screen and use color and spacing appropriately

1
} button { padding: 15px 30px; font-size: 20px; cursor: pointer; } #resultArea { margin-top: 30px; font-size: 24px; font-weight: bold; }

point

  • text-alignorPaddingPlace in
  • cursor: pointer;Create a button-like effect
  • margin-topAdd space between elements with

Implement random processing and display using JavaScript

Conclusion: Select and display ingredients using an array and random numbers

1
const items = ["Shiitake mushroom", "Chocolate", "Eel", "Frog", "Konnyaku", "Curry"]; const btn = document.getElementById("startBtn"); const resultArea = document.getElementById("resultArea"); btn.addEventListener("click", () => { const randomIndex = Math.floor(Math.random() * items.length); const selectedItem = items[randomIndex]; resultArea.textContent = `You scooped up ${selectedItem}!`; });

point

  • Math.random()Get a number between 0 and 1
  • Math.floor()Convert to integer
  • textContentChange the display with

Common errors and how to deal with them

1. Nothing happens when I press the button

  • JavaScript files are not loaded
    → <script src="game.js">Position of</body>Do it right before

2. Errors appear in the console

  • This is often due to spelling mistakes
    → Example:getElementByid → getElementById

Summary of the completed code

HTML (index.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>闇鍋ゲーム</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Pot game</h1>
  <button id="startBtn">Scoop from the pot</button>
  <div id="resultArea"></div>
  <script src="game.js"></script>
</body>
</html>

CSS (style.css)

1
} button { padding: 15px 30px; font-size: 20px; cursor: pointer; } #resultArea { margin-top: 30px; font-size: 24px; font-weight: bold; }

JavaScript (game.js)

1
const items = ["Shiitake mushroom", "Chocolate", "Eel", "Frog", "Konnyaku", "Curry"]; const btn = document.getElementById("startBtn"); const resultArea = document.getElementById("resultArea"); btn.addEventListener("click", () => { const randomIndex = Math.floor(Math.random() * items.length); const selectedItem = items[randomIndex]; resultArea.textContent = `You scooped up ${selectedItem}!`; });

Summary: A great first step in learning JS games

The pot game isBasic JavaScript syntax and DOM manipulationIt is a perfect subject to learn.
It's fun to create, so it's recommended for programming beginners.
First, try making it by imitating this article.

*This article is based on the following:
Ministry of Education, Culture, Sports, Science and Technology: Materials on programming education
https://www.mext.go.jp/a_menu/shotou/zyouhou/detail/1375607.htm

Copied title and URL