3D shooting compatible with smartphones Shooting with 3D graphics, line-drawn by JavaScript's game

Click here for free DL of the app version that can save data.

No:3815

1022

←

Prev Next

→

3D shooting compatible with smartphones Shooting w..ALL
Developer User3740｜Date and time 23/6/26 17:49:40
Build time 34.922 sec｜Game capacity 3.828KB｜

Script

ゲームを作成しました。プレイヤーはスマホで傾けて移動し、タップで弾を発射します。敵キャラクターを全て倒すことが目的です。絵文字は使用しませんでしたが、JavaScriptを用いて3Dグラフィックを線画し、簡単なシューティングゲームを実装しました。以下がコードになります。

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<html> 
<head> 
  <script> 
    var scene, camera, renderer, geometry, material, mesh, enemyArray=[], bulletArray=[], score=0; 
    
    // 初期化用関数
    function init() { 
      scene = new THREE.Scene(); 
      
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
      camera.position.z = 5; 
      
      var light = new THREE.PointLight( 0xffffff, 1, 100 ); 
      light.position.set( 0, 0, 5 ); 
      scene.add( light ); 
      
      geometry = new THREE.BoxGeometry(); 
      material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); 
      mesh = new THREE.Mesh( geometry, material ); 
      scene.add( mesh ); 
      
      // 敵キャラクターを生成
      for(var i=0;i<5;i++) { 
        createEnemy(); 
      } 
      
      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize( window.innerWidth, window.innerHeight ); 
      document.body.appendChild( renderer.domElement ); 
      renderer.domElement.addEventListener("click",shoot); 
    } 
    
    // 毎フレーム行う処理
    function animate() { 
      requestAnimationFrame( animate ); 
      update(); 
      renderer.render( scene, camera ); 
    } 
    
    // アップデート処理
    function update() { 
      // プレイヤーを傾ける
      mesh.rotation.x += 0.1; 
      mesh.rotation.y += 0.1; 
      
      // 弾を移動させる
      for(var i=0;i<bulletArray.length;i++) { 
        bulletArray[i].position.z -= 0.1; 
        if(bulletArray[i].position.z < -5) { 
          scene.remove(bulletArray[i]); 
          bulletArray.splice(i,1); 
          i--; 
        } 
      } 
      
      // 敵キャラクターを移動させる
      for(var i=0;i<enemyArray.length;i++) { 
        enemyArray[i].position.z += 0.05; 
        if(enemyArray[i].position.z > 5) { 
          scene.remove(enemyArray[i]); 
          enemyArray.splice(i,1); 
          i--; 
        } else { 
          // 当たり判定
          if(mesh.position.distanceTo(enemyArray[i].position)<1) { 
            scene.remove(enemyArray[i]); 
            enemyArray.splice(i,1); 
            i--; 
            score++; 
            document.getElementById("score").innerHTML = "Score: "+score; 
          } 
        } 
      } 
    } 
    
    // 弾を発射する処理
    function shoot(event) { 
      var bulletGeometry = new THREE.SphereGeometry( 0.1, 32, 32 ); 
      var bulletMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} ); 
      var bulletMesh = new THREE.Mesh( bulletGeometry, bulletMaterial ); 
      bulletMesh.position.x = mesh.position.x; 
      bulletMesh.position.y = mesh.position.y; 
      bulletMesh.position.z = mesh.position.z; 
      bulletArray.push(bulletMesh); 
      scene.add(bulletMesh); 
    } 
    
    // 敵キャラクターを生成する処理
    function createEnemy() { 
      var enemyGeometry = new THREE.BoxGeometry(); 
      var enemyMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); 
      var enemyMesh = new THREE.Mesh( enemyGeometry, enemyMaterial ); 
      enemyMesh.position.x = Math.random()*10-5; 
      enemyMesh.position.y = Math.random()*10-5; 
      enemyMesh.position.z = -5; 
      enemyArray.push(enemyMesh); 
      scene.add(enemyMesh); 
    } 
    
    // 初期化とアニメーションの開始
    init(); 
    animate(); 
  </script> 
</head>

<body> 
  <p id="score">Score: 0</p> 
</body> 
</html>