September 26, 2026

Bebek IPS.

Frontend ยท Game
HTML CSS JavaScript Canvas

A pixel-art shooting game inspired by Duck Hunt where players shoot the duck carrying the correct answer to junior-high Social Studies questions.

#education #pixelart #duckhunt #quizgame #festivalbiruputih
Bebek IPS

Description

Bebek IPS (“Social Studies Duck”) is a pixel-art shooting game inspired by Duck Hunt. A Social Studies question appears on the panel and ducks fly across the screen, each carrying an answer โ€” the player has to shoot the duck carrying the correct one. The game has three progressively harder levels with a score, combo, and lives system, and each level unlocks after the previous one is cleared.

Background

This was built as an entry in the Educational Game category of Festival Biru Putih 2026 , organized by the Directorate of Junior High Schools, Ministry of Primary and Secondary Education (Kemendikdasmen). It targets IPS (Social Studies), Grade VIII, Phase D, covering learning objectives 3.1โ€“3.6: natural resource potential and conservation, pricing and markets, Indonesia’s potential to become a developed country, and social interaction.

Goal

Turn quiz practice into an arcade experience, where quick decisions and combos make students want to replay โ€” while every round still measures mastery of the curriculum’s learning objectives.

Features

  • 20 questions per game, 3โ€“4 from each learning objective, with the objective shown as a label above each question.
  • Three levels with rising cognitive demand: recall and understanding, applying concepts to cases, and cause-and-effect analysis.
  • Shoot by clicking/tapping a duck or pressing Aโ€“E.
  • 3 lives โ€” a wrong shot or timeout costs a life and reveals the correct answer.
  • Scoring: 100 points per correct answer + 10 per second remaining, a combo bonus (+25 per streak, up to +250), and level multipliers of ร—1, ร—1.5, and ร—2.
  • Level unlocks and high scores saved in localStorage.
  • Pause, sound toggle, and a give-up button; How to Play and Learning Objectives modals; a results screen with score, accuracy, best combo, and record.

Technologies

  • Vanilla JavaScript, HTML5 Canvas, and CSS in a single-page index.html.
  • Pixel-art graphics drawn on <canvas>, with Press Start 2P and Pixelify Sans fonts.
  • The question bank lives inline as LEVELS[].qs, and answer order is shuffled every round.

Technical Decisions

The whole flow โ€” cover, level select, gameplay, pause, and results โ€” lives in one SPA to satisfy the competition’s single-file, no-redirect, offline rule. Graphics are drawn on canvas instead of image sprites to keep the package tiny and crisp at any size, and the 16:9 layout adapts to laptops, tablets, and phones. Level multipliers and combos reward both accuracy and consistency, so the score genuinely reflects mastery.

What I Learned

Tuning the difficulty curve was the interesting part: balancing question timers, duck speed, and scoring so that the game feels fair for a beginner at Level 1 but still challenging at Level 3.

Notes

This is a competition entry, so the source and a live demo are not published yet.

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.

Comments