Explore 1.5M+ audiobooks & ebooks free for days

Only $12.99 CAD/month after trial. Cancel anytime.

No Ph.D. Game Design With Three.js
No Ph.D. Game Design With Three.js
No Ph.D. Game Design With Three.js
Ebook358 pages1 hour

No Ph.D. Game Design With Three.js

Rating: 0 out of 5 stars

()

Read preview

About this ebook

Code for three.js javascript library of full working 2d and 3d games

LanguageEnglish
PublisherNikiforos Kontopoulos
Release dateMar 29, 2025
ISBN9798230928850
No Ph.D. Game Design With Three.js
Author

Nikiforos Kontopoulos

Nikiforos (Nik) Kontopoulos is a distinguished educator and technologist with a wealth of experience in Computer Science, AI, Blockchain and Cybersecurity.  Nik is dedicated to empowering the next generation of innovators through a diverse curriculum that spans vocational and technical education at both post-high school and college levels. Nik's passion for education and innovation is evident in his commitment to empowering students and driving technological advancements. Through his diverse curriculum and hands-on teaching approach, Nik inspires students to explore new ideas, develop critical skills, and become leaders in the tech industry. As a thought leader and innovator, Nik continues to push the boundaries of what is possible in computer science, business studies, and cybersecurity. His work reflects his dedication to creating a sustainable and inclusive tech ecosystem, where students are equipped with the knowledge and skills to thrive in a rapidly changing world. You can reach me at [email protected]

Read more from Nikiforos Kontopoulos

Related to No Ph.D. Game Design With Three.js

Related ebooks

Computers For You

View More

Reviews for No Ph.D. Game Design With Three.js

Rating: 0 out of 5 stars
0 ratings

0 ratings0 reviews

What did you think?

Tap to rate

Review must be at least 10 words

    Book preview

    No Ph.D. Game Design With Three.js - Nikiforos Kontopoulos

    Table of Contents

    Coding Examples with three.js | Simple 3D car game

    3D Car Rage Game with fire

    Another version of the old MS DOS game Alley Cat

    3D Pong game with cat-like opponent

    Super Pong Game with AI Opponent and Explosions

    Pacmania 3D game

    Politician Run

    1941 Clone

    SLOT MACHINE

    21 GAME

    Dance with me

    T-Cell vs Viruses

    Glob vs Sharks

    Love me NOT Daisy

    Fart Man

    Coding Examples with three.js

    Simple 3D car game

    en>

    UTF-8>

    viewport content=width=device-width, initial-scale=1.0>

    Cyber Pong with Explosions

    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

    * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    body {

    background-color: #0a0a1a;

    color: #00fffc;

    font-family: 'Orbitron', sans-serif;

    overflow: hidden;

    height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    }

    .game-container {

    position: relative;

    width: 800px;

    height: 500px;

    border: 3px solid #00fffc;

    box-shadow: 0 0 20px #00fffc, inset 0 0 20px #00fffc;

    border-radius: 5px;

    overflow: hidden;

    background-color: rgba(0, 0, 0, 0.7);

    }

    .paddle {

    position: absolute;

    width: 15px;

    height: 100px;

    background: linear-gradient(to bottom, #00fffc, #0088ff);

    border-radius: 5px;

    box-shadow: 0 0 10px #00fffc;

    }

    #leftPaddle {

    left: 20px;

    top: 200px;

    }

    #rightPaddle {

    right: 20px;

    top: 200px;

    }

    .ball {

    position: absolute;

    width: 20px;

    height: 20px;

    background: linear-gradient(to bottom right, #ff00ff, #00fffc);

    border-radius: 50%;

    box-shadow: 0 0 15px #ff00ff;

    }

    .score {

    font-size: 2rem;

    margin-bottom: 20px;

    text-shadow: 0 0 10px #00fffc;

    letter-spacing: 3px;

    }

    .particle {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    pointer-events: none;

    }

    .center-line {

    position: absolute;

    width: 2px;

    height: 100%;

    left: 50%;

    background: linear-gradient(to bottom, transparent, #00fffc, transparent);

    opacity: 0.3;

    }

    .dotted-line {

    position: absolute;

    width: 100%;

    height: 2px;

    top: 50%;

    background: linear-gradient(to right, transparent, #00fffc, transparent);

    opacity: 0.3;

    }

    .game-over {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.8);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 10;

    display: none;

    }

    .game-over h1 {

    font-size: 3rem;

    color: #ff00ff;

    text-shadow: 0 0 15px #ff00ff;

    margin-bottom: 30px;

    }

    .restart-btn {

    padding: 15px 30px;

    background: linear-gradient(to right, #ff00ff, #00fffc);

    border: none;

    border-radius: 5px;

    color: #0a0a1a;

    font-family: 'Orbitron', sans-serif;

    font-size: 1.2rem;

    cursor: pointer;

    transition: all 0.3s;

    box-shadow: 0 0 15px #00fffc;

    }

    .restart-btn:hover {

    transform: scale(1.05);

    box-shadow: 0 0 25px #ff00ff;

    }

    .corner-decoration {

    position: absolute;

    width: 50px;

    height: 50px;

    border: 2px solid #00fffc;

    opacity: 0.7;

    }

    .top-left {

    top: 10px;

    left: 10px;

    border-right: none;

    border-bottom: none;

    }

    .top-right {

    top: 10px;

    right: 10px;

    border-left: none;

    border-bottom: none;

    }

    .bottom-left {

    bottom: 10px;

    left: 10px;

    border-right: none;

    border-top: none;

    }

    .bottom-right {

    bottom: 10px;

    right: 10px;

    border-left: none;

    border-top: none;

    }

    .cyber-grid {

    position: absolute;

    width: 100%;

    height: 100%;

    background-image:

    linear-gradient(rgba(0, 255, 252, 0.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(0, 255, 252, 0.05) 1px, transparent 1px);

    background-size: 20px 20px;

    }

    .glow-effect {

    position: absolute;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at center, rgba(0, 255, 252, 0.1) 0%, transparent 70%);

    pointer-events: none;

    }

    score>

    playerScore>0 : computerScore>0

    game-container>

    cyber-grid>

    glow-effect>

    center-line>

    dotted-line>

    corner-decoration top-left>

    corner-decoration top-right>

    corner-decoration bottom-left>

    corner-decoration bottom-right>

    paddle id=leftPaddle>

    paddle id=rightPaddle>

    ball id=ball>

    game-over id=gameOver>

    GAME OVER

    document.addEventListener('DOMContentLoaded', () => {

    // Game elements

    const gameContainer = document.querySelector('.game-container');

    const leftPaddle = document.getElementById('leftPaddle');

    const rightPaddle = document.getElementById('rightPaddle');

    const ball = document.getElementById('ball');

    const playerScore = document.getElementById('playerScore');

    const computerScore = document.getElementById('computerScore');

    const gameOverScreen = document.getElementById('gameOver');

    const restartBtn = document.getElementById('restartBtn');

    // Game dimensions

    const gameWidth = gameContainer.offsetWidth;

    const gameHeight = gameContainer.offsetHeight;

    // Game state

    let gameRunning = true;

    let playerScoreValue = 0;

    let computerScoreValue = 0;

    const winningScore = 5;

    // Paddle properties

    const paddleHeight = 100;

    const paddleWidth = 15;

    const paddleSpeed = 8;

    // Ball properties

    const ballSize = 20;

    let ballX = gameWidth / 2 - ballSize / 2;

    let ballY = gameHeight / 2 - ballSize / 2;

    let ballSpeedX = 5;

    let ballSpeedY = 5;

    // Paddle positions

    let leftPaddleY = gameHeight / 2 - paddleHeight / 2;

    let rightPaddleY = gameHeight / 2 - paddleHeight / 2;

    // Mouse movement for left paddle

    gameContainer.addEventListener('mousemove', (e) => {

    if (!gameRunning) return;

    const rect = gameContainer.getBoundingClientRect();

    const relativeY = e.clientY - rect.top - paddleHeight / 2;

    leftPaddleY = Math.max(0, Math.min(gameHeight - paddleHeight, relativeY));

    leftPaddle.style.top = `${leftPaddleY}px`;

    });

    // AI for right paddle (simplified)

    function updateRightPaddle() {

    const paddleCenter = rightPaddleY + paddleHeight / 2;

    const ballCenter = ballY + ballSize / 2;

    if (paddleCenter < ballCenter - 10) {

    rightPaddleY += paddleSpeed;

    } else if (paddleCenter > ballCenter + 10) {

    rightPaddleY -= paddleSpeed;

    }

    rightPaddleY = Math.max(0, Math.min(gameHeight - paddleHeight, rightPaddleY));

    rightPaddle.style.top = `${rightPaddleY}px`;

    }

    // Ball movement

    function updateBall() {

    ballX += ballSpeedX;

    ballY += ballSpeedY;

    // Ball collision with top and bottom walls

    if (ballY <= 0 || ballY >= gameHeight - ballSize) {

    ballSpeedY = -ballSpeedY;

    createExplosion(ballX + ballSize/2, ballY + ballSize/2, '#00fffc');

    }

    // Ball collision with paddles

    if (

    ballX <= paddleWidth * 2 &&

    ballY + ballSize > leftPaddleY &&

    ballY < leftPaddleY + paddleHeight

    ) {

    ballSpeedX = -ballSpeedX * 1.05; // Increase speed slightly

    ballSpeedY = (ballY - (leftPaddleY + paddleHeight / 2)) * 0.2;

    createExplosion(ballX + ballSize/2, ballY + ballSize/2, '#ff00ff');

    }

    if (

    ballX >= gameWidth - paddleWidth * 3 &&

    ballY + ballSize > rightPaddleY &&

    ballY < rightPaddleY + paddleHeight

    ) {

    ballSpeedX = -ballSpeedX * 1.05; // Increase speed slightly

    ballSpeedY = (ballY - (rightPaddleY + paddleHeight / 2)) * 0.2;

    createExplosion(ballX + ballSize/2, ballY + ballSize/2, '#ff00ff');

    }

    // Ball out of bounds (score)

    if (ballX < 0) {

    computerScoreValue++;

    computerScore.textContent = computerScoreValue;

    resetBall();

    createExplosion(0, ballY + ballSize/2, '#ff0000');

    checkGameOver();

    }

    if (ballX > gameWidth) {

    playerScoreValue++;

    playerScore.textContent = playerScoreValue;

    resetBall();

    createExplosion(gameWidth, ballY + ballSize/2, '#00ff00');

    checkGameOver();

    }

    ball.style.left = `${ballX}px`;

    ball.style.top = `${ballY}px`;

    }

    // Reset ball to center

    function resetBall() {

    ballX = gameWidth / 2 - ballSize / 2;

    ballY = gameHeight / 2 - ballSize / 2;

    ballSpeedX = (Math.random() > 0.5 ? 1 : -1) * 5;

    ballSpeedY = (Math.random() * 6) - 3;

    }

    // Create explosion effect

    function createExplosion(x, y, color) {

    const particleCount = 30;

    for (let i = 0; i < particleCount; i++) {

    const particle = document.createElement('div');

    particle.className = 'particle';

    particle.style.backgroundColor = color;

    particle.style.left = `${x}px`;

    particle.style.top = `${y}px`;

    const angle = Math.random() * Math.PI * 2;

    const speed = 1 + Math.random() * 5;

    const lifetime = 500 + Math.random() * 500;

    gameContainer.appendChild(particle);

    const startTime = Date.now();

    function updateParticle() {

    const elapsed = Date.now() - startTime;

    const progress = elapsed / lifetime;

    if (progress >= 1) {

    particle.remove();

    return;

    }

    const currentX = x + Math.cos(angle) * speed * elapsed * 0.1;

    const currentY = y + Math.sin(angle) * speed * elapsed * 0.1;

    particle.style.left = `${currentX}px`;

    particle.style.top = `${currentY}px`;

    particle.style.opacity = 1 - progress;

    particle.style.transform = `scale(${1 - progress})`;

    requestAnimationFrame(updateParticle);

    }

    requestAnimationFrame(updateParticle);

    }

    }

    // Check if game is over

    function checkGameOver() {

    if (playerScoreValue >= winningScore || computerScoreValue >= winningScore) {

    gameRunning = false;

    gameOverScreen.style.display = 'flex';

    }

    }

    // Restart game

    restartBtn.addEventListener('click', () => {

    playerScoreValue = 0;

    computerScoreValue = 0;

    playerScore.textContent = '0';

    computerScore.textContent = '0';

    gameOverScreen.style.display = 'none';

    resetBall();

    gameRunning = true;

    });

    // Game loop

    function gameLoop() {

    if (gameRunning) {

    updateRightPaddle();

    updateBall();

    }

    requestAnimationFrame(gameLoop);

    }

    // Start the game

    resetBall();

    gameLoop();

    // Add cyberpunk glitch effect occasionally

    setInterval(() => {

    if (Math.random() > 0.9) {

    gameContainer.style.boxShadow = `0 0 ${10 + Math.random() * 20}px #ff00ff, inset 0 0 ${10 + Math.random() * 20}px #ff00ff`;

    setTimeout(() => {

    gameContainer.style.boxShadow = '0 0 20px #00fffc, inset 0 0 20px #00fffc';

    }, 100);

    }

    }, 3000);

    });

    3D Car Rage Game with fire

    A video game of a road with colorful rectangles AI-generated content may be incorrect.

    en>

    UTF-8>

    viewport content=width=device-width, initial-scale=1.0>

    3D Road Rage with Weapons

    body {

    margin: 0;

    overflow: hidden;

    font-family: 'Arial', sans-serif;

    background-color: #000;

    color: white;

    touch-action: manipulation;

    }

    #game-container {

    position: absolute;

    width: 100%;

    height: 100%;

    }

    #ui {

    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 100;

    font-size: 24px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

    }

    #score {

    color: #ff0;

    font-weight: bold;

    }

    #ammo {

    color: #ff4500;

    font-weight: bold;

    }

    #game-over {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: rgba(0, 0, 0, 0.8);

    padding: 30px;

    border-radius: 15px;

    text-align: center;

    display: none;

    z-index: 200;

    border: 2px solid #ff0000;

    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);

    }

    #game-over h1 {

    color: #f00;

    margin-bottom: 20px;

    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);

    }

    #restart-btn {

    background-color: #f00;

    color: white;

    border: none;

    padding: 12px 25px;

    font-size: 18px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;

    }

    #restart-btn:hover {

    background-color: #ff5555;

    transform: scale(1.05);

    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);

    }

    #controls {

    position:

    Enjoying the preview?
    Page 1 of 1