Make a 2d dragon ball game in which you can create your own dragon Ball character's game

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

No:21027

←

Prev Next

→

Make a 2d dragon ball game in which you can create..ALL
Developer User9302｜Date and time 23/10/13 0:02:16
Build time 84.369 sec｜Game capacity 3.769KB｜

Script

Sure! Here's a simple example of a 2D Dragon Ball character creator game using JavaScript and HTML:

This code creates a character creator game with options to change the hair color, eye color, skin color, and clothes color of the character. The character gets drawn on a canvas based on the selected options. The user can click on different color options to customize the character. The game is designed for smartphone operation as requested and uses pictograms in the form of colored blocks for customization options. Feel free to modify and expand on this code to add more features to the game or make it more interactive.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a simple example of a 2D Dragon Ball character creator game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Dragon Ball Character Creator</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Constants for character customization
    const colors = {
      hair: ['black', 'blonde', 'brown', 'blue', 'pink', 'green'],
      eyes: ['blue', 'green', 'brown', 'red'],
      skin: ['pale', 'fair', 'tan', 'dark'],
      clothes: ['orange', 'blue', 'red', 'green']
    };

// Current character customization options
    let currentOptions = {
      hair: 'black',
      eyes: 'blue',
      skin: 'pale',
      clothes: 'orange'
    };

// Function to draw the character
    function drawCharacter() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw body
      ctx.fillStyle = currentOptions.skin;
      ctx.fillRect(150, 200, 100, 150);

// Draw head
      ctx.beginPath();
      ctx.arc(200, 150, 50, 0, Math.PI * 2, false);
      ctx.fillStyle = currentOptions.skin;
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'black';
      ctx.stroke();

// Draw hair
      ctx.fillStyle = currentOptions.hair;
      ctx.fillRect(150, 120, 100, 50);

// Draw eyes
      ctx.fillStyle = currentOptions.eyes;
      ctx.fillRect(175, 135, 15, 10);
      ctx.fillRect(210, 135, 15, 10);

// Draw mouth
      ctx.beginPath();
      ctx.arc(200, 160, 20, 0, Math.PI, false);
      ctx.strokeStyle = 'black';
      ctx.stroke();

// Draw clothes
      ctx.fillStyle = currentOptions.clothes;
      ctx.fillRect(150, 260, 100, 90);
    }

// Function to handle click events on character customization options
    function handleOptionClick(option, value) {
      currentOptions[option] = value;
      drawCharacter();
    }

// Event listeners for option buttons
    document.getElementById('hairOptions').addEventListener('click', function (event) {
      if (event.target.tagName === 'BUTTON') {
        const hairColor = event.target.dataset.option;
        handleOptionClick('hair', hairColor);
      }
    });

document.getElementById('eyesOptions').addEventListener('click', function (event) {
      if (event.target.tagName === 'BUTTON') {
        const eyeColor = event.target.dataset.option;
        handleOptionClick('eyes', eyeColor);
      }
    });

document.getElementById('skinOptions').addEventListener('click', function (event) {
      if (event.target.tagName === 'BUTTON') {
        const skinColor = event.target.dataset.option;
        handleOptionClick('skin', skinColor);
      }
    });

document.getElementById('clothesOptions').addEventListener('click', function (event) {
      if (event.target.tagName === 'BUTTON') {
        const clothesColor = event.target.dataset.option;
        handleOptionClick('clothes', clothesColor);
      }
    });

// Initial character drawing
    drawCharacter();
  </script>
</body>
</html>
```

Feel free to modify and expand on this code to add more features to the game or make it more interactive.