• 締切済み

超初心者の質問

今enchant.jsというライブラリで実際に自分でコードを書いてみようと思い、数列ほどのコードを見よう見まねで足してみたのですがうまくいきません。 enchant (); window.onload = function(){ var game = new Game(); game.fps = 30; game.preload('http://enchantjs.com/assets/images/chara1.gif'); game.onload = function(){ var bear = new Sprite(32, 32); bear.image = game.assets['http://enchantjs.com/assets/images/chara1.gif']; bear.tick = 0; bear.anim = [0, 1, 0, 2]; game.rootScene.addChild(bear); bear.addEventListener(Event.ENTER_FRAME, function() { bear.tick++; bear.frame = bear.anim[bear.tick % 4]; if (bear.scaleX == 1){ bear.x += 20; if (bear.x > 320 - 32)bear.scaleX = -1; } else{ bear.x -=7; if (bear.x < 0) bear.scaleX = 1; } }); bear.onEnterFrame = function() { var input = game.input; if (input.up) { this.y -= 5; } if (input.down) { this.y += 5; } }; }; game.start(); }; 下のほうの bear.onEnterFrame = function() { var input = game.input; if (input.up) { bear.y -= 5; } if (input.down) { bear.y += 5; } }; が足した部分です。 追加した部分以外のコードはクマのキャラクターが画面を右に左に走るアニメーションになっていて、それに↑↓ボタンで縦軸だけを操作できるコードを追加してみようと思ったんですがだめでした。 足した部分のコードを関数やイベントタイプを追加するなどいろいろやってみましたが、ダメでした。エラーは上のコードでは出てません。なぜでしょうか。ご教示ください。

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

足した部分ですと書いてるコードと、実際に足されているコードは違いますよね。 それで解決すると思います。

natyo4235
質問者

お礼

回答ありがとうございます。お返事遅くなりましてすいません。 上に書いたonEnterFrameの部分のコードは以前試したもので、コピペするものを間違えました。質問に書きたかったものはonEnterFrameの部分を以下のコードにしたものです。 bear.addEventListener(Event.ENTER_FRAME, function() { var input = game.input; if (input.up) { this.y -= 5; } if (input.down) { this.y += 5; } }); }; このコードをスマホプレビュー画面を開くとで操作できるとに気づきました。しかしパソコンのプレビュー画面だと操作できません。 改めて、パソコン画面で操作できない理由をご存知でしたらご教示ください。よろしくお願いします。

関連するQ&A

  • if(条件式){メソッド、メソッド}でエラー

    超初心者です。enchant.jsというゲームエンジンでコードの練習をしています。 質問の部分は↓です。 bear.addEventListener(Event.ENTER_FRAME, function() { var input = game.input; if (input.up){ bear.tl.moveBy(0, -120, 12, enchant.Easing.QUAD_EASEOUT),bear.tl.moveBy(0, 120, 12, enchant.Easing.QUAD_EASEIN); } else if (input.right) { bear.x += 7; } else if (input.left) { bear.x -= 7; } }); ifのすぐ下の bear.tl.moveBy(0, -120, 12, enchant.Easing.QUAD_EASEOUT),bear.tl.moveBy(0, 120, 12, enchant.Easing.QUAD_EASEIN); の部分にエラーが出てるようで、エラー内容は→「Expected an assignment or function call and instead saw an expression.Reloaded Site.」です。 訳を調べると「代入か関数コールの予定じゃないの?式じゃなくて。」という意味だそうですが、僕の認識だと上の一文は関数コールにしか見えません。なんでこういうエラーが出るんでしょうか? 上の一文の引数はこれ→http://www.atmarkit.co.jp/ait/articles/1306/25/news026_2.htmlを参考にしています。

  • javascriptのenchantの打ちミス

    javascriptのenchantで打ちミスをしてつまづいてます。 だけど、どこがどうミスしてるのかわかりません。 プログラム作成で利用しているサイトはこちらです。 http://code.9leap.net/codes/edit/83463 参考書はこれです。↓↓ http://www.amazon.co.jp/s/ref=nb_sb_noss_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=javascript+%E3%82%B2%E3%83%BC%E3%83%A0&rh=i%3Aaps%2Ck%3Ajavascript+%E3%82%B2%E3%83%BC%E3%83%A0 ソースはこれです。↓↓ enchant(); var game; var scoreLabel; var timeLabel; var mogura =new Array(9); function rand(num){ return Math.floor(Math.random()*num); } Mogura =Class.create(Sprite,{ initialize:function(x,y){ Sprite.call(this,80,80); this.image =game.assets["mogura.png"]; this.x=x; this.y=y; this.status=-rand(200); }, onenterframe:function(){ this.staus++; if(this.status<0){ this.frame=0; }else if(this.status==0){ this.frame=1; }else if(this.status == 30){ this.status=-rand(200); } }, ontouchend:function(){ if(this.frame==1){ this.frame=2; this.status=0; scoreLabel.score+100; } } }); window.onload=function(){ game=new Game(320,320); game.rootScene.backgroundColor="rgb(144,198,116)"; game.preload("mogura.png"); game.onload =function(){ for(var i=0; i<9;i++){ mogura[i]=new Mogura( 20+i%3*100, 50+Mathfloor(i/3)*80); game.rootScene.addChild(mogura[i]); } scoreLabel = new ScoreLabel(5,5); scoreLabel.score=0; game.rootScene.addChild(scoreLAbel); timeLabel =new TimeLabel(5,25,"countdown"); timeLabel.time =10; timeLabel.onenterframe =function(){ if(timeLabel.time<=0){ game.end(); } } game.rootScene.addChild(timeLabel); } game.start(); } このソースの15行目の }else if(this.status==0){で黄色の三角マークが出ているのですが、 どこが間違ってるのかまったくわかりません。 全部消してやり直しても同じところで同じマークが出てしまいます。 どこが間違ってて、どうすればいいのか、教えてください。

  • enchant.js によるゲーム開発

    enchant.jsを使ってゲームを作っています。 敵を作り、ボスを表示するまで、たどり着きましたが、 ボスに攻撃を当てようと玉を打つと止まります。 playerShootクラスの処理を消すと打つことはできますが、ボスに攻撃をあてることはできません。 なので、原因はplayershootクラスにあると考えていますが、 うまくいかず、アドバイスをいただけないでしょうか? //プレイヤーが撃つ弾のクラス var PlayerShoot = enchant.Class.create(Shoot, { initialize: function(x, y){ Shoot.call(this, x, y, 0); //弾のサイズ this.width = 15; this.height = 15; this.image = game.assets['images/playerShoot.png']; this.addEventListener('enterframe', function(){ if(boss.intersect(this)){ //ライフが0でなければ小爆発 if(bosslife > 0){ this.remove(); bosslife --; var miniblast = new MiniBlast(this.x, this.y); //ライフが0になったら大爆発 }else{ var ultrablast = new UltraBlast(boss.x, boss.y); game.rootScene.removeChild(boss); this.remove(); } } }); } });

  • jsdo.itとMonacaについて

    jsdo.itで作ったものをMonacaに張り付けてみると実行できません どこが間違えているのでしょうか? jsdo.itでは動きました またjsdo.itで作ったものをapplicationにするのは無理なのですか? index.html <!DOCTYPE html> <html> <head> <script src="main.js"></script> <script src="enchant.js"></script> <script src="main.js"></script> <meta charset="utf=8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>HELLO WORLD</title> <style type="text/css"> body { margin:0; } </style> </head> <body> </body> </html> main.js enchant () ; window.onload = function () { //ゲームオブジェクト var game = new Game(320,320); //画像の読み込み game.preload('http://enchantjs.com/assets/images/chara1.gif'); //画像読み込み完了時に実行する処理 game.onload = function() { //スプライトの生成 var bear = new Sprite(32,32); //32pxのスプライト作成 bear.image = game.assets['http://enchantjs.com/assets/images/chara1.gif']; bear.frame=4; //4つめの画像 //フレーム毎の定期処理 bear.addEventListener(Event.ENTER_FRAME, function() { this.x += 3; //3px移動 }); //表示オブジェクトツリーに追加 game.rootScene.addChild(bear); }; game.start(); }; enchant.jsはDLしたファイルのbuildの中のenchant.jsをアップロードしています

  • javascriptのアラートが何回も出る

    こんにちは。 enchant.jsを使用してjavascriptを書いています。 [環境] Windows7 IDE:WebStorm6.0 [Browser] Google Chrome 25.0.1364.172m FireFox 19.0.2 Internet Explorer 9.0.8112.16421 ----------------------------------------------------- enchant(); window.onload = function(){ var core = new Core(320, 320); core.preload('./img/chara1.png'); core.onload = function(){ var bear = new Sprite(32, 32); bear.image = core.assets['./img/chara1.png']; bear.x = 0; bear.y = 0; bear.addEventListener('enterframe', function(){ if(core.input.right){ alert("right");//問題の箇所 this.x += 5; } }); core.rootScene.addChild(bear); } core.start(); }; 上記コードは、右キーを押した時に絵を右に動かすプログラムなのですが 右キーを押した時に追加で、"right"とアラートさせるようにしました。 Google Chromeの場合、実行して右キーを押した時に"right"とアラートされ、アラートダイアログのOKボタンを押すとダイアログが消えて、絵が右に1回進みます。そして即座にまた"right"とアラートされてしまいます。 しかし不思議な事に、アラートの行をコメントアウトすると、右キーを押した時に絵が1回動いて止まり、次に押すまでは止まったままです。(正常な動き) つまり、アラートを書いている時のみ、なぜか一度キーを押すと、その後ずっと押した時の処理が行われているという事になってしまっています。 IEの場合も、GoogleChromeと同じ現象が起きています。 FireFoxの場合は、上記のような現象は起こらず、キーを押すと"right"とアラートされ、OKを押して閉じると絵が右に動いて、終わります。連続でアラートされることは無く、正常な動作でした。 僕は純粋にjavascriptのみでコードを書いたことが無く、enchant.jsライブラリを使用して最近始めました。 これはjavascriptのみの場合でも起こる現象なのでしょうか?それとも、enchant.jsの仕様に関わる問題なのでしょうか? はたまた、ブラウザの仕様に関わるものなのでしょうか? 以上、宜しくお願い致します。

  • JavaScriptでのアニメーション

    JavaScriptで書いたアニメーションをHTML5上で動かそうとしているのですが、うまくいきません。いろいろなサイトで調べましたが原因がわからなかったのでどなたか解決法を教えてください。 任意の値X,Yを入力、これを始点の座標としてそこからランダムな色の円が動くというアニメーションを作りたいです。しかし、X,Yの値を任意に入力させようとするとアニメーションそのものが動かなくなってしまいます。座標をあらかじめ指定しておくとうまく動くのですが……。 任意の値を入れてもきちんと動くように直したいのですが、方法がわかりません。どなたかご教授願います。 以下コード。これより上と下は省略してあります。 <script type="text/javascript"> var speedX = 3.0;   var speedY = 4.0; var locX = parseInt(document.getElementById("x").value); var locY = parseInt(document.getElementById("y").value);  //locX,locYを予め指定しておくとその位置からきちんとアニメーションが動くが、上のようにすると動かなくなる var ctx; function anim(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ ctx = canvas.getContext('2d'); setInterval(draw, 60); } } function draw(){ ctx.globalCompositeOperation = "source-over"; var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle = rgba; ctx.fill(); ctx.globalCompositeOperation = "lighter"; locX += speedX; locY += speedY; if(locX < 0 || locX > 800){ speedX *= -1; } if(locY < 0 || locY > 600){ speedY *= -1; } ctx.beginPath(); ctx.fillStyle = rgba; ctx.arc(locX, locY, 5, 0, Math.PI*2.0, true); ctx.fill(); } </script> </head> <body> <p><label>X </label><input id="x"> <label>Y </label><input id="y"> <button type=button onclick="anim();">start</button></p>

  • onEnterFrameで予定の位置で止まってくれない。

    http://www.icnet.ne.jp/~ang74g5c/ ↑このようなものを作ってみました。 フラッシュのサイズは800×600px。 一つの色のパネルの大きさも800×600pxで、様々な色を合わせて3行3列で合計9個のパネルを並べたものをイラストレータで作成してフラッシュに入れ、インスタンス名はcolorpannel(基準点は左上)としました。 右上の番号を押すと想定の位置で止まるようにしたいと思い、フレームに以下の設定をしてみました。 (右上の番号にはそれぞれnum1~num9までのインスタンスネームをつけています。) ------------------------------------- num1.onRelease = function() { _root.onEnterFrame = function() { if (_root.colorpannel._x>=0) { _root.colorpannel._x -= 30; } if (_root.colorpannel._x<=0) { _root.colorpannel._x += 30; } if (_root.colorpannel._y>=0) { _root.colorpannel._y -= 30; } if (_root.colorpannel._y<=0) { _root.colorpannel._y += 30; } }; }; num2.onRelease = function() { _root.onEnterFrame = function() { if (_root.colorpannel._x>=-800) { _root.colorpannel._x -= 30; } if (_root.colorpannel._x<=-800) { _root.colorpannel._x += 30; } if (_root.colorpannel._y>=0) { _root.colorpannel._y -= 30; } if (_root.colorpannel._y<=0) { _root.colorpannel._y += 30; } }; }; num3.onRelease = function() { _root.onEnterFrame = function() { if (_root.colorpannel._x>=-1600) { _root.colorpannel._x -= 30; } if (_root.colorpannel._x<=-1600) { _root.colorpannel._x += 30; } if (_root.colorpannel._y>=0) { _root.colorpannel._y -= 30; } if (_root.colorpannel._y<=0) { _root.colorpannel._y += 30; } }; }; (以下、num9まで座標位置が変わったものだけを記述していますので省略します。) ------------------------------------- URLを見ていただくとわかるように、各色の止まる位置が微妙にズレて隣の色が見えてしまっているのです。 OnEnterFrameなので、座標位置を指定してdeleteで止めれば良いのかな?とは思っているのですが、その書き方もよくわかりません。 どなたか、おわかりにある方がいらっしゃいましたら教えていただけませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • javascriptの打ちミスしてる所を知りたい。

    参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。 たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。 教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

  • javascriptのタイプミス

    javascript初心者です。以下のコードでどこにミスがあるのか 解りません。どこにあるのでしょうか? このソースをエディタに 貼ると見やすくなると思います。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W, H, S = 20; var snake = [ ], foods = [ ]; var keyCode = 0; var point = 0; var timer = NaN; var ctx; // pointオブジェクト function Point(x,y) { this.x = x; this.y = y; } //初期関数 function init() { var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; //蚊の初期化 snake.push(new Point(W / 2, H / 2)); //餌の初期化 for (var i = 0 ; i < 10 ; i++) { addFood(); } timer = setInterval("tick()", 200); window.onkeydown = keydown; } //餌の追加 function addFood() { while (true) { var x = Math.floor(Math.random() * W); var y = Math.floor(Math.random() * H); if (isHit(foods, x, y) || isHit(snake, x, y)) { continue; } foods.push(new Point(x, y)); break; } } //衝突判定 function isHit(data, x, y) { for (var i = 0 ; i < data.length ; i++) { if (data[i].x==x && data[i].y==Y) { return true; } } return false; } function moveFood(x, y) { foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood(); } function tick() { var x = snake[0].x; var y = snake[0].y; switch (keyCode) { case 37: x--; break; //左 case 38: y--; break; //上 case 39: x++; break; //右 case 40: y++; break; //下 default: paint(); return; } //自分or壁に衝突 if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H ) clearInterval(timer); paint(); return; } //頭を先頭に追加 snake.unshift(new Point(x,y)); if(isHit(foods, x, y)) { point +=10; //餌を食べた moveFood(x,y); }else{ snake.pop(); //食べていない→しっぽを解除 } paint(); } function paint() { ctx.clearRect(0,0,W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S, S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function (p) { ctx.fillText("+", p.x * S, (p.y + 1) * S);}); snake.forEach(function (p) { ctx.fillText("*", p.x * S, (p.y + 1) * S); }); } function keydown(event) { keyCode = event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

  • AS2 文字同士の連結について

    左から右へ移動するだけなのですが、関数定義すると文字連結がどうしても上手くいきません。 t1_mcをxが0yが0の位置、サイズは50*50で配置したのですが、 txtMove(1); function txtMove(aaa){ onEnterFrame=function(){ if("t"+aaa+"_mc._x"<700){ var ddd="t"+aaa+"_mc._x"; ddd+=5;} } } 上記で、どうしても動きません。 普通はaaaの横に+をつけてダブルコーテーションで囲むで あってると思うのですが、どのようにすればきちんと繋がりますでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • Flash

専門家に質問してみよう