Games that SEGA will revive's game

Click here for free DL of the app version that can save data.

No:2750

1139

←

Prev Next

→

Games that SEGA will revive
Developer User3591｜Date and time 23/6/22 14:04:09
Build time 60.233 sec｜Game capacity 4.939KB｜

Script

SEGA Returns Game

Score: 0

Game Over 😭
Your score was: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>SEGA Returns Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: black;
			color: white;
			font-family: Arial, sans-serif;
			text-align: center;
			font-size: 3em;
			margin: 0;
			padding: 0;
		}

header {
			padding: 10px;
			background-color: #f44336;
			color: white;
		}
		
		#canvas {
			width: 90vw;
			height: 80vh;
			background-color: #008CBA;
			border: 2px solid white;
			margin: auto;
			display: block;
		}

#startBtn {
			padding: 20px;
			background-color: #4CAF50;
			color: white;
			border-radius: 20px;
			border: none;
			font-size: 1.5em;
			margin: 20px;
			cursor: pointer;
		}

#score {
			font-size: 2em;
			margin: 20px;
		}

.gameover {
			position: absolute;
			top: 30%;
			left: 10%;
			right: 10%;
			background-color: #f44336;
			color: white;
			border-radius: 20px;
			padding: 20px;
			z-index: 1;
			display: none;
		}

#playAgainBtn {
			padding: 20px;
			background-color: white;
			color: #f44336;
			border-radius: 20px;
			border: 2px solid #f44336;
			font-size: 1.5em;
			margin-top: 20px;
			cursor: pointer;
		}
		
		@media screen and (min-width: 768px) {
			body {
				font-size: 5em;
			}	
		}
	</style>
</head>
<body>
	<header>SEGA Returns Game</header>
	<canvas id="canvas"></canvas>
	<button id="startBtn">Start Game 🕹️</button>
	<div id="score">Score: 0</div>
	<div class="gameover">Game Over 😭<br>Your score was: <span id="finalScore">0</span><br><button id="playAgainBtn">Play Again 🕹️</button></div>
	
	<script>
		// Variables
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const startBtn = document.getElementById('startBtn');
		const scoreDiv = document.getElementById('score');
		const gameoverDiv = document.querySelector('.gameover');
		const finalScoreSpan = document.getElementById('finalScore');
		const playAgainBtn = document.getElementById('playAgainBtn');

let score = 0;
		let snake = [{x: 7, y: 7}];
		let dx = 1;
		let dy = 0;
		let foodX = 0;
		let foodY = 0;
		let gameStarted = false;
		let gamePaused = false;
		let gameover = false;

// Functions
		function drawSnake() {
			snake.forEach(function(part) {
				ctx.fillStyle = 'white';
				ctx.fillRect(part.x * 20, part.y * 20, 20, 20);
			});
		}

function moveSnake() {
			const head = {x: snake[0].x + dx, y: snake[0].y + dy};
			snake.unshift(head);

if (head.x === foodX && head.y === foodY) {
				score++;
				scoreDiv.textContent = `Score: ${score}`;
				createFood();
			} else {
				snake.pop();
			}
		}

function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}

function drawFood() {
			ctx.fillStyle = 'yellow';
			ctx.fillRect(foodX * 20, foodY * 20, 20, 20);
		}

function createFood() {
			foodX = Math.floor(Math.random() * canvas.width / 20);
			foodY = Math.floor(Math.random() * canvas.height / 20);
		}

function checkGameover() {
			if (snake[0].x < 0 || snake[0].x >= canvas.width / 20 || snake[0].y < 0 || snake[0].y >= canvas.height / 20) {
				gameover = true;
			}

for (let i = 1; i < snake.length; i++) {
				if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
					gameover = true;
				}
			}

if (gameover) {
				stopGame();
			}
		}

function startGame() {
			gameStarted = true;
			startBtn.style.display = 'none';
			gamePaused = false;
			snake = [{x: 7, y: 7}];
			dx = 1;
			dy = 0;
			score = 0;
			scoreDiv.textContent = 'Score: 0';
			createFood();
			clearCanvas();
			drawFood();
			drawSnake();
			setTimeout(gameLoop, 100);
		}

function stopGame() {
			gameStarted = false;
			gamePaused = false;
			gameover = true;
			gameoverDiv.style.display = 'block';
			finalScoreSpan.textContent = score;
		}

function gameLoop() {
			if (!gamePaused) {
				clearCanvas();
				drawFood();
				moveSnake();
				drawSnake();
				checkGameover();
			}

if (gameStarted && !gameover) {
				setTimeout(gameLoop, 100 - score);
			}
		}

// Event Listeners
		canvas.addEventListener('click', function() {
			if (dy === 0) {
				dy = 1;
				dx = 0;
			} else if (dx === 0) {
				dx = 1;
				dy = 0;
			}
		});

startBtn.addEventListener('click', startGame);

playAgainBtn.addEventListener('click', function() {
			gameoverDiv.style.display = 'none';
			startGame();
		});