javascriptでシューティングゲームみたいなものを作る②
こんにちはrihitoです。javascriptでシューティングゲームみたいなものを作る第二回目です。
動機
暇だから対象読者
・javascriptをある程度できる人・ゲームを作りたい人
・暇な人
・とりあえず何かしたい人
今回は、playerの攻撃などを実装していきたいと思います。
記事
javascriptでシューティングゲームみたいなものを作る①javascriptでシューティングゲームみたいなものを作る②
javascriptでシューティングゲームみたいなものを作る③
javascriptでシューティングゲームみたいなものを作る④
javascriptでシューティングゲームみたいなものを作る⑤
今回のソースコード
playerの攻撃を実装する
スペースキーが押されたらplyerにレーザーを描画するまずレーザーを描く
main.js_8行目～
//レーザーの座標
var lx =[0]; //レーザーをたくさん描けるようにするためリストにする
var ly = [0];
var lw = 15 //レーザーの大きさ
var lh = 6
main.js_7行目～
var ps = 30
main.js_14行目～
//playerを描く関数
function player_draw(){
ctx.beginPath()
ctx.rect(px,py,ps,ps)
ctx.fillStyle = "#00ff00"
ctx.fill()
ctx.closePath()
}
//追加********************
function l_draw(){
for(var i = 0;i < lx.length;i++){
ctx.beginPath()
ctx.rect(lx[i],ly[i],15,6)
ctx.fillStyle = "#ff0000"
ctx.fill()
ctx.closePath()
}
}
//追加ここまで************
main.js_46行目～
function draw(){
ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height) //canvasをいったんクリアする
player_draw() //追加
l_draw()
//playerを動かす
px += p_dx
py += p_dy
}
ly[0] は リストlyの0番目ということです。
動かしてみる
main.js_46行目～
function draw(){
ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height) //canvasをいったんクリアする
player_draw() //追加
l_draw()
for(var i = 0;i < lx.length/*リストの長さ*/;i++){ //リストを読み込む
lx[i] += 2 //今読み込んでいるレーザーを動かす
}
//playerを動かす
px += p_dx
py += p_dy
}
なぜforを使っているのかというとこれは、本当はこう書きたいからです。
lx[0] += 2 //lxの0番目に2をたす
lx[1] += 2 //lxの1番目に2をたす
lx[2] += 2 //lxの2番目に2をたす
lx[3] += 2 //lxの3番目に2をたす
456789...
スペースキーが押されたときに発射する
main.js_22行目～
function l_draw(){
for(var i = 0;i < lx.length;i++){ //追加
ctx.beginPath()
ctx.rect(lx[i],ly[i],lw,lh)
ctx.fillStyle = "#ff0000"
ctx.fill()
ctx.closePath()
}//追加
}
main.js_32行目～
//キーが押されたときに実行される
document.onkeydown = function(e){
if(e.key == "ArrowUp"){ //↑
p_dx = 0
p_dy = -3
}
if(e.key == "ArrowDown"){//↓
p_dx = 0
p_dy = 3
}
//追加***************************
if(e.key == " "){
lx.push(px) //レーザー発射開始位置(playerの位置)をリストに追加
ly.push(py)
}
//追加ここまで*******************
}
enemyを描く
playerの攻撃とさほど変わりはありません。main.js_13行目～
//enemyの座標
var ex = [0];
var ey = [0];
main.js_35行目～
function e_draw(){
for(var i = 0;i < lx.length;i++){
ctx.beginPath()
ctx.rect(ex[i],ey[i],36,36)
ctx.fillStyle="#ff00ff"
ctx.fill()
ctx.closePath()
}
}
main.js_71行目～
for(var i = 0;i < lx.length/*リストの長さ*/;i++){ //リストを読み込む
lx[i] -= 2 //今読み込んでいるレーザーを動かす
}
今回のコード
index.html
<!DOCTYPE html>
<html>
<body>
<canvas id="main" height="400" width="800" style="background:#000000" ></canvas>
<!--canvasの下にscriptを読み込まないとエラーがでる-->
<script src="main.js"></script>
</body>
</html>
main.js
var canvas = document.getElementById("main");//canvasを読み込む
var ctx = canvas.getContext("2d");
var px = 40 //player x座標
var py = 300 //player y座標
var p_dx = 0 //player xの速さ
var p_dy = 0 //player yの速さ
//レーザーの座標
var lx =[0]; //レーザーをたくさん描けるようにするためリストにする
var ly = [0];
//enemyの座標
var ex = [0];
var ey = [0];
//playerを描く関数
function player_draw(){
ctx.beginPath()
ctx.rect(px,py,ps,ps)
ctx.fillStyle = "#00ff00"
ctx.fill()
ctx.closePath()
}
function l_draw(){
for(var i = 0;i < lx.length;i++){
ctx.beginPath()
ctx.rect(lx[i],ly[i],15,6)
ctx.fillStyle = "#ff0000"
ctx.fill()
ctx.closePath()
}
}
function e_draw(){
for(var i = 0;i < lx.length;i++){
ctx.beginPath()
ctx.rect(ex[i],ey[i],36,36)
ctx.fillStyle="#ff00ff"
ctx.fill()
ctx.closePath()
}
}
//キーが押されたときに実行される
document.onkeydown = function(e){
if(e.key == "ArrowUp"){ //↑
p_dx = 0
p_dy = -3
}
if(e.key == "ArrowDown"){//↓
p_dx = 0
p_dy = 3
}
if(e.key == " "){
lx.push(px) //レーザー発射開始位置(playerの位置)をリストに追加
ly.push(py)
}
}
//キーが離されたときに実行される
document.onkeyup = function(e){
p_dx = 0 //止める
p_dy = 0
}
function draw(){
ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height) //canvasをいったんクリアする
player_draw()
l_draw()
e_draw()
for(var i = 0;i < lx.length/*リストの長さ*/;i++){ //リストを読み込む
lx[i] += 2 //今読み込んでいるレーザーを動かす
}
e_draw()
for(var i = 0;i < ex.length/*リストの長さ*/;i++){ //リストを読み込む
ex[i] -= 2 //今読み込んでいるenemyを動かす
}
//playerを動かす
px += p_dx
py += p_dy
}
setInterval(draw,10) //10ミリ秒単位で実行
draw();