アニメーションプログラミング入門～その４～
アニメーションプログラミング入門～その４～:
前回作った「ロケット（もどき）」を動かしてみました。
今回は作成に２日くらいかかりましたが、まだまだプログラミング初心者なので、変なところもいっぱいあると思います。
もっといろいろ経験していかないと・・・
→「ロケットアニメーション」を作ってみた。
今回作成したコードは、
【横移動】
【上下移動】
「ロケット（もどき）」を動かしてみました。
前回作った「ロケット（もどき）」を動かしてみました。今回は作成に２日くらいかかりましたが、まだまだプログラミング初心者なので、変なところもいっぱいあると思います。
もっといろいろ経験していかないと・・・
→「ロケットアニメーション」を作ってみた。
今回作成したコードは、
【横移動】
<!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>
コメント
コメントを投稿