シューティングゲームを始めて作ります。
JavaScriptでシューティングゲームを作っています。
四角を描きたいのですが、どこか書き間違えてるみたいで、表示されません。初心者向けにかかれたサイトを見ながら作成しているのですが、うまくいきません・・・(こちらのサイトです。綺麗にまとめられていて、読みやすいです。http://lambdalisue.hatenablog.com/entry/2013/12/25/160910)
###発生している問題・エラーメッセージ
四角形が出ません。
Uncaught TypeError: Cannot read property 'getContext' of null
サイト中ほどのキャンパスに描画するの項目がクリアできません。
###ソースコード
javascript
1"use strict" 2 3// 全体で使用する変数を定義 4var canvas, ctx; 5 6// ページロード時に呼び出される処理を指定 7// window.onload = function(){ から }; までの間が呼び出される。 8window.onload = function() { 9 // id を用いてキャンバスオブジェクトを取得し 10 // canvas 変数に代入 11 // 12 // オブジェクト = document.getElementById('id'); 13 // 14 canvas = document.getElementById('screen'); 15 16 // 2次元用の描画コンテキスト(とよばれるナニか)を取得し代入 17 ctx = canvas.getContext('2d'); 18 19 // 塗りつぶしの色を指定(白) 20 ctx.fillStyle = '#fff'; 21 // 塗りつぶされた四角形(横,縦 = 20, 30)を(8, 5)の位置に描画 22 ctx.fillRect(8, 5, 20, 30); 23 24 // 線の色を指定(赤) 25 ctx.strokeStyle = '#f00'; 26 // からっぽの四角形(横,縦 = 90, 10)を(40, 55)の位置に描画 27 ctx.strokeRect(40, 55, 90, 10); 28}; 29 30// 変数 message を定義 31var message; 32// 変数 message に「文字列」を代入 33message = "Hello World"; 34 35// デベロッパーツールにログとして表示 36console.log(message); 37 38// 変数 message2 を定義して「文字列」を代入 39var message2 = "ハローワールド"; 40 41// デベロッパーツールにログとして表示 42console.log(message2);
html
1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Kawaz Advent Calendar 2014-12-25</title> 4<style> 5body{ 6 background: #eee; 7} 8canvas{ 9 background: #000; 10 display: block; 11 margin: auto; 12} 13</style> 14<img id="player" src="img/player.png"> 15<img id="enemy" src="img/enemy.png"> 16<img id="player_bullet" src="img/player_bullet.png"> 17<img id="enemy_bullet" src="img/enemy_bullet.png"> 18 19<canvas width='240' height='320'><canvas> 20<script src="js/shooting.js"></script> 21 22
###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript
CotEditor(バージョン 2.3.4 (95))
Chrome(バージョン 47.0.2526.111 (64-bit))
回答1件
あなたの回答
tips
プレビュー