Posted at

アニメーションプログラミング入門~その4~


「ロケット(もどき)」を動かしてみました。

前回作った「ロケット(もどき)」を動かしてみました。

今回は作成に2日くらいかかりましたが、まだまだプログラミング初心者なので、変なところもいっぱいあると思います。

もっといろいろ経験していかないと・・・

→「ロケットアニメーション」を作ってみた。

今回作成したコードは、

【横移動】

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<title>WEB SCREEN APP</title>
<style>
#screen {
border: solid 1px #000000;
background-color: #000000;
}

</style>
</head>
<body>
<canvas id="screen" width="860" height="485"></canvas>
<script>
//canvas要素のDOM(Document Object Model)を取得
var canvas = document.getElementById('screen');
var context;
var selfBody;
var selfPosX = 0;

var frameWidth = 860;
var frameHeight = 485;

var direction = true;

//コンテキストの取得可否チェック
if(canvas.getContext){

context = canvas.getContext('2d');

window.onload = function() {
selfBody = new Image();

selfBody.src = "rocket.png";

selfBody.onload = function(){
draw(context);
startAnimation();
}
}
}

function startAnimation(){
setInterval(draw, 33);
}

function draw(){
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, frameWidth, frameHeight);
context.clearRect(0, 0, frameWidth, frameHeight);

if( 780 < selfPosX ){
direction = false;
} else if( selfPosX < 0 ){
direction = true;
}

if( direction ){
selfPosX += 3;
} else {
selfPosX -= 3;
}

context.drawImage(selfBody, selfPosX, 200);
}
</script>
<div id="link"></div>
</body>
</html>

【上下移動】

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<title>WEB SCREEN APP</title>
<style>
#screen {
border: solid 1px #000000;
background-color: #000000;
}

</style>
</head>
<body>
<canvas id="screen" width="860" height="485"></canvas>
<script>
//canvas要素のDOM(Document Object Model)を取得
var canvas = document.getElementById('screen');
var context;
var selfBody;
var selfPosX = 0;
var selfPosY = 0;

var degY = 1;

var frameWidth = 860;
var frameHeight = 485;

var directionX = true;
var directionY = true;

//コンテキストの取得可否チェック
if(canvas.getContext){

context = canvas.getContext('2d');

window.onload = function() {
selfBody = new Image();

selfBody.src = "rocket.png";

selfBody.onload = function(){
draw(context);
startAnimation();
}
}
}

function startAnimation(){
setInterval(draw, 33);
}

function draw(){
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, frameWidth, frameHeight);
context.clearRect(0, 0, frameWidth, frameHeight);

// X方向
if( 780 < selfPosX ){
directionX = false;
} else if( selfPosX < 0 ){
directionX = true;
}

if( directionX ){
selfPosX += 3;
} else {
selfPosX -= 3;
}

// Y方向
if( degY >= 180 ){
directionY = false;
}

if( degY <= 0 ){
directionY = true;
}

if( directionY ){
degY++;
} else {
degY--;
}

context.drawImage(selfBody, selfPosX, (selfPosY + ((degY * (Math.PI / 180)) * 120)));
}
</script>
<div id="link"></div>
</body>
</html>