現在JavaScript使用する簡単なゲーム参考動画を模写しつつ、JavaScriptの勉強しているのですが、この動画に来てから、Chorome上で表示がされなくなってしまいました。
検証ツールでは、Jiki.draw();の部分に(main.js:173 Uncaught TypeError: Jiki.draw is not a function
at gameLoop (main.js:173))というエラーが出てるのですが、参考ページもJiki.draw();と記載して表示されているので、なぜ自分のだけ表示されないのか不思議なのですが、分かる方いましたらお願いします。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6<body> 7<canvas id="can"></canvas> 8 9<script src="main.js"> 10</script> 11</body> 12</html>
JavaScript
1//ゲームスピード(ms) 2const GAME_SPEED = 1000/60; 3 4//画面サイズ 5const SCREEN_W = 180; 6const SCREEN_H = 320; 7 8//キャンバスサイズ 9const CANVAS_W = SCREEN_W * 2; 10const CANVAS_H = SCREEN_H * 2; 11 12//フィールドサイズ 13const FIELD_W = SCREEN_W * 2; 14const FIELD_H = SCREEN_H * 2; 15 16const STAR_MAX = 300; 17//キャンバス 18let can = document.getElementById('can'); 19let con = can.getContext('2d'); 20can.width = CANVAS_W; 21can.height = CANVAS_H; 22 23//フィールド(仮想画面) 24let vcan = document.createElement('canvas') 25let vcon = vcan.getContext('2d'); 26vcan.width = CANVAS_W; 27vcan.height = CANVAS_H; 28 29//カメラの座標 30let camera_x = 0; 31let camera_y = 0; 32 33//星の実体 34let star = []; 35 36//キーボードの状態 37let key =[]; 38 39//キーボードが押されたとき 40document.onkeydown = function(e){ 41 key[e, keyCode] = true; 42} 43 44document.onkeyup = function(e){ 45 key [e, keyCode] = false; 46} 47 48//自機クラス 49class Jiki{ 50 constructor(){ 51 this.x = (FIELD_W/2)<<8; 52 this.y = (FIELD_H/2)<<8; 53 this.speed = 512; 54 this.anime = 0; 55 56 } 57 update(){ 58 if(key[37] && this.x>this.speed){ 59 this.x-=this.speed; 60 if(this.anime>-8)this.anime--; 61 }else 62 if(key[39] && this.x<= (FIELD_W<<8)-this.speed){ 63 this.x+=this.speed; 64 if(this.anime<8)this.anime++; 65 } else { 66 if(this.anime>0)this.anime--; 67 if(this.anime<0)this.anime++; 68 } 69 if(key[38] && this.y>this.speed)this.y-=this.speed; 70 71 if(key[40] && this.y<= (FIELD_H<<8)-this.speed)this.y+=this.speed; 72 } 73 //描画 74 draw(){ 75 drawSprite(2 + (this.anime>>2), this.x, this.y); 76 } 77} 78 79let jiki = new Jiki(); 80 81//画像ファイル読み込み 82let spriteImage = new Image(); 83spriteImage.src ="sprite.png"; 84 85 86//スプライトクラス 87class Sprite{ 88 constructor(x,y,w,h){ 89 this.x = x; 90 this.y = y; 91 this.w = w; 92 this.h = h; 93 } 94} 95//スプライト 96let sprite = [ 97 new Sprite(0,0,22,42), 98 new Sprite(23,0,33,42), 99 new Sprite(57,0,43,42), 100 new Sprite(101,0,33,42), 101 new Sprite(135,0,21,42) 102] 103 104//スプライトを描画する 105function drawSprite(snum,x,y){ 106 let sx = sprite[snum].x; 107 let sy = sprite[snum].y; 108 let sw = sprite[snum].w; 109 let sh = sprite[snum].h; 110 111 let px = (x>>8) - sw/2; 112 let py = (y>>8) - sh/2; 113 114 if(px+sw/2 < camera_x || px-sw/2 >= camera_x+SCREEN_W || 115 py+sh/2 < camera_y || py - sy/2 >= camera_y+SCREEN_H)return; 116 117 vcon.drawImage(spriteImage,sx,sy,sw,sh,px,py,sw,sh); 118} 119 120 121//整数のランダムを作る 122function rand(min,max){ 123 return Math.floor(Math.random() * (max-min+1))+min; 124} 125 126class Star{ 127 constructor(){ 128 this.x = rand(0,FIELD_W)<<8; 129 this.y = rand(0,FIELD_H)<<8; 130 this.vx = 0; 131 this.vy = rand(30,200); 132 this.sz = rand(1,2); 133 } 134 135 draw(){ 136 let x =this.x>>8; 137 let y =this.y>>8; 138 if(x < camera_x || x >= camera_x+SCREEN_W || 139 y < camera_y || y >= camera_y+SCREEN_H)return; 140 vcon.fillStyle=rand(0,2)!=0?"66f":"#8af"; 141 vcon.fillRect(this.x>>8,this.y>>8,this.sz,this.sz); 142 } 143 update(){ 144 this.x += this.vx; 145 this.y += this.vy; 146 if(this.y>FIELD_H<<8){ 147 this.y=0; 148 this.x=rand(0,FIELD_W)<<8; 149 } 150 } 151} 152 153 154 155//ゲーム初期化 156function gameInit(){ 157for(let i=0;i<STAR_MAX;i++)star[i] = new Star(); 158setInterval(gameLoop, GAME_SPEED) 159} 160//ゲームループ 161function gameLoop(){ 162 //移動処理 163 for(let i=0;i<STAR_MAX;i++)star[i].update(); 164 165 jiki.update(); 166 167 //描画処理 168 vcon.fillStyle="black"; 169 vcon.fillRect(camera_x,camera_y,SCREEN_W,SCREEN_H); 170 171 for(let i=0;i<STAR_MAX;i++)star[i].draw(); 172 173 Jiki.draw(); 174 175 //自機の範囲0~FIELD_W 176 // カメラの範囲0~(FIELD_W - SCREEN_W) 177 camera_x = (Jiki.x>>8)/FIELD_W * (FIELD_W-SCREEN_W); 178 camera_y = (Jiki.y>>8)/FIELD_H * (FIELD_H-SCREEN_H); 179 180 //仮想画面から実際のキャンバスにコピー 181 con.drawImage(vcan , camera_x,camera_y,SCREEN_W,SCREEN_H, 0,0, 182 CANVAS_W,CANVAS_H) 183 184 185} 186 187//オンロードで初期化 188window.onload = function(){ 189 this.gameInit(); 190}
回答2件
あなたの回答
tips
プレビュー