问Three.JS在Javascript中的策略博弈
EN

Code Review用户

提问于 2014-07-14 20:55:21

回答 1查看 1.4K关注 0票数 7

我一直在尝试将一个简单的策略游戏移植到Javascript，想法是在浏览器中运行它进行测试。我过去做过一些简单的Javascript代码，但这是我的第一个模型/视图设置。我希望得到关于遵循Javascript最佳实践和避免陷阱的反馈。我知道我远远没有达到语言的全部功能，因为我不使用任何原型。我使用的是THREE.js和jQuery.js，THREE.js是主要的渲染引擎。

这里的代码只是创建了一个Tower，它包含带有位置的地板对象字典的Javascript版本。然后根据它们的位置在THREE.scene中呈现它们。我们的想法是计算点击它们，根据相机的位置向地板发出命令，然后点击位置，但我还没走那么远。在做得更深入之前，我想弄清楚我是否做得很好。这在一定程度上只是为了好玩，但我仍然想学习如何做正确的事情。

这是码页。只需将鼠标上下移动，然后单击查看视图和摄像机的坐标即可。

下面是HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <style>

        body {
        background-color: #C0C0C0;
        margin: 0px;
        overflow: hidden;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;
        text-align:center;
    }

    div{
        background: #C0C0C0;
    }
    </style>

    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <script src="js/jquery.min.js"></script>
    <script src="js/three.min.js"></script>
    <script src = "js/three2dtest.js"></script>
</body>

</html>

这是Javascript游戏：

var container;
var camera;
var scene;
var renderer;

var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

//this is the game model object
var worldSize = new WorldSize(windowHalfX, windowHalfY);
var tower = new Tower(worldSize);

init();
//not good to do animate here
//animate();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    //these settings have to be very specific for the scene to work
    camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000);
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 0;

    scene = new THREE.Scene();
    //fog seems to make no difference
    //scene.fog = new THREE.FogExp2(0x000000, 0.0025);
    console.log(scene);

    for (obj in tower.towerFloors) {
        //starting positions of the floors
        console.log(tower.towerFloors[obj].yposition);

        // Using wireframe materials to illustrate shape details.
        var darkMaterial = new THREE.MeshBasicMaterial({color: 0xffffcc});
        var wireframeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true, transparent: true}); 
        var multiMaterial = [darkMaterial, wireframeMaterial];

        // create a cube for each of the floors on the tower
        var floorShape = THREE.SceneUtils.createMultiMaterialObject( 
        new THREE.CubeGeometry(500, tower.towerFloors[obj].floorSize * 10, 2, 1, 1, 1), 
        multiMaterial);
        floorShape.position.set(0, tower.towerFloors[obj].yposition * 10, 0);
        scene.add(floorShape);
    }

    renderer = new THREE.WebGLRenderer({clearColor: 0xff0000, clearAlpha: 1});
    renderer.setClearColorHex(0xC0C0C0, 1);  //this is light grey
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);

    //should be better to start animate inside here rather than outside
    animate();
}

//position registering function
$('div').click(function(e) {
    alert(e.pageX+ ' , ' + e.pageY);
    alert (camera.position.x + ' , ' + camera.position.y);
});

function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
}
function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    //move only up and down
    //multiply by 0.15 to slow the overall scroll speed
    //camera.position.x += (mouseX - camera.position.x) * 0.15;  
    camera.position.y += (-mouseY - camera.position.y / 10) * 0.15;  

    //the camera wont move above the top floor so no bounds check needed
    if (camera.position.y < 0) {
        camera.position.y = 0;
    }

    renderer.render(scene, camera);
}

///////////////////////////////////////////////
/*           Tower Objects                   */
///////////////////////////////////////////////
function Tower (worldSize) {
    //create the dictionary of floors
    this.towerFloors = {};
    var floorNumber = 0;
    for (floorNumber = 0; floorNumber < 50; floorNumber++) { 
        var floor = new Floor(floorNumber, worldSize);
        this.towerFloors[floorNumber] = floor;
    }

    this.testLog = "tower created and logged";
    console.log(this.testLog);

    //test methods
    for (obj in this.towerFloors) {
        console.log(this.towerFloors[obj].floorNumber);
    }
    for (obj in this.towerFloors) {
        console.log(this.towerFloors[obj].yposition);
    }
}
function Floor (floorNumber, worldSize) {
    this.floorNumber = floorNumber;
    this.floorSize = worldSize.ysize / 50;
    this.yposition = this.floorSize * floorNumber;
}
function WorldSize (xsize, ysize) {
    this.xsize = xsize;
    this.ysize = ysize;
}

javascript

game

html

mvc

性能强劲，每月20元起的MySQL

功能完善，便宜稳定，没有业务可以自动停机，强效降本的MySQL

回答 1

Code Review用户

回答已采纳

发布于 2014-11-14 08:08:19

从一次又一次：

HTML看起来很干净，但是根据HTML规范，标题不应该是空白的。
您的对象看起来很好，旧的skool JS，这是很好的阅读
当您编写for (obj in this.towerFloors) {时，您正在污染全局命名空间，要么在函数的顶部声明obj (我最喜欢的方法)，要么使用for (var obj in this.towerFloors) {，但是只有在第一次使用obj时，JsHint才会抛出重复声明的警告。
没有太多的功能可供审查，我希望您能进一步了解这一点，并发布一个新的问题和更多的肉。