rotatingcup-yuyuelove/index.js

This project demonstrates a simple 3D rotating cup animation implemented using JavaScript. The animation creates an illusion of a spinning cup in a 3D space.

import {setGameCanvas,startGame,initGame,pauseGame,context} from "./js/game.js"
setGameCanvas(document.querySelector("#aircraftBattleGame"))
let initBtn = document.querySelector("#initBtn")
let startBtn = document.querySelector("#startBtn")
let pauseBtn = document.querySelector("#pauseBtn")
let score = document.querySelector("#score")
initBtn.addEventListener("click",()=>{initGame()})
startBtn.addEventListener("click",()=>{startGame()})
pauseBtn.addEventListener("click",()=>{pauseGame()})
setInterval(()=>{
    score.innerText = context.score
},16)


const cupContainer = document.getElementById('cup-container');


const cup = document.createElement('div');
cup.classList.add('cup');
cupContainer.appendChild(cup);


cup.style.width = '100px';
cup.style.height = '200px';
cup.style.backgroundColor = 'transparent';
cup.style.border = '20px solid #ccc';
cup.style.borderRadius = '50%';
cup.style.position = 'relative';
cup.style.transformStyle = 'preserve-3d';
cup.style.animation = 'spin 5s linear infinite';


const frontFace = document.createElement('div');
frontFace.classList.add('face');
frontFace.style.width = '100%';
frontFace.style.height = '100%';
frontFace.style.backgroundColor = '#fff';
frontFace.style.position = 'absolute';
frontFace.style.transform = 'rotateY(0deg) translateZ(10px)';
cup.appendChild(frontFace);

const backFace = document.createElement('div');
backFace.classList.add('face');
backFace.style.width = '100%';
backFace.style.height = '100%';
backFace.style.backgroundColor = '#fff';
backFace.style.position = 'absolute';
backFace.style.transform = 'rotateY(180deg) translateZ(10px)';
cup.appendChild(backFace);


const keyframes = `
  @keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
  }
`;


const style = document.createElement('style');
style.innerHTML = keyframes;
document.head.appendChild(style);

// Randomly generate cups with different sizes and colors
const generateRandomCups = () => {
  for (let i = 0; i < 5; i++) {
    const randomWidth = Math.floor(Math.random() * 200) + 50; // Random width between 50px and 250px
    const randomHeight = Math.floor(Math.random() * 400) + 100; // Random height between 100px and 500px
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); // Random color

    const randomCup = document.createElement('div');
    randomCup.classList.add('cup');
    randomCup.style.width = `${randomWidth}px`;
    randomCup.style.height = `${randomHeight}px`;
    randomCup.style.backgroundColor = randomColor;
    randomCup.style.border = '10px solid #000';
    randomCup.style.borderRadius = '50%';
    randomCup.style.position = 'relative';
    randomCup.style.transformStyle = 'preserve-3d';
    randomCup.style.animation = 'spin 5s linear infinite';

    const frontFace = document.createElement('div');
    frontFace.classList.add('face');
    frontFace.style.width = '100%';
    frontFace.style.height = '100%';
    frontFace.style.backgroundColor = '#fff';
    frontFace.style.position = 'absolute';
    frontFace.style.transform = 'rotateY(0deg) translateZ(10px)';
    randomCup.appendChild(frontFace);

    const backFace = document.createElement('div');
    backFace.classList.add('face');
    backFace.style.width = '100%';
    backFace.style.height = '100%';
    backFace.style.backgroundColor = '#fff';
    backFace.style.position = 'absolute';
    backFace.style.transform = 'rotateY(180deg) translateZ(10px)';
    randomCup.appendChild(backFace);

    cupContainer.appendChild(randomCup);
  }
};

import PlayEnity from "./enity/Player.js";
import EnemyMaker from "./enity/EnemyMaker.js";

let gameCanvas;
let timer;
export const GameInfo = {
    gameid: 1,
    gamename: ''
};
export let context = {
    mouseX: 0,
    mouseY: 0,
    NodeList: [],
    time: 0,
    score: 0
};
export function setContext(contextPx) {
    context = contextPx;
}
let ctx;
export function setGameCanvas(gameCanvasDom) {
    gameCanvas = gameCanvasDom;
    gameCanvas.addEventListener('mousemove', e => {
        context.mouseX = e.offsetX;
        context.mouseY = e.offsetY;
        if (window.innerWidth < 400) {
            context.mouseX *= 400 / window.innerWidth;
            context.mouseY *= 400 / window.innerWidth;
        }
    });
    gameCanvas.addEventListener('touchstart', e => {
        e.preventDefault();
        context.mouseX = e.touches[0].pageX;
        context.mouseY = e.touches[0].pageY - gameCanvas.parentNode.offsetTop;
        if (window.innerWidth < 400) {
            context.mouseX *= 400 / window.innerWidth;
            context.mouseY *= 400 / window.innerWidth;
        }
    });
    gameCanvas.addEventListener('touchmove', e => {
        e.preventDefault();
        e.stopPropagation();
        context.mouseX = e.touches[0].clientX;
        context.mouseY = e.touches[0].pageY - gameCanvas.parentNode.offsetTop;
        if (window.innerWidth < 400) {
            context.mouseX *= 400 / window.innerWidth;
            context.mouseY *= 400 / window.innerWidth;
        }
    });
    ctx = gameCanvas.getContext('2d');
}

let backgroudColor = 'rgb(0,0,0)';

function draw(ctx) {
    ctx.beginPath();
    ctx.fillText( context.score, 50, 10);
    ctx.fill();
    ctx.closePath();
}

export function initGame() {
    context.time = 0;
    context.NodeList = [];
    context.NodeList = [new EnemyMaker(1)];
    context.gameOver = false;
    context.NodeList.push(new PlayEnity(200, 200));
    context.score = 0;
    ctx.fillStyle = 'white';
    ctx.font = '50px 宋体';
    ctx.save();
}

export function startGame() {
    if (timer) return 
    timer = setInterval(function () {
        context.time += 20 * 0.001;
        ctx.fillStyle = backgroudColor;
        ctx.strokeStyle = backgroudColor;
        ctx.fillRect(0, 0, 400, 400);
        draw(ctx);
        for (let i = 0; i < context.NodeList.length; i++) {
            let date = new Date();
            context.NodeList[i].draw(ctx);
            context.NodeList[i].behavior(context);
            context.NodeList[i].isOK(context);
            if (!context.NodeList[i].OK) {
                context.NodeList[i] = null;
                context.NodeList.splice(i, 1);
            }     
        }
    }, 20);
}

export function pauseGame() {
    clearInterval(timer);
    timer = null;
}

export function endGame() {
    pauseGame();
    initGame();
}