티스토리 뷰
https://www.udemy.com/code-your-first-game/ Link
A simple, short(2 hour) free programming course that you can take in Udemy. Link is given above. He use notepad and chrome browser to code and test because he only need html5 and javascript to make classic tennis game. Start from yesterday and finish today. Really easy coding but worth experience.
Source code
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas;
var canvasContext;
var ballX = 400;
var ballY = 300;
var ballSpeedX = 10;
var ballSpeedY = 8;
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 3;
var showingWinScreen = false;
var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS = 10;
function calculateMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top;// - root.scrollTop;
return {
x:mouseX,
y:mouseY
};
}
function handleMouseClick(evt) {
if(showingWinScreen) {
player1Score = 0;
player2Score = 0;
showingWinScreen = false;
}
}
window.onload = function(){
console.log("hello world");
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 60;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
canvas.addEventListener('mousedown',handleMouseClick);
canvas.addEventListener('mousemove',
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
});
}
function ballReset() {
if (player1Score>= WINNING_SCORE ||
player2Score >=WINNING_SCORE){
showingWinScreen = true;
}
ballSpeedX = 10;
ballSpeedY = 8;
ballSpeedX = -ballSpeedX;
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function computerMovement() {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if (ballX>canvas.width/2){
if(paddle2YCenter<ballY-35) {
paddle2Y += 6;
} else if(paddle2YCenter>ballY+35){
paddle2Y -= 6;
}
}
}
function moveEverything() {
if(showingWinScreen) {
return ;
}
computerMovement();
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if(ballX < 10) {
if(ballY>paddle1Y &&
ballY<(paddle1Y+PADDLE_HEIGHT)){
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle1Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY*0.35;
} else {
player2Score ++; //must before reset
ballReset();
};
}
if(ballX > canvas.width-10) {
if(ballY>paddle2Y && ballY<(paddle2Y+PADDLE_HEIGHT)){
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle2Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY*0.35;
} else {
player1Score ++; //must before reset
ballReset();
};
}
if(ballY > canvas.height-PADDLE_THICKNESS) {
ballSpeedY = -ballSpeedY;
}
if(ballY < PADDLE_THICKNESS) {
ballSpeedY = -ballSpeedY;
}
}
function drawNet() {
for (var i=0;i<canvas.height;i+=40) {
colorRect(canvas.width/2-1,i,2,20,'white');
}
}
function drawEverything() {
//Black background
colorRect(0,0,canvas.width,canvas.height,'black');
if(showingWinScreen) {
canvasContext.fillStyle = 'white';
if (player1Score>= WINNING_SCORE) {
canvasContext.fillText("Left player won", 300, 200);
} else if(player2Score >= WINNING_SCORE) {
canvasContext.fillText("Right player won", 480, 200);
}
canvasContext.fillStyle = 'white';
canvasContext.fillText("Click to continue", 380, 500);
return ;
}
//Left paddle
colorRect(0,paddle1Y,
PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
//Right paddle
colorRect(canvas.width-PADDLE_THICKNESS,
paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
colorCircle(ballX, ballY, 10, 'white');
drawNet();
canvasContext.fillstyle = 'white';
canvasContext.fillText(player1Score, 100, 100);
canvasContext.fillstyle = 'white';
canvasContext.fillText(player2Score, canvas.width-100, 100);
}
function colorRect(leftX,topY, width, height, drawColor){
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,topY,width,height);
}
function colorCircle(centerX, centerY, radous, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radous, 0, Math.PI*2, true);
canvasContext.fill();
}
</script>
</html>
Actual game
'IT' 카테고리의 다른 글
| Task manage network usage doesn't show (0) | 2018.02.12 |
|---|---|
| Index in html (0) | 2018.02.12 |
| How to browse faster than using bookmark (0) | 2018.01.04 |
| RAID (0) | 2017.11.16 |
| Head or Tail simulation (0) | 2017.11.15 |
댓글