GAMEHW2-1

with orbitControls, XZgrid, info

by Alvin Chen

HTML

<div id="info">HW2

</div>
<p id="cameraX">
  <p>
<p id="countPoint">
  <p>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
    <script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
    <audio id="soundtrack" autoplay loop style="display:none">
      <source src="https://raw.githubusercontent.com/AlvinChen730/hw-pages/gh-pages/music/Holloween%20Music.mp3" type='audio/mp3'>
    </audio>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

#cameraX {
  position: absolute;
  bottom: -220px;
  padding: 240px;
  width: 100%;
  color: #ffff00
}
#countPoint {
  position: absolute;
  bottom: 120px;
  padding: 240px;
  width: 100%;
  color: #ffff00
}

JavaScript

var camera, scene, renderer;
var satellite, angle = 0;
var mousePoint;
var mouse = new THREE.Vector2();
//var stats;
var pos, vel, force;
var clock = new THREE.Clock();
var ball;
var planeP = new THREE.Vector3(10, 0, 0);
var planeN = new THREE.Vector3(0, 1, 0);
var keyboard = new KeyboardState();
var jump1 = false;
var jump2 = false;
var move = false;
var ballR = 4;
var stArray = [];
var baseS = 0;
var counter = 0;
var soundTrack;
var soundVal = 1.0,
  sign = 1.0;
var coin1 = [];
var floor = [];
var countPoint = 0;
var preX =[] , preY =[] , backX =[] , upRc =[] , upLc =[];
init();
animate();

function setUpStArray() {
  for (var i = 0; i < 2; i++) {
    var row = [];
    for (var j = 0; j < 10; j++)
      row.push(new THREE.Vector2(j * 0.1, 1 - 1 * i));
    stArray.push(row);
  }
}

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  soundTrack = document.getElementById('soundtrack');
  pos = new THREE.Vector3(-20, 40, 0);
  vel = new THREE.Vector3(5, 0, 0);

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-50, 50, 80, -15, -10, 100);
  camera.position.z = 0;
  scene.add(camera);

  THREE.ImageUtils.crossOrigin = '';
  var texture = THREE.ImageUtils.loadTexture('https://i.imgur.com/yFizws8.jpg');
  for (var i = 0; i < 6; i++) {
    var background = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshBasicMaterial({
      map: texture
    }));
    background.position.y = 28.7;
    background.position.x = i * 100;
    scene.add(background);
  }
  
  for (var i = 1; i < 6 ; i++) {
    preY[i] = new THREE.Mesh(new THREE.SphereGeometry(1, 32), new THREE.MeshBasicMaterial({
      color: 0x00ccbb
    }));
    preY[i].position.y = 12;
    preY[i].position.x = i * 100;
    scene.add(preY[i]);
  }
  for (var i = 1; i < 6 ; i++) {
    preX[i] = new THREE.Mesh(new...