Yi-Shenの燦爛軌跡: 打磚塊遊戲-球拍和鍵盤控制-程式碼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>

Yi-Shenの燦爛軌跡

2016年5月24日星期二

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

沒有留言:

張貼留言

2016年5月24日 星期二

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

沒有留言:

張貼留言

2016年5月24日星期二