This article is participating in Python Theme Month. See the link to the event for more details

Dangdang dangdang ~ (at the end of the article have demo address)

Eat melon. Eat melon

Let me show you the effect first

Briefly introduce the types of fruit ~

The orange looks like a basketball and the pineapple looks like a durian pizza

The number in the yellow box here is the last one in the fruit array Fruits

The commented out section below is the main logic of the game

So createFruitCount is going to increase by one when you click make fruit fall,

We’ll start with grape, grape, cherry, orange, orange, lemon and then we’ll randomly select the top five fruits in the fruit array fruits

The blogger commented out the logic and replaced it with this code to look like the GIF above

a.default.Instance.createOneFruit(9)

It’s also easy to change the images, as you can see them in chrome’s debug window and then replace them

The blogger has sorted them out here

fruit address size
grapes http://192.168.142.1:5000/res/raw-assets/ad/ad16ccdc-975e-4393-ae7b-8ac79c3795f2.png 52 * 52
cherry http://192.168.142.1:5000/res/raw-assets/0c/0cbb3dbb-2a85-42a5-be21-9839611e5af7.png 80 * 80
orange http://192.168.142.1:5000/res/raw-assets/d0/d0c676e4-0956-4a03-90af-fee028cfabe4.png 108 * 108
lemon http://192.168.142.1:5000/res/raw-assets/74/74237057-2880-4e1f-8a78-6d8ef00a1f5f.png 119 * 119
Kiwi fruit http://192.168.142.1:5000/res/raw-assets/13/132ded82-3e39-4e2e-bc34-fc934870f84c.png 153 * 152
tomato http://192.168.142.1:5000/res/raw-assets/03/03c33f55-5932-4ff7-896b-814ba3a8edb8.png 183 * 183
peach http://192.168.142.1:5000/res/raw-assets/66/665a0ec9-6c43-4858-974c-025514f2a0e7.png 193 * 193
pineapple http://192.168.142.1:5000/res/raw-assets/84/84bc9d40-83d0-480c-b46a-3ef59e603e14.png 258 * 258
coconut http://192.168.142.1:5000/res/raw-assets/5f/5fa0264d-acbf-4a7b-8923-c106ec3b9215.png 308 * 308
Half a watermelon http://192.168.142.1:5000/res/raw-assets/56/564ba620-6a55-4cbe-a5a6-6fa3edd80151.png 308 * 309
Big watermelon http://192.168.142.1:5000/res/raw-assets/50/5035266c-8df3-4236-8d82-a375e97a0d9c.png 408 * 408

Let’s start teaching Python

Get the picture ready and name it something like this ~

Next, crop them into circles using python’s PIL library

Install the module

pip install pillow
Copy the code

The code references www.sohu.com/a/336796776… This article

Create the file ‘ ‘image2circle.py’

# -*- coding: utf-8 -*-
# @Time : 2021/2/10 17:01
# @Author : Java4ye

from PIL import Image, ImageDraw, ImageFilter
import os


def crop_max_square(pil_img) :
    return crop_center(pil_img, min(pil_img.size), min(pil_img.size))


def crop_center(pil_img, crop_width, crop_height) :
    img_width, img_height = pil_img.size
    return pil_img.crop(
        (
            (img_width - crop_width) // 2,
            (img_height - crop_height) // 2,
            (img_width + crop_width) // 2,
            (img_height + crop_height) // 2))def mask_circle_transparent(pil_img, blur_radius, offset=0) :
    offset = blur_radius * 2 + offset
    mask = Image.new("L", pil_img.size, 0)
    draw = ImageDraw.Draw(mask)
    draw.ellipse((offset, offset, pil_img.size[0] - offset, pil_img.size[1] - offset), fill=255)
    mask = mask.filter(ImageFilter.GaussianBlur(blur_radius))
    result = pil_img.copy()
    result.putalpha(mask)
    return result


imgFolder = "H://dxg_img"

imgs = os.listdir(imgFolder)
for img in imgs:
    print(img)
    img_path = os.path.join(imgFolder, img)
    if os.path.isfile(img_path):
        markImg = Image.open(img_path)
        w, h = markImg.size

        # thumb_width = 158
        im_square = crop_max_square(markImg).resize((w, h), Image.LANCZOS)
        im_thumb = mask_circle_transparent(im_square, 0)
        im_thumb.save('H://dxg_img//circle//' + img)
Copy the code

createresetImage2dxg.pyfile

Here is to help you to copy the image to the corresponding folder ~

import os
import shutil
import time

millis = int(round(time.time() * 1000))

daxiegua_dir = "I: / / daxigua 1.0.0 / /"
imgFolder = "H://dxg_img//circle"

urls = [
    'http://192.168.142.1:5000/res/raw-assets/ad/ad16ccdc-975e-4393-ae7b-8ac79c3795f2.png'.'http://192.168.142.1:5000/res/raw-assets/0c/0cbb3dbb-2a85-42a5-be21-9839611e5af7.png'.'http://192.168.142.1:5000/res/raw-assets/d0/d0c676e4-0956-4a03-90af-fee028cfabe4.png'.'http://192.168.142.1:5000/res/raw-assets/74/74237057-2880-4e1f-8a78-6d8ef00a1f5f.png'.'http://192.168.142.1:5000/res/raw-assets/13/132ded82-3e39-4e2e-bc34-fc934870f84c.png'.'http://192.168.142.1:5000/res/raw-assets/03/03c33f55-5932-4ff7-896b-814ba3a8edb8.png'.'http://192.168.142.1:5000/res/raw-assets/66/665a0ec9-6c43-4858-974c-025514f2a0e7.png'.'http://192.168.142.1:5000/res/raw-assets/84/84bc9d40-83d0-480c-b46a-3ef59e603e14.png'.'http://192.168.142.1:5000/res/raw-assets/5f/5fa0264d-acbf-4a7b-8923-c106ec3b9215.png'.'http://192.168.142.1:5000/res/raw-assets/56/564ba620-6a55-4cbe-a5a6-6fa3edd80151.png'.'http://192.168.142.1:5000/res/raw-assets/50/5035266c-8df3-4236-8d82-a375e97a0d9c.png'
]
imgs = [
    '52.png'.'80.png'.'108.png'.'119.png'.'153.png'.'183.png'.'193.png'.'258.png'.'308.png'.'309.png'.'408.png'
]



i = 0
for url in urls:
    a = url.rindex(":")
    beginIndex = url.index("/", a)
    lastIndex = url.rindex("/")
    contextPath = url[beginIndex:lastIndex + 1]
    realFileName = url[lastIndex + 1:]
    folder = daxiegua_dir + contextPath
    fileNames = os.listdir(folder)
    for fileName in fileNames:
        if fileName == realFileName:
            arr = fileName.split(".")
            os.path.join(folder, )
            shutil.copyfile(folder + "/ /" + fileName, folder + "/ /" + "Java4ye_" + str(millis) + "." + arr[1])
            shutil.copyfile(imgFolder + "/ /" + imgs[i], folder + "/ /" + fileName)
            i += 1
Copy the code

Once the image is ready, run the ‘ ‘image2circle.py file to cut the image into circles, and then run the’ ‘resetimage2dxg.py’ file to copy the image to the appropriate directory.

The blogger here refers to the fishskin Tycoon’s tutorial: juejin.cn/post/692304…

The following is the source address: github.com/liyupi/daxi…

To run locally you need to install Node.js and vue-cli and serve. Specific can see above big guy’s article

The effect is as follows:

Opening the project structure we can see the following files ~

What is this in the red box?

Search search look, originally is the game engine!!

Wow!!!! The feeling is going into the pit again what my damn curiosity (I haven’t written Springcloud Gateway yet). · ∀ ·) Blue)

www.cocos.com/docs

Saw for a long time found also on the computer graphics card a little requirement, thought I drop little bully or forget it ha ha ha

Address: this tutorial docs.cocos.com/creator/man…

However still have a little small harvest ~ this thing still can become Q play!

Click Enter in the document to find PhysicsCircleCollider

Add the above code to achieve the following effect

Demo address

dxgv01.vercel.app

The last

Welcome to explore the problem together

If you think this article is good, please support it with more likes 😝

Let’s start this unexpected meeting! ~

Please leave a message! Thanks for your support! ヾ(≧▽≦*)o

I’m 4ye. Next time we should… See you soon!! 😆