new_drawing_game

src/pages/drawing/index.astro

@@ -0,0 +1,258 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title='Drawing Game'>
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+    const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: '#05b3a4',
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+        preload: preload,
+        create: create,
+        update: update,
+    },
+};
+
+const game = new Phaser.Game(config);
+const displayW = window.innerWidth;
+const displayH = window.innerHeight;
+
+let graphics;
+let outlineImage;
+let isDrawing = false;
+let selectedColor = '#ff0000'; // Default color
+let brushSize = 5; // Default brush size
+
+function preload() {
+    this.load.image('outline', '/assets/cow.png');
+}
+
+function create() {
+    outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
+
+    graphics = this.add.graphics();
+
+    // Create a color picker using HTML input type color
+    const colorPicker = document.createElement('input');
+    colorPicker.type = 'color';
+    colorPicker.value = selectedColor;
+    colorPicker.className = 'color-picker';
+    colorPicker.addEventListener('input', (event) => {
+        selectedColor = event.target.value;
+    });
+    document.body.appendChild(colorPicker);
+
+    // Create a brush size slider using HTML input type range
+    const sliderContainer = document.createElement('div');
+    sliderContainer.className = 'slider-container';
+    document.body.appendChild(sliderContainer);
+
+    const slider = document.createElement('input');
+    slider.type = 'range';
+    slider.min = '2';
+    slider.max = '20';
+    slider.value = brushSize.toString(); // Set initial value to brushSize
+    slider.className = 'slider';
+    sliderContainer.appendChild(slider);
+
+    slider.addEventListener('input', (event) => {
+        brushSize = parseInt(event.target.value);
+        slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+    });
+
+    const clearButton = document.createElement('button');
+    clearButton.textContent = 'Clear';
+    clearButton.className = 'clear-button';
+    clearButton.addEventListener('click', () => {
+        clearDrawing();
+    });
+    document.body.appendChild(clearButton);
+    this.input.on('pointerdown', () => {
+        isDrawing = true;
+        startDrawing(this.input.x, this.input.y);
+    });
+
+    this.input.on('pointermove', () => {
+        if (isDrawing) {
+            continueDrawing(this.input.x, this.input.y);
+        }
+    });
+
+    this.input.on('pointerup', () => {
+        if (isDrawing) {
+            finishDrawing();
+        }
+        isDrawing = false;
+    });
+}
+function startDrawing(x, y) {
+    graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+    graphics.beginPath();
+    graphics.moveTo(x, y);
+}
+
+function continueDrawing(x, y) {
+    graphics.lineTo(x, y);
+    graphics.strokePath();
+}
+
+function finishDrawing() {
+    // No need for additional actions here
+}
+
+function clearDrawing() {
+    graphics.clear();
+}
+
+function update() {
+    // Update the slider position based on the pointer's movement
+    const slider = document.querySelector('input[type="range"]');
+    if (slider && !isDrawing) {
+        const sliderValue = parseInt(slider.value);
+        const max = parseInt(slider.max);
+        const width = slider.offsetWidth;
+        const offsetX = (sliderValue - 2) / (max - 2) * width;
+        slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+    }
+}
+
+    // const config = {
+    // type: Phaser.AUTO,
+    // width: window.innerWidth,
+    // height: window.innerHeight,
+    // backgroundColor: '#05b3a4',
+    // scale: {
+    //       mode: Phaser.Scale.FIT,
+    //       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    //       },
+    // scene: {
+    //     preload: preload,
+    //     create: create,
+    //     update: update
+    //     }
+    // };
+
+    // const game = new Phaser.Game(config);
+    // const displayW = window.innerWidth;
+    // const displayH = window.innerHeight;
+
+    // let graphics;
+    // let outlineImage;
+    // let isDrawing = false;
+    // let selectedColor = 0xff0000; // Default color
+    // let brushSize = 5; // Default brush size
+
+    // function preload() {
+    //     this.load.image('outline', '/assets/cow.png');
+    // }
+
+    // function create() {
+    // outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
+
+    // graphics = this.add.graphics();
+
+    // // Create color palette buttons
+    // const colorPalette = [0xff0000, 0x00ff00, 0x0000ff]; // Example colors
+
+    // colorPalette.forEach((color, index) => {
+    //     const button = this.add.rectangle(50 + index * 70, 500, 50, 50, color);
+    //     button.setInteractive();
+    //     button.on('pointerdown', () => {
+    //     selectedColor = color;
+    //     });
+    // });
+
+    // // Create a brush size slider using HTML input type range
+    // const sliderContainer = document.createElement('div');
+    // sliderContainer.className = 'slider-container';
+    // document.body.appendChild(sliderContainer);
+
+    // const slider = document.createElement('input');
+    // slider.type = 'range';
+    // slider.min = '2';
+    // slider.max = '20';
+    // slider.value = brushSize.toString(); // Set initial value to brushSize
+    // slider.className = 'slider';
+    // sliderContainer.appendChild(slider);
+
+    // slider.addEventListener('input', (event) => {
+    //     brushSize = parseInt(event.target.value);
+    //     slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+    // });
+
+    // const clearButton = document.createElement('button');
+    // clearButton.textContent = 'Clear';
+    // clearButton.className = 'clear-button';
+    // clearButton.addEventListener('click', () => {
+    //     clearDrawing();
+    // });
+    // document.body.appendChild(clearButton);
+
+    // this.input.on('pointerdown', () => {
+    //     isDrawing = true;
+    //     startDrawing(this.input.x, this.input.y);
+    // });
+
+    // this.input.on('pointermove', () => {
+    //     if (isDrawing) {
+    //     continueDrawing(this.input.x, this.input.y);
+    //     }
+    // });
+
+    // this.input.on('pointerup', () => {
+    //     if (isDrawing) {
+    //     finishDrawing();
+    //     }
+    //     isDrawing = false;
+    // });
+    // }
+
+    // function startDrawing(x, y) {
+    // graphics.lineStyle(brushSize * 2, selectedColor);
+    // graphics.beginPath();
+    // graphics.moveTo(x, y);
+    // }
+
+    // function continueDrawing(x, y) {
+    // graphics.lineTo(x, y);
+    // graphics.strokePath();
+    // }
+
+    // function finishDrawing() {
+    // // No need for additional actions here
+    // }
+
+    // function clearDrawing() {
+    // graphics.clear();
+    // }
+
+    // function update() {
+    // // Update the slider position based on the pointer's movement
+    // const slider = document.querySelector('input[type="range"]');
+    // if (slider && !isDrawing) {
+    //     const sliderValue = parseInt(slider.value);
+    //     const max = parseInt(slider.max);
+    //     const width = slider.offsetWidth;
+    //     const offsetX = (sliderValue - 2) / (max - 2) * width;
+    //     slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+    // }
+    // }
+</script>
+<style>
+    .clear-button {
+        background-color: blue;
+    }
+    /* .clearButton */
+</style>