Jeu de Toast Catcher

437 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 July 2025

Boîte d'inscription de connexion 3D HTML CSS Design

19 March 2025

Conception de sites Web utilisant HTML et CSS

4 December 2024

Un code par mikey

HTML

<g font-size="36" id="game-over-screen" pointer-events="none" visibility="hidden" >
			<text x="225" y="220" text-anchor="middle" stroke="#603719" stroke-width="10">GAME OVER</text>
			<text x="225" y="220" text-anchor="middle" fill="#f16f33">GAME OVER</text>
			<text id="final-score-info" x="225" y="260" text-anchor="middle" font-size="24" fill="white">Final Score: 0</text>
		</g>

<symbol id="toast" xmlns="http://www.w3.org/2000/svg" width="95" height="57" viewBox="0 0 95 57">
			<path class="toast__wings" fill="#FDE2A9" stroke="#7F3412" stroke-linejoin="round" stroke-width="3" d="M3.793 18.165c.905-.484 1.938-.526 2.887-.399 1.88.252 4.141 1.27 6.375 2.527 3.967 2.234 8.385 5.539 11.558 8.103l1.279 1.048.105.096a1.5 1.5 0 0 1 .424.87l1.47 11.701a1.5 1.5 0 0 1-.432 1.254c-3.981 3.94-8.147 4.232-10.628 2.541-1.168-.796-2.067-2.187-1.735-3.753.053-.25.135-.483.24-.702-1.743-.454-3.15-1.018-4.257-1.658-1.747-1.01-2.903-2.31-3.22-3.799-.292-1.363.181-2.602 1.058-3.47-1.424-.708-2.823-1.57-4-2.646-2.349-2.147-3.818-5.157-2.921-9.21l.05-.2c.265-.997.838-1.817 1.747-2.303Zm85.793-2.258c-1.486-.17-3.23.45-4.847 1.238-2.93 1.426-6.42 3.904-9.438 6.2l-1.26.971-.133.116a1.5 1.5 0 0 0-.448 1.1l.251 12.107a1.5 1.5 0 0 0 1.44 1.468c3.919.158 6.967-.368 9.192-1.296 2.19-.913 3.742-2.294 4.306-3.937.288-.837.307-1.725.002-2.556-.304-.828-.892-1.499-1.647-1.973a5.05 5.05 0 0 0-.67-.351 23.515 23.515 0 0 0 2.936-2.553c1.003-1.038 1.868-2.154 2.475-3.29.6-1.126.998-2.366.924-3.61-.055-.913-.297-1.79-.868-2.481-.595-.72-1.4-1.06-2.215-1.153Z"/>
			<mask id="a" fill="#fff">
				<path d="M63.941.713c6.616-.394 12.298 4.65 12.692 11.266l.12 2.016a12.94 12.94 0 0 1-1.657 7.165l1.421 23.884a8 8 0 0 1-7.51 8.461l-34.86 2.074a8 8 0 0 1-8.461-7.511l-1.343-22.575a12.946 12.946 0 0 1-3.543-8.17l-.06-1.017c-.427-7.167 5.038-13.323 12.204-13.75L63.941.714Z"/>
			</mask>
			<path fill="#C7511B" d="M63.941.713c6.616-.394 12.298 4.65 12.692 11.266l.12 2.016a12.94 12.94 0 0 1-1.657 7.165l1.421 23.884a8 8 0 0 1-7.51 8.461l-34.86 2.074a8 8 0 0 1-8.461-7.511l-1.343-22.575a12.946 12.946 0 0 1-3.543-8.17l-.06-1.017c-.427-7.167 5.038-13.323 12.204-13.75L63.941.714Z"/>
			<path fill="#7E3112" d="m63.941.713-.178-2.995.178 2.995Zm12.692 11.266-2.995.178 2.995-.178Zm.12 2.016 2.994-.178-2.994.178Zm-1.657 7.165-2.61-1.478a2.999 2.999 0 0 0-.385 1.656l2.995-.178Zm1.421 23.884 2.995-.178-2.995.178Zm-50.831 3.024-2.995.178 2.995-.178Zm-1.343-22.575 2.995-.178a3 3 0 0 0-.819-1.887l-2.176 2.065Zm-3.543-8.17-2.995.179 2.995-.179Zm-.06-1.017-2.995.178 2.994-.178Zm12.204-13.75-.178-2.994.178 2.995ZM63.941.714l.178 2.994a9 9 0 0 1 9.52 8.45l2.994-.178 2.995-.178c-.493-8.27-7.595-14.575-15.865-14.083l.178 2.995ZM76.633 11.98l-2.995.178.12 2.016 2.995-.178 2.994-.178-.12-2.016-2.994.178Zm.12 2.016-2.995.178a9.94 9.94 0 0 1-1.273 5.509l2.611 1.478 2.611 1.477a15.938 15.938 0 0 0 2.04-8.82l-2.994.178Zm-1.657 7.165-2.995.178 1.421 23.884 2.995-.178 2.995-.178L78.09 20.98l-2.995.178Zm1.421 23.884-2.995.178a5 5 0 0 1-4.694 5.288l.178 2.995.178 2.995c6.065-.361 10.689-5.57 10.328-11.634l-2.995.178Zm-7.51 8.461-.179-2.995-34.86 2.074.179 2.995.178 2.995 34.86-2.074-.179-2.995Zm-34.86 2.074-.178-2.995a5 5 0 0 1-5.288-4.694l-2.995.178-2.995.178c.361 6.064 5.57 10.688 11.634 10.328l-.178-2.995Zm-8.461-7.511 2.995-.178-1.343-22.576-2.995.179-2.995.178 1.343 22.575 2.995-.178Zm-1.343-22.575 2.176-2.065a9.946 9.946 0 0 1-2.724-6.283l-2.995.178-2.995.179a15.945 15.945 0 0 0 4.362 10.055l2.176-2.064Zm-3.543-8.17 2.995-.178-.06-1.017-2.996.178-2.994.178.06 1.018 2.995-.179Zm-.06-1.017 2.994-.178c-.328-5.513 3.875-10.249 9.389-10.577l-.179-2.994-.178-2.995c-8.82.525-15.546 8.1-15.021 16.922l2.994-.178Zm12.204-13.75.179 2.995L64.12 3.707 63.94.713l-.178-2.995L32.766-.438l.178 2.995Z" mask="url(#a)"/>
			<mask id="b" fill="#fff">
				<path d="M64.353 3.719a9 9 0 0 1 9.518 8.45l.177 2.969a10.949 10.949 0 0 1-1.721 6.587l1.39 23.368a5 5 0 0 1-4.694 5.288l-32.78 1.95a5 5 0 0 1-5.288-4.694l-1.362-22.894a10.953 10.953 0 0 1-2.882-6.789l-.058-.973c-.36-6.064 4.263-11.273 10.327-11.634L64.353 3.72Z"/>
			</mask>
			<path fill="#FEBB63" d="M64.353 3.719a9 9 0 0 1 9.518 8.45l.177 2.969a10.949 10.949 0 0 1-1.721 6.587l1.39 23.368a5 5 0 0 1-4.694 5.288l-32.78 1.95a5 5 0 0 1-5.288-4.694l-1.362-22.894a10.953 10.953 0 0 1-2.882-6.789l-.058-.973c-.36-6.064 4.263-11.273 10.327-11.634L64.353 3.72Z"/>
			<path fill="#F78E39" d="M64.353 3.719 64.175.724l.178 2.995Zm9.695 11.419 2.995-.178-2.995.178Zm-1.721 6.587-2.525-1.62a3 3 0 0 0-.47 1.799l2.995-.179Zm1.39 23.368 2.995-.178-2.995.178Zm-4.694 5.288.178 2.995-.178-2.995Zm-32.78 1.95.178 2.995-.178-2.995Zm-5.288-4.694-2.995.178 2.995-.178Zm-1.362-22.894 2.994-.178a3 3 0 0 0-.787-1.853l-2.207 2.031Zm-2.882-6.789-2.995.178 2.995-.178ZM36.98 5.347l-.179-2.994.178 2.994ZM64.352 3.72l.178 2.995a6 6 0 0 1 6.346 5.633l2.994-.178 2.995-.179C76.473 5.375 70.79.33 64.175.724l.178 2.995Zm9.518 8.45-2.994.178.176 2.969 2.995-.178 2.995-.178-.177-2.97-2.995.178Zm.177 2.969-2.995.178a7.949 7.949 0 0 1-1.25 4.789l2.524 1.62 2.524 1.621a13.947 13.947 0 0 0 2.192-8.386l-2.995.178Zm-1.721 6.587-2.995.178 1.39 23.368 2.995-.178 2.995-.178-1.39-23.368-2.995.178Zm1.39 23.368-2.995.178a2 2 0 0 1-1.877 2.116l.178 2.994.178 2.995a8 8 0 0 0 7.51-8.46l-2.994.177Zm-4.694 5.288-.178-2.994-32.78 1.95.178 2.994.178 2.995 32.78-1.95-.178-2.995Zm-32.78 1.95-.178-2.994a2 2 0 0 1-2.116-1.878l-2.994.178-2.995.179a8 8 0 0 0 8.46 7.51l-.177-2.995Zm-5.288-4.694 2.994-.178-1.361-22.894-2.995.178-2.995.178 1.362 22.894 2.995-.178Zm-1.362-22.894 2.207-2.031a7.954 7.954 0 0 1-2.094-4.936l-2.995.178-2.995.178a13.953 13.953 0 0 0 3.669 8.642l2.208-2.031Zm-2.882-6.789 2.995-.178-.058-.973-2.995.178-2.995.178.058.973 2.995-.178Zm-.058-.973 2.995-.178a8 8 0 0 1 7.51-8.461l-.178-2.995-.178-2.994C29.084 2.812 23.2 9.44 23.658 17.159l2.995-.178ZM36.98 5.347l.178 2.995 27.373-1.628-.178-2.995-.178-2.995-27.373 1.629.178 2.994Z" mask="url(#b)"/>
			<path stroke="#7F3412" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M49.28 31.137c2.615 1.848 5.61 1.67 7.488-.445"/>
			<g class="toast__eyes">
				<ellipse cx="61.42" cy="25.123" fill="#7F3412" rx="2.5" ry="3.5" transform="rotate(-3.404 61.42 25.123)"/>
				<ellipse cx="42.994" cy="26.502" fill="#7F3412" rx="2.5" ry="3.5" transform="rotate(-3.404 42.994 26.502)"/>
			</g>
		</symbol>
	</svg>
</div>

CSS

JS

class Game {
	constructor() {
		this.svg = document.getElementById('game')
		this.toastSymbolId = '#toast'
		this.scoreEl = document.getElementById('score')
		this.livesEl = document.getElementById('lives')
		this.finalScoreInfoEl = document.getElementById('final-score-info')
		this.gameOverScreenEl = document.getElementById('game-over-screen')
		this.toasts = []
		this.score = 0
		this.spawnInterval = 2000
		this.remainingLives = 5
		this.gameOver = false
		this.gameStartTime = performance.now()

this.loop = this.loop.bind(this)
		this.spawnToast()
		this.startSpawnTimer()
		this.updateLives()
		requestAnimationFrame(this.loop)
	}

startSpawnTimer() {
		if (this.spawnTimer) {
			clearInterval(this.spawnTimer)
		}
		
		const gameTimeSeconds = (performance.now() - this.gameStartTime) / 1000
		this.spawnInterval = Math.max(500, 2000 - Math.floor(gameTimeSeconds / 10) * 100)
		
		this.spawnTimer = setInterval(() => {
			if (!this.gameOver) {
				this.spawnToast()
				
				this.startSpawnTimer()
			}
		}, this.spawnInterval)
	}

spawnToast() {
		if (this.gameOver) return

const startX = Math.random() * 350 + 25
		const endX = Math.random() * 350 + 25
		const peakY = 200 + Math.random() * 50

const toast = document.createElementNS('http://www.w3.org/2000/svg', 'use')
		toast.setAttribute('href', this.toastSymbolId)
		toast.setAttribute('class', 'toast')
		toast.setAttribute('x', startX)
		toast.setAttribute('y', 680)
		this.svg.appendChild(toast)

const toastObj = {
			el: toast,
			startX,
			endX,
			startY: 680,
			peakY,
			startTime: performance.now(),
			duration: 3000,
			clicked: false,
			upwardSpeed: -8,
			reachedBottom: false
		}

toast.addEventListener('pointerdown', () => {
			if (!this.gameOver && !toastObj.clicked) {
				this.score += 1
				this.scoreEl.textContent = this.score.toString().padStart(8, '0')
				toastObj.clicked = true
			}
		})

this.toasts.push(toastObj)
	}

checkGameOver() {
		if (this.remainingLives <= 0) {
			this.gameOver = true
			clearInterval(this.spawnTimer)

this.gameOverScreenEl.setAttribute('visibility','visible')
			this.finalScoreInfoEl.textContent = `Final Score: ${this.score}`
		}
	}

loop(timestamp) {
		if (this.gameOver) {
			requestAnimationFrame(this.loop)
			return
		}

this.toasts = this.toasts.filter(toast => {
			const t = (timestamp - toast.startTime) / toast.duration

if (toast.clicked) {
				const currentY = parseFloat(toast.el.getAttribute('y'))
				const newY = currentY + toast.upwardSpeed
				toast.el.setAttribute('y', newY)
				toast.el.setAttribute('pointer-events', 'none')
				if (newY < -50) {
					toast.el.remove()
					return false
				}
			} else {

if (t > 1) {

if (!toast.reachedBottom) {
						this.remainingLives--
						this.updateLives()
						this.checkGameOver()
						toast.reachedBottom = true
					}
					toast.el.remove()
					return false
				}

const x = toast.startX + (toast.endX - toast.startX) * t
				const y = toast.startY - (4 * t * (1 - t)) * (toast.startY - toast.peakY)

toast.el.setAttribute('x', x)
				toast.el.setAttribute('y', y)
			}

return true
		})

requestAnimationFrame(this.loop)
	}
	
	updateLives(){
			this.livesEl.textContent = `${this.remainingLives}X`
	}
	
}

const game = new Game()

Recommandé

Boîte d'inscription de connexion 3D HTML CSS Design

Conception de sites Web utilisant HTML et CSS

Un code par mikey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS