No Ph.D. Game Design With Three.js
()
About this ebook
Code for three.js javascript library of full working 2d and 3d games
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
DeepSeek AI A Step by Step Guide Rating: 0 out of 5 stars0 ratingsPrompt Engineering with ChatGPT Rating: 0 out of 5 stars0 ratingsThe Chronicle of the Invisible Monk Rating: 0 out of 5 stars0 ratingsGreen Computing How to Build a Sustainable Tech Lifestyle Rating: 0 out of 5 stars0 ratingsQuestions and Answers in Modern Quantum Theory Rating: 0 out of 5 stars0 ratingsStarlink for Planet Earth Satellites, Space, and the Future of Connectivity Rating: 0 out of 5 stars0 ratingsL.A. RIOTS in simple terms Rating: 0 out of 5 stars0 ratingsQuantum Ethics Navigating the Moral Landscape of Quantum Computing and Cybersecurity Rating: 0 out of 5 stars0 ratings
Related to No Ph.D. Game Design With Three.js
Related ebooks
HTML5 Game Development HOTSHOT Rating: 0 out of 5 stars0 ratingsGd Script Rating: 0 out of 5 stars0 ratingsjQuery Game Development Essentials Rating: 0 out of 5 stars0 ratingsMastering JavaScript for Game Development: Crafting Unique Experiences Rating: 0 out of 5 stars0 ratingsHaxe Game Development Essentials: Create games on multiple platforms from a single codebase using Haxe and the HaxeFlixel engine Rating: 0 out of 5 stars0 ratingsMonkey Game Development: Beginner's Guide Rating: 0 out of 5 stars0 ratingsAdvanced LibGDX: Engineering Complex Java Games: LibGDX series Rating: 0 out of 5 stars0 ratingsHTML 5 Shoot 'em Up in an Afternoon Rating: 0 out of 5 stars0 ratingsLÖVE for Lua Game Programming Rating: 5 out of 5 stars5/5Learning Libgdx Game Development Rating: 0 out of 5 stars0 ratingsMastering Game Development with PyGame: From Basics to Advanced Techniques Rating: 0 out of 5 stars0 ratingsSFML Essentials: Getting Started with Game Development: SFML Fundamentals Rating: 0 out of 5 stars0 ratingsSwift 3 Game Development - Second Edition Rating: 0 out of 5 stars0 ratingsLearning Cocos2d-JS Game Development Rating: 0 out of 5 stars0 ratingsLearning Construct 2 Rating: 0 out of 5 stars0 ratingsBuilding a 3D Game with LibGDX Rating: 1 out of 5 stars1/5Buildbox 2.x Game Development Rating: 0 out of 5 stars0 ratingsBlood PitTM In-Game Module Rating: 0 out of 5 stars0 ratingsGodot from Zero to Proficiency (Intermediate): Godot from Zero to Proficiency, #3 Rating: 5 out of 5 stars5/5Learning Android Game Development Rating: 0 out of 5 stars0 ratingsCocos2d-x by Example: Beginner's Guide - Second Edition Rating: 0 out of 5 stars0 ratingsMastering Pygame: From Basics to Advanced Game Development Rating: 0 out of 5 stars0 ratingsCanvas Cookbook Rating: 0 out of 5 stars0 ratingsMastering SDL for Game Creators: Crafting Unique Experiences: SDL Game Development Series Rating: 0 out of 5 stars0 ratingsXNA 4.0 Game Development by Example: Beginner's Guide Rating: 0 out of 5 stars0 ratingsInstant HTML5 2D Platformer Rating: 0 out of 5 stars0 ratingsXNA 4 3D Game Development by Example: Beginner's Guide Rating: 0 out of 5 stars0 ratingsWindows Phone 7 XNA Cookbook Rating: 0 out of 5 stars0 ratings
Computers For You
Elon Musk Rating: 4 out of 5 stars4/5The Innovators: How a Group of Hackers, Geniuses, and Geeks Created the Digital Revolution Rating: 4 out of 5 stars4/5Creating Online Courses with ChatGPT | A Step-by-Step Guide with Prompt Templates Rating: 4 out of 5 stars4/5The ChatGPT Millionaire Handbook: Make Money Online With the Power of AI Technology Rating: 4 out of 5 stars4/5Mastering ChatGPT: 21 Prompts Templates for Effortless Writing Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5The Self-Taught Computer Scientist: The Beginner's Guide to Data Structures & Algorithms Rating: 0 out of 5 stars0 ratingsProcreate for Beginners: Introduction to Procreate for Drawing and Illustrating on the iPad Rating: 5 out of 5 stars5/5Mindhacker: 60 Tips, Tricks, and Games to Take Your Mind to the Next Level Rating: 4 out of 5 stars4/5Deep Search: How to Explore the Internet More Effectively Rating: 5 out of 5 stars5/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5The Data Warehouse Toolkit: The Definitive Guide to Dimensional Modeling Rating: 0 out of 5 stars0 ratingsExcel 101: A Beginner's & Intermediate's Guide for Mastering the Quintessence of Microsoft Excel (2010-2019 & 365) in no time! Rating: 0 out of 5 stars0 ratingsUX/UI Design Playbook Rating: 4 out of 5 stars4/5Data Analytics for Beginners: Introduction to Data Analytics Rating: 4 out of 5 stars4/5CompTIA Security+ Get Certified Get Ahead: SY0-701 Study Guide Rating: 5 out of 5 stars5/5Learning the Chess Openings Rating: 5 out of 5 stars5/5Black Holes: The Key to Understanding the Universe Rating: 5 out of 5 stars5/5Algorithms For Dummies Rating: 4 out of 5 stars4/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5Excel Tables: A Complete Guide for Creating, Using and Automating Lists and Tables Rating: 5 out of 5 stars5/5Master Obsidian Quickly: Boost Your Learning & Productivity with a Free, Modern, Powerful Knowledge Toolkit Rating: 4 out of 5 stars4/5
Reviews for No Ph.D. Game Design With Three.js
0 ratings0 reviews
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
>
@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;
}
playerScore>0 : computerScore>0
leftPaddle>
rightPaddle>
ball>
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
>
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: