AI game creator

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

No:3945

3295

←

Prev Next

→

Poisons to Energize
Developer sayaensm｜Date and time 23/6/27 0:05:57
Build time 42.666 sec｜Game capacity 3.992KB｜

Script

蛇ごっこというゲームを作成しました。

Score:

High Score:

←

Prev　Next

→ 　

Back　

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

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

蛇ごっこというゲームを作成しました。

<!DOCTYPE html>
<html>
<head>
	<title>蛇ごっこ</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: lightgreen;
			font-size: 1.5rem;
		}
		#snake{
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		#food{
			position: absolute;
			background-color: red;
			border-radius: 50%;
			width: 2rem;
			height: 2rem;
		}
	</style>
</head>
<body>
	<div id="snake"></div>
	<div id="food"></div>
	<script>
		const snake = document.getElementById('snake');
		const food = document.getElementById('food');
		let snakeX = 0;
		let snakeY = 0;
		let direction = 'right';
		let interval;
		let score = 0;
		let highScore = localStorage.getItem('highScore');

if(highScore === null){
			localStorage.setItem('highScore', 0);
		}

function moveSnake(){
			switch (direction) {
				case 'up':
					snakeY -= 50;
					break;
				case 'right':
					snakeX += 50;
					break;
				case 'down':
					snakeY += 50;
					break;
				case 'left':
					snakeX -= 50;
					break;
			}

snake.style.left = snakeX + "px";
			snake.style.top = snakeY + "px";

if(snakeX + 50 > window.innerWidth || snakeX < 0 || snakeY + 50 > window.innerHeight || snakeY < 0){
				clearInterval(interval);
				alert("Game Over!");
				if(score > highScore){
					localStorage.setItem('highScore', score);
				}
			}

if(Math.abs(snakeX - food.offsetLeft) < 50 && Math.abs(snakeY - food.offsetTop) < 50){
				food.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
				food.style.top = Math.floor(Math.random() * window.innerHeight) + "px";
				addBody();
				score++;
				document.getElementById('score').innerText = score;
			}
		}

function addBody(){
			const newBody = document.createElement('div');
			newBody.classList.add('body');
			document.body.appendChild(newBody);
		}

function moveBody(){
			const bodyParts = document.querySelectorAll('.body');
			const lastBody = bodyParts[bodyParts.length - 1];
			let lastBodyX = lastBody.offsetLeft;
			let lastBodyY = lastBody.offsetTop;

for(let i = bodyParts.length - 1; i > 0; i--){
				bodyParts[i].style.left = bodyParts[i - 1].offsetLeft + "px";
				bodyParts[i].style.top = bodyParts[i - 1].offsetTop + "px";	
			}

if(bodyParts.length > 1){
				setTimeout(() => {
					lastBody.remove();
					moveBody();
				}, 300);
			}

if(bodyParts.length === 1){
				setTimeout(() => {
					if(Math.abs(snakeX - lastBodyX) < 50 && Math.abs(snakeY - lastBodyY) < 50){
						clearInterval(interval);
						alert("Game Over!");
						if(score > highScore){
							localStorage.setItem('highScore', score);
						}
					}else{
						moveBody();
					}
				}, 300);
			}
		}

function startGame(){
			snake.style.left = '0px';
			snake.style.top = '0px';
			snake.innerHTML = '';
			snake.appendChild(document.createElement('div'));
			document.body.appendChild(snake);
			food.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
			food.style.top = Math.floor(Math.random() * window.innerHeight) + "px";
			direction = 'right';
			score = 0;
			document.getElementById('score').innerText = score;
			if(highScore !== null){
				document.getElementById('highScore').innerText = highScore;
			}
			moveBody();
			interval = setInterval(moveSnake, 300);
		}

startGame();
	</script>
	<div>Score: <span id="score"></span></div>
	<div>High Score: <span id="highScore"></span></div>
	<button onclick="startGame()">New Game</button>
</body>
</html>