2025/01/22 授業
ゆな| You are currently viewing a revision titled "2025/01/22 授業", saved on 2025年1月23日 12:34 AM by ゆな | |
|---|---|
| タイトル | 2025/01/22 授業 |
| コンテンツ | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jsgame</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
}
.hide {
display: none;
}
.carGame {
width: 100%;
height: 100vh;
background-image: url('Images/trees.png');
background-repeat: no-repeat;
background-size: cover;
}
.car {
width: 50px;
height: 80px;
background: red;
position: absolute;
bottom: 120px;
background-image: url('Images/Car1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.lines {
width: 10px;
height: 100px;
background: white;
position: absolute;
margin-left: 195px;
}
.gameArea {
width: 400px;
height: 100vh;
background: #2d3436;
margin: auto;
position: relative;
overflow: hidden;
border-right: 7px dashed #c8d6e5;
border-left: 7px dashed #c8d6e5;
}
.enemy {
width: 50px;
height: 80px;
background: blue;
position: absolute;
bottom: 120px;
background-image: url('Images/Car1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Score {
position: absolute;
top: 15px;
left: 40px;
background: green;
width: 300px;
line-height: 70px;
text-align: center;
color: white;
font-size: 1.5em;
box-shadow: 0 5px 5px #777;
}
.startScreen {
position: absolute;
background-color: #ee5253;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
z-index: 1;
text-align: center;
border: 1px solid #ff6b6b;
padding: 15px;
margin: auto;
width: 50%;
cursor: pointer;
letter-spacing: 5px;
font-size: 20px;
word-spacing: 3px;
line-height: 30px;
text-transform: uppercase;
box-shadow: 0 5px 5px #777;
}
</style>
</head>
<body>
<div class="carGame">
<div class="Score"></div>
<div class="startScreen">
<p>Press here to start <br>
Arrow keys to move<br>
If you hit another car you will lose.</p>
</div>
<div class="gameArea"></div>
</div>
<script>
const score = document.querySelector('.Score');
const startScreen = document.querySelector('.startScreen');
const gameArea = document.querySelector('.gameArea');
startScreen.addEventListener('click', start);
let player = { speed: 5, score: 0 };
let keys = { ArrowUp: false, ArrowDown: false, ArrowRight: false, ArrowLeft: false };
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
function keyDown(e) {
e.preventDefault();
keys[e.key] = true;
}
function keyUp(e) {
e.preventDefault();
keys[e.key] = false;
}
function isCollide(a, b) {
let aRect = a.getBoundingClientRect();
let bRect = b.getBoundingClientRect();
return !(
aRect.bottom < bRect.top ||
aRect.top > bRect.bottom ||
aRect.right < bRect.left ||
aRect.left > bRect.right
);
}
function moveLines() {
let lines = document.querySelectorAll('.lines');
lines.forEach(function (item) {
if (item.y >= 700) {
item.y -= 750;
}
item.y += player.speed;
item.style.top = item.y + 'px';
});
}
function endGame() {
player.start = false;
startScreen.classList.remove('hide');
startScreen.innerHTML =
"Game Over <br> Final Score: " +
player.score +
"<br> Press here to restart the game.";
}
function moveEnemy(car) {
let enemies = document.querySelectorAll('.enemy');
enemies.forEach(function (item) {
if (isCollide(car, item)) {
endGame();
}
if (item.y >= 750) {
item.y = -300;
item.style.left = Math.floor(Math.random() * 350) + 'px';
}
item.y += player.speed;
item.style.top = item.y + 'px';
});
}
function gameplay() {
let car = document.querySelector('.car');
let road = gameArea.getBoundingClientRect();
if (player.start) {
moveLines();
moveEnemy(car);
if (keys.ArrowUp && player.y > road.top + 70) player.y -= player.speed;
if (keys.ArrowDown && player.y < road.bottom - 85) player.y += player.speed;
if (keys.ArrowLeft && player.x > 0) player.x -= player.speed;
if (keys.ArrowRight && player.x < road.width - 70) player.x += player.speed;
car.style.top = player.y + 'px';
car.style.left = player.x + 'px';
window.requestAnimationFrame(gameplay);
player.score++;
score.innerText = "Score: " + (player.score - 1);
}
}
function start() {
startScreen.classList.add('hide');
gameArea.innerHTML = '';
player.start = true;
player.score = 0;
window.requestAnimationFrame(gameplay);
for (let x = 0; x < 5; x++) {
let roadLine = document.createElement('div');
roadLine.setAttribute('class', 'lines');
roadLine.y = x * 150;
roadLine.style.top = roadLine.y + 'px';
gameArea.appendChild(roadLine);
}
let car = document.createElement('div');
car.setAttribute('class', 'car');
gameArea.appendChild(car);
player.x = car.offsetLeft;
player.y = car.offsetTop;
for (let x = 0; x < 3; x++) {
let enemyCar = document.createElement('div');
enemyCar.setAttribute('class', 'enemy');
enemyCar.y = (x + 1) * -350;
enemyCar.style.top = enemyCar.y + 'px';
enemyCar.style.left = Math.floor(Math.random() * 350) + 'px';
enemyCar.style.backgroundColor = randomColor();
gameArea.appendChild(enemyCar);
}
function randomColor() {
function c() {
let hex = Math.floor(Math.random() * 256).toString(16);
return ('0' + String(hex)).substr(-2);
}
return '#' + c() + c() + c();
}
}
</script>
</body>
</html> |
| 抜粋 | |
| 脚注 |
