駆け出しプログラマーの備忘録

異業種から訪れたIT業界について赤裸々トークを繰り広げる予定！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　あ、私はプログラミングとは無縁の人生を送ってきたクソザコ野郎です٩( 'ω' )و

駆け プロ
トップ > Javascript・jQuery > #22 【Javascript】Web上でホッケー（たま跳ね返り編）

#22 【Javascript】Web上でホッケー（たま跳ね返り編）

Javascript・jQuery 勉強方法 CSS

f:id:momotaroch:20180414233640j:plain

【Javascript】Web上でホッケー（たま跳ね返り編）

昨日、CODEPREPにてレッスンしたJavascriptを用いたホッケーの作り方のコードを
自身の環境に書き写しアレンジしたものになります。

CODEPREPはこちらの記事をどうぞ。
momotaroch.hatenablog.jp
momotaroch.hatenablog.jp

そして今回紹介するものは簡単なもので、
Web上にボックスを用意してその中で球が跳ね返り続けるというものです。

動きはこちら。

壁に当たるごとに色が変わるように変更しています。
少しバグっている箇所は気にしないでください・・・。笑

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no" />
	<title>canvasTest</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<canvas id="game-canvas"></canvas>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

CSS

html,body {
	margin :0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#game-canvas {
	background-color: black;
}

body{
	display: flex;
	align-items: center;
	justify-content: center;
}

Javascript

var boardWidth = 512;
var boardHeight = 512;
var canvas;
var context;
var counter = 0;
var lastTime;
var puck;

var origin;
var count = 0;

function Puck(x,y){
	var self = this;
	self.radius = 5;
	self.x = x;
	self.y =y;
	self.velX = 0.4;
	self.velY = 0.3;

	self.update = function(dt){
		self.x += self.velX * dt;
		self.y += self.velY * dt;

		if (self.y + self.radius > boardHeight) {
			self.velY *= -1;
			count = 1;
		}
		if (self.x + self.radius > boardWidth) {
			self.velX *= -1;
			count = 2;
		}
		if (self.y - self.radius < 0) {
			self.velY *= -1;
			count = 3;
		}
		if (self.x - self.radius < 0) {
			self.velX *= -1;
			count = 4;
		}
	}


	self.draw = function(context){
		if (count == 0) {
		context.fillStyle = "white";
		}else{
			if (count == 1) {
			context.fillStyle = "red";
				console.log(count);
			}else if (count == 2) {
			context.fillStyle = "yellow";
				console.log(count);
			}else if (count == 3) {
			context.fillStyle = "white";
				console.log(count);
			}else if (count == 4) {
			context.fillStyle = "orange";
				console.log(count);
			}else{context.fillStyle="white";}
		}
		context.beginPath();
		context.arc(self.x,self.y,self.radius,0,2 * Math.PI);
		context.fill();
	}
}

function init(){
	lastTime = performance.now();
	canvas = document.getElementById("game-canvas");
	canvas.width = boardWidth;
	canvas.height = boardWidth;
	context = canvas.getContext("2d");

	puck = new Puck(250,250);
}

function update(dt){
	counter += 1;
	puck.update(dt);

}

function render(dt){
	context.clearRect(0,0,canvas.width,canvas.height);

	puck.draw(context);


}

function main(){
	var now = performance.now();
	var dt = now - lastTime;

	var maxFrameTime = 1000 / 60 ;
	if (dt > maxFrameTime) {
		dt = maxFrameTime;
	}

	update(dt);
	render(dt);

	lastTime = now;

	requestAnimationFrame(main);
}

init();
main();


これを用いてホッケーを作れそうです。
まだまだサンプルコードを書き写すくらいしかできませんので
ゆくゆくは自分のものにしたいっすね。٩( 'ω' )و


 

 

にほんブログ村 IT技術ブログへ
にほんブログ村