inheritance

2026-04-29 09:54:15 +09:00
parent e8fb1810e3
commit fec15709e7
9 changed files with 110 additions and 0 deletions
--- a/w9_cars/css/style.css
+++ b/w9_cars/css/style.css
@@ -0,0 +1,11 @@
+html,
+body {
+  margin: 0;
+  /* padding: 5px; */
+  align-items: center;
+  text-align: center;
+  background-color: beige;
+}
+canvas {
+  display: block;
+}
--- a/w9_cars/data/car.jpg
+++ b/w9_cars/data/car.jpg
--- a/w9_cars/data/convertible.jpg
+++ b/w9_cars/data/convertible.jpg
--- a/w9_cars/data/font.vlw
+++ b/w9_cars/data/font.vlw
--- a/w9_cars/data/sport.jpg
+++ b/w9_cars/data/sport.jpg
--- a/w9_cars/data/truck.jpg
+++ b/w9_cars/data/truck.jpg
--- a/w9_cars/index.html
+++ b/w9_cars/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.js'
+    integrity='sha512-BLd2MDTrBCo01Vkhjbjn3ITBDbx3o/Lt7D5hj5oLwW8vlDHYXMenxglTcUURCgBhdLNAjZ7KD8x4ZA7bQY3OhA=='
+    crossorigin='anonymous'></script>
+
+
+  <link rel="stylesheet" type="text/css" href="./css/style.css" />
+  <meta charset="utf-8" />
+</head>
+
+<body>
+  <script src="sketch.js"></script>
+</body>
+
+</html>
--- a/w9_cars/sketch.js
+++ b/w9_cars/sketch.js
@@ -0,0 +1,43 @@
+const vehicles = [];
+const IMG_SIZE = 400;
+let message = '';
+
+const images = {};
+
+function setup() {
+  createCanvas(4 * IMG_SIZE, 300);
+
+  vehicles.push(new Car(4));
+}
+
+function draw() {
+  background(255);
+
+  for (let i = 0; i < vehicles.length; i += 1) {
+    vehicles[i].draw(i * IMG_SIZE, 0, IMG_SIZE);
+  }
+
+  fill(0);
+  textFont('Arial', 20);
+  textAlign(CENTER);
+  text(message, width / 2, IMG_SIZE);
+}
+
+function mousePressed() {
+  const index = floor(mouseX / IMG_SIZE);
+  message = vehicles[index]?.getDescription() ?? 'None'; // polymorphism!
+}
+
+// CLASSES
+
+class Car {
+  constructor(passengers) {
+    // ...
+  }
+
+  getDescription() {
+    // PLACEHOLDER
+  }
+
+  draw() {}
+}
--- a/w9_cars/test.wsd
+++ b/w9_cars/test.wsd
@@ -0,0 +1,38 @@
+@startuml
+class Vehicle {
+  -img: PImage
+  + {abstract} getDescription(): String
+  + draw (x: Number, y: Number, size: Number): void
+}
+
+class Car {
+  - passengers: Number
+  + constructor (passengers: Number)
+  + getDescription (): String
+}
+
+class Truck {
+  - load: Number
+  + constructor (load: Number)
+  + getDescription (): String
+}
+
+class SportCar {
+  - fullOp: Bolean
+  + constructor (fullOptions: Boolean)
+  + getDescription (): String
+  + getTurbo (): String
+  + getOptions (): String
+}
+
+class Convertible {
+  + constructor()
+  + getDescription(): String
+  + getRooftop(): String
+}
+Vehicle <|.. Car
+Vehicle <|.. Truck
+Car <|-- SportCar
+SportCar <|-- Convertible
+
+@enduml