「敵キャラクター」が出現できるようになりました
ゲーム制作も４週目に入りやっと「敵キャラクター」を描画できるようになりました。
といっても、わからない点はエンジニアの友人に聞きながら作っていったので、すべて自分の力で作成できたわけではありません。
プログラミングなどの専門スキルは「わからないことを聞ける人」がいることが大事だな～と実感しました。
→「敵キャラ」が動くようにしてみた。【ゲームプログラミング～その３～】
次は、「あたり判定」や「スコア機能」など、より「ゲームらしい」要素の作成を行っていきたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<title>WEB SCREEN GAME</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 = 20; // ロケットの画面横方向の位置
var selfPosY = 190; // ロケットの画面縦方向の位置
var selfSpeed = 10; // ロケットのスピード
var enemyBody;
var frameWidth = 860; // CANVAS横サイズ
var frameHeight = 485; // CANVAS縦サイズ
// キーボードの状態
// [ 上 , 下 , 右 , 左 ]
var keyStatus = [false, false, false, false]
// ミサイル
var missiles = [];
var missileSpeed = 30;
var maxMissileCount = 5;
// ミサイルデータの初期化
for ( var i = 0; i < maxMissileCount; i++ ){
// 状態 , x, y
missiles[i] = [false, 0, 0];
}
// エネミー
var enemies = []
var maxEnemyCount = 5;
// エネミータイプ
var enemyType = []
// X有効範囲, Y有効範囲, image name
enemyType[0] = [ 20, 20, "enemy_20x20.png"];
enemyType[1] = [ 50, 50, "enemy_50x50.png"];
enemyType[2] = [ 80, 80, "enemy_80x80.png"];
// エネミーの初期化
// 状態(bool), posX, posY, moveXspeed, moveYspeed, enemyTypeNum
for ( var i = 0; i < maxEnemyCount ; i++ ){
enemies[i] = createEnemy();
}
document.onkeydown = keyDown; //キーダウンの検知設定
document.onkeyup = keyUp; //キーアップの検知設定
//コンテキストの取得可否チェック
if(canvas.getContext){
context = canvas.getContext('2d');
window.onload = function() {
selfBody = new Image();
enemyBody = new Image();
selfBody.src = "rocket.png";
selfBody.onload = function(){
draw(context);
startAnimation();
}
}
}
function startAnimation(){
setInterval(draw, 33);
}
function draw(){
// CANVASをクリア
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, frameWidth, frameHeight);
context.clearRect(0, 0, frameWidth, frameHeight);
// ミサイルを描画
drawMissile();
// ロケットの移動と描画
move();
context.drawImage(selfBody, selfPosX, selfPosY);
// エネミーの描画
drawEnemy();
}
// ロケットの移動
function move(){
if ( keyStatus[0] ){ // UP
if ( selfPosY > 0 ){
selfPosY -= selfSpeed;
}
}
if ( keyStatus[1] ){ // DOWN
if ( selfPosY < 400 ){
selfPosY += selfSpeed;
}
}
if ( keyStatus[2] ){ // RIGHT
if ( selfPosX < 775 ){
selfPosX += selfSpeed;
}
}
if ( keyStatus[3] ){ // LEFT
if ( selfPosX > 0 ){
selfPosX -= selfSpeed;
}
}
}
// キーダウン
function keyDown(e){
if(e.keyCode === 38 ){ keyStatus[0] = true; }//UP KEY
else if(e.keyCode === 40 ){ keyStatus[1] = true;}//DOWN KEY
else if(e.keyCode === 39 ){ keyStatus[2] = true;} //RIGHT KEY
else if(e.keyCode === 37 ){ keyStatus[3] = true;}//LEFT KEY
else if(e.keyCode === 83 ){
missileLaunch(); // ミサイルを発射
}
}
// キーアップ
function keyUp(e){
if(e.keyCode === 38 ){ keyStatus[0] = false;}//UP KEY
else if(e.keyCode === 40 ){ keyStatus[1] = false;}//DOWN KEY
else if(e.keyCode === 39 ){ keyStatus[2] = false;} //RIGHT KEY
else if(e.keyCode === 37 ){ keyStatus[3] = false;}//LEFT KEY
}
// エネミーの描画
function drawEnemy(){
for( var i = 0; i < enemies.length; i++ ){
if( enemies[i][0] < -100 ){
enemies[i] = createEnemy();
}
enemies[i][0] -= enemies[i][2];
enemies[i][1] += enemies[i][3];
enemyBody.src = enemies[i][4];
context.drawImage(enemyBody, enemies[i][0], enemies[i][1]);
}
}
// エネミーデータを初期化
function createEnemy(){
return [
getRandVal(910, 1000), // posX
getRandVal(10, 600), // posY
getRandVal(10, 30), // moveXspeed
-1 * getRandVal(1, 5), // moveYspeed
enemyType[getRandVal(0, 2)][2] // enemyTypeNum
];
}
// ミサイルを描画
function drawMissile(){
for ( var i = 0; i < missiles.length; i++ ){
if ( missiles[i][0] ){ // ミサイルが有効かどうか？
if( missiles[i][1] < 830 ){
missiles[i][1] += missileSpeed;
context.beginPath();
var missile = new Path2D();
missile.rect( missiles[i][1], missiles[i][2], 20, 2 );
context.fillStyle = "rgb(255, 255, 255)";
context.stroke(missile);
context.fill(missile);
} else {
missiles[i][0] = false; // ミサイルを無効化
}
}
}
}
// ミサイルを発射
function missileLaunch(){
for ( var i = 0; i < missiles.length; i++ ){
if( missiles[i][0] === false ){ // ミサイルが有効かどうか？
missiles[i][0] = true; // ミサイルを有効化
missiles[i][1] = selfPosX + 60;
missiles[i][2] = selfPosY + 40;
return;
}
}
}
function getRandVal(min, max){
return Math.floor(Math.random() * (max - min + 1))+ min;
}
</script>
<div id="link"></div>
</body>
</html>