반응형
php랑 mysql을 공부하니 이전에 만들었던 snake game에 rank 시스템을 추가할 수 있을 것 같아, 한 번 만들어보기로 했다.
완성 모습
몇몇 부분이 바뀌었고 새로 추가된 부분도 있다.
game.js
우선, 게임이 끝나서 점수를 산출해야 하므로, 기존에 끝에 닿으면 다시 처음으로 돌아오는 코드를 없애고 게임이 끝나도록 했으며, 결과 화면을 표시해주는 코드를 추가했다.
game()
// calculate snake's head location
snakeHeadX = snakeBody[snakeLength - 1].x + directionX;
snakeHeadY = snakeBody[snakeLength - 1].y + directionY;
if(snakeHeadX == -1 || snakeHeadX == xSize|| snakeHeadY == -1 || snakeHeadY == ySize){
endGame();
}
endGame()
function showResult(){
context.fillStyle = "#c7ecee";
context.fillRect(width/5, height/3, width*3/5, height/3);
context.fillStyle = "#130f40";
context.font = 'oblique 40px Calibri';
context.fillText('Result', 160, 200);
context.font = 'oblique 30px Calibri';
context.fillText(`Score : ${score}`, 110, 250);
}
function endGame(){
clearInterval(gameLoop);
showResult();
console.log('game end!');
submitBtn.removeAttribute('disabled');
}gameLoop는 setInterval(game, 1000/15)의 리턴 객체이다.(뒤에서 다시 등장함)
또한, restart 기능을 구현하기 위해 여러 변수 값들을 초기화해주는 gameinit()을 새로 만들었다.
startGame()
function gameinit(){
snakeBody = [{x:10, y:10}, {x:10, y:11}, {x:10, y:12}, {x:10, y:13}];
snakeLength = 4;
directionX = 0;
directionY = 1;
mandu = {x:30, y:15};
score = 0;
}
function startGame(){
console.log("Start Game!");
gameinit();
startBtn.setAttribute('disabled', true);
submitBtn.setAttribute('disabled', true);
gameLoop = setInterval(game, 1000/15);
}
function init(){
document.addEventListener('keydown', keyPush);
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
}snake.php
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake Game</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page">
<div class="game">
<p class="gameTitle">The Snake Game!</p>
<div class="gamepage">
<canvas id="display" width="420" height="420">This browser doesn't support canvas, so connect the other one.</canvas>
</div>
<form name="Form" method="POST" action="process.php">
<button class='buttons' id='startBtn' type='button'>START</button>
<button class='buttons' id='restartBtn' type='button'>RESTART</button>
<button class='buttons' id='submitBtn' type="submit" onclick="submitScore()">SUBMIT</button>
<input type="hidden" id="username" name="username">
<input type="hidden" id="score" name="score">
</form>
</div>
<div class="rank">
<p class="rankName">Ranking</p>
<table>
<thead>
<tr>
<th>rank</th><th>username</th><th>date</th><th>score</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<audio id="audio" src="https://www.soundjay.com/human/sounds/baby-cooing-09.mp3"></audio>
<script src="js/setting.js"></script>
<script src="js/game.js"></script>
<script src="js/submitScore.js"></script>
</body>
</html>기존 snake.html 파일을 snake.php 파일로 바꾸고, DB에서 랭킹을 가져와서 화면에 뿌려준다.
저 hidden input을 이용하여 js에서 사용하던 변수들의 값을 post 방식으로 process.php로 넘기도록 했는데, 자세한 사항은 https://chp747.tistory.com/272?category=717254 을 참고하도록 하자.
process.php
<?php
require('./config.php');
$conn = mysqli_connect($config['host'],$config['user'],$config['pw']);
mysqli_select_db($conn, $config['database']);
$username = mysqli_real_escape_string($conn, $_POST['username']);
$score = mysqli_real_escape_string($conn, $_POST['score']);
$sql = "INSERT INTO rank (username, date, score) VALUES ('".$username."', NOW(), '".$score."')";
mysqli_query($conn, $sql);
header('Location: http://localhost/Snake_game/snake.php');
?>받아온 값들을 db에 등록한 뒤, 메인화면으로 리다이렉트한다.
config.php
<?php
$config = array(
'host'=>'localhost',
'user'=>'root',
'pw'=>'1234',
'database'=>'snakegame',
);
?>완성 링크
반응형
'Side Project# > Snake Game' 카테고리의 다른 글
| 웹 서버 올리기 (0) | 2019.05.08 |
|---|---|
| Creating Snake Game (in javascript) (9) | 2019.04.12 |