###シューティングゲームを始めて作ります。
JavaScriptでシューティングゲームを作っています。画像を描画したいのですが、どこか書き間違えてるみたいで、表示されません。初心者向けに書かれたサイトを見ながら作成しているのですが、うまくいきません・・・(こちらのサイトです。綺麗にまとめられていて、読みやすいです。http://lambdalisue.hatenablog.com/entry/2013/12/25/160910)
###発生している問題・エラーメッセージ
画像が描画されません。coxのdrawImage(img.x,y)というメソッドが使えません。
サイト中ほどのキャンパスに描画するという部分がうまくいきません。
###ソースコード
JavaScript
1"use strict" 2 3var pocket; 4var apple_price, apple_count; 5var orange_price, orange_count; 6 7pocket = 500; 8apple_price = 60; 9apple_count = 3; 10orange_price = 30; 11orange_count = 4; 12 13var balance = pocket - apple_price * apple_count - orange_price * orange_count; 14 15 16console.log("たかしくんの残金は" + balance + "円"); 17 18 19// 全体で使用する変数を定義 20var canvas, ctx; 21//プレイヤーの画像を保持する変数を定義 22var img_player; 23 24//ページロード時に呼び出される処理を指定 25window.onload = function(){ 26 //コンテキストを取得(おまじない) 27 canvas = document.getElementById('screen'); 28 ctx = canvas.getContext('2d'); 29 30 //Playerの画像(id='player')で指定された<img>)を取得 31 img_player = document.getElementById('player'); 32 33 //Playerの画像を(20, 50)の位置に描画 34 ctx.drawImage(img_player, 20, 50); 35}; 36 37// ページロード時に呼び出される処理を指定 38// window.onload = function(){ から }; までの間が呼び出される。 39window.onload = function() { 40 // id を用いてキャンバスオブジェクトを取得し 41 // canvas 変数に代入 42 // 43 // オブジェクト = document.getElementById('id'); 44 // 45 canvas = document.getElementById('screen'); 46 47 // 2次元用の描画コンテキスト(とよばれるナニか)を取得し代入 48 ctx = canvas.getContext('2d'); 49 50 // 塗りつぶしの色を指定(白) 51 ctx.fillStyle = '#fff'; 52 // 塗りつぶされた四角形(横,縦 = 20, 30)を(8, 5)の位置に描画 53 ctx.fillRect(8, 5, 20, 30); 54 55 // 線の色を指定(赤) 56 ctx.strokeStyle = '#f00'; 57 // からっぽの四角形(横,縦 = 90, 10)を(40, 55)の位置に描画 58 ctx.strokeRect(40, 55, 90, 10); 59}; 60 61// 変数 message を定義 62var message; 63// 変数 message に「文字列」を代入 64message = "Hello World"; 65 66// デベロッパーツールにログとして表示 67console.log(message); 68 69// 変数 message2 を定義して「文字列」を代入 70var message2 = "ハローワールド"; 71 72// デベロッパーツールにログとして表示 73console.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<canvas id="screen" width='240' height='320'></canvas> 19<script src="js/shooting.js"></script> 20 21
###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript
CotEditor(バージョン 2.3.4 (95))
Chrome(バージョン 47.0.2526.111 (64-bit))
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/16 07:46