Jagame ソースコード提出
カシワザキjagame.html
<!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;
font-family:carfront;
letter-spacing:5;
font-size:20px;
word-spacing:3;
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’);
console.log(gameArea);
startScreen.addEventListener(‘click’, start);
let player = { speed : 5, score: 0};
// let audio= document.createElement(‘audio’);
// audio.setAttribute(‘src’ ‘sound.mp3’);
// // audio.setAttribute(‘autoplay’, ‘sound.mp3’);
// // audio.loop=true;
// audio.play();
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;
console.log(e.key);
console.log(keys);
}
function keyUp(e)
{
e.preventDefault();
keys[e.key]=false;
console.log(e.key);
console.log(keys);
}
function isCollide(a,b)
{
aRect = a.getBoundingClientRect();
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’;
})
}z
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 enemy = document.querySelectorAll(‘.enemy’);
enemy.forEach(function(item)
{
if(isCollide(car, item))
{
console.log(“HIT”);
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()
{
// console.log(“Hey i am clicked!”);
let car = document.querySelector(‘.car’);
let road = gameArea.getBoundingClientRect();
// console.log(road);
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);
console.log(player.score++);
player.score++;
let ps = player.score -2;
score.innerText = “Score: ” + ps;
}
}
function start()
{ // gameArea.classList.remove(‘hide’);
startScreen.classList.add(‘hide’);
gameArea.innerHTML = “”;
player.start = true;
player.score = 1;
window.requestAnimationFrame(gamePlay );
for( 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’);
// car.innerText = “Hello Pratik this is your car”;
gameArea.appendChild(car);
player.x = car.offsetLeft;
player.y = car.offsetTop;
// console.log(“top position ” +car.offsetTop);
// console.log(“left position ” +car.offsetLeft);
for( x=0; x<3;x++)
{
let enemyCar = document.createElement(‘div’);
enemyCar.setAttribute(‘class’, ‘enemy’);
enemyCar.y=((x+1) * 350) * -1;
enemyCar.style.top = enemyCar.y + ‘px’;
enemyCar.style.backgroundColor = randomColor();;
enemyCar.style.left = Math.floor(Math.random() * 350) + “px”;
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>0
Jagame.css
*{
margin:0;
padding:0;
}
.hide{ display: none;}
.car{
width: 50px;
height: 70px;
background: red;
position: absolute;
left: 550px;
top: 20px;
}
.gameArea{
width: 400px;
height: 100vh;
background: pink;
margin: autos;
}
