Yi-Shenの燦爛軌跡

2016年5月24日星期二

打磚塊遊戲-球拍和鍵盤控制-程式碼4

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Gamedev Canvas Workshop - lesson 4: paddle and keyboard controls</title>
	<style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style>
	</head>
	<body>

	<canvas id="myCanvas" width="480" height="320"></canvas>

	<script>
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var ballRadius = 10;
	var x = canvas.width/2;
	var y = canvas.height-30;
	var dx = 2;
	var dy = -2;
	var paddleHeight = 10; (板子的高度)
	var paddleWidth = 75;
	var paddleX = (canvas.width-paddleWidth)/2;
	var rightPressed = false;
	var leftPressed = false;

	document.addEventListener("keydown", keyDownHandler, false);
	document.addEventListener("keyup", keyUpHandler, false);

	function keyDownHandler(e) {
	if(e.keyCode == 39) {
	rightPressed = true;
	}
	else if(e.keyCode == 37) {
	leftPressed = true;
	}
	}
	function keyUpHandler(e) {
	if(e.keyCode == 39) {
	rightPressed = false;
	}
	else if(e.keyCode == 37) {
	leftPressed = false;
	}
	}

	function drawBall() {
	ctx.beginPath();
	ctx.arc(x, y, ballRadius, 0, Math.PI*2);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
	}
	function drawPaddle() {
	ctx.beginPath();
	ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
	}

	function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawBall();
	drawPaddle();

	if(x + dx > canvas.width-ballRadius \|\| x + dx < ballRadius) {
	dx = -dx;
	}
	if(y + dy > canvas.height-ballRadius \|\| y + dy < ballRadius) {
	dy = -dy;
	}

	if(rightPressed && paddleX < canvas.width-paddleWidth) {
	paddleX += 7; (板子碰到框時的變化方向)
	}
	else if(leftPressed && paddleX > 0) {
	paddleX -= 7;
	}

	x += dx;
	y += dy;
	}

	setInterval(draw, 10);
	</script>

	</body>
	</html>

<html>
<head>

<title>Gamedev Canvas Workshop - lesson 3: bounce off the walls</title>
<style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style>
</head>
<body>

<canvas height="320" id="myCanvas" width="480"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2; (控制球飛的速度)
var dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
dy = -dy;
}
x += dx; (避免讓球飛出框外)
y += dy;
}
setInterval(draw, 10);
</script>

</body>
</html>

2016年5月10日星期二

打磚塊課程2-讓球移動-程式碼+心得

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop - lesson 2: move the ball</title>
<style>* { padding: 0; margin: 0; } canvas { background: #000000; display: block; margin: 0 auto; }</style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 5; (可控制球飛的方向)
var dy = 3;

function drawBall() {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#FFB7DD";
ctx.fill();
ctx.closePath();
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx; (可控制球的速度參數)
y += dy;
}

setInterval(draw, 10);
</script>

</body>
</html>
---------------------------------------------------------------------------------------------
課程2:
這次的課程主要是控制球飛的方向，以及球飛的速度!!!

打磚塊課程2-讓球移動-程式

Gamedev Canvas Workshop - lesson 2: move the ball

打磚塊課程1-建立Canvas並畫出-程式碼+心得

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop - lesson 1: create the Canvas and draw on it</title>
<style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.rect(120, 90, 50, 50);
ctx.fillStyle = "#FFBB00"; (改變顏色的地方!!!)
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(200, 180, 20, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(240, 90, 50, 50);
ctx.fillStyle = "#FFBB00";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(130, 215, 155, 20);
ctx.fillStyle = "#DDDDDD";
ctx.fill();
ctx.closePath();
</script>

</body>
</html>
---------------------------------------------------------------------------------------
課程1:

第一課主要是在教學如何改變 (X軸，Y軸，長，寬) ，以及改變顏色，還有改變形狀>.^

色碼表網站:色碼表

打磚塊遊戲之介紹文

簡單十步驟，簡單小遊戲! 網址

↑教你如何做出簡單打磚塊的網址~簡單十步驟就可以做出來!!!

--------------------------------------------------------------------------------------------------------
◎何謂GitHub?

GitHub是一個利用Git進行版本控制、專門用於存放軟體代碼與內容的共享虛擬主機服務。它由GitHub公司（曾稱Logical Awesome）的開發者Chris Wanstrath、PJ Hyett和Tom Preston-Werner使用Ruby on Rails編寫而成。

GitHub同時提供付費帳戶和免費帳戶。這兩種帳戶都可以建立公開的代碼倉庫，但是付費帳戶也可以建立私有的代碼倉庫。根據在2009年的Git使用者調查，GitHub是最流行的Git存取站點。^[2]除了允許個人和組織建立和存取代碼庫以外，它也提供了一些方便社會化軟體開發的功能，包括允許使用者跟蹤其他使用者、組織、軟體庫的動態，對軟體代碼的改動和bug提出評論等。GitHub也提供了圖表功能，用於顯示開發者們怎樣在代碼庫上工作以及軟體的開發活躍程度。

截止到2015年，GitHub已經有超過九百萬註冊使用者和2110萬代碼倉庫。^[3]事實上已經成為了世界上最大的代碼存放網站和開源社群。

--------------------------------------------------------------------------------------------------------

2016年5月24日 星期二