three.js打砖块小游戏

brick game with three.js

webgl, three, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1655
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var btnControl = document.getElementById('btn-control');
var scene, camera, renderer;
var brickGroup = new THREE.Group();
var ball, paddle;

var direction = new THREE.Vector3();
direction.x = Math.random() - 0.5;
direction.y = 0.5;
direction.normalize();
var speed = new THREE.Vector3();
var raycaster = new THREE.Raycaster();

var score = 0;
var enumState = {
    ready: 1,
    playing: 2,
    pause: 3,
    gameover: 4
};
var gameState = 1;

var stats;

init();
update();

function init() {
    // 场景
    scene = new THREE.Scene();
    scene.add(brickGroup);

// 相机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 50000);
    camera.position.set(0, 0, 50);
    camera.lookAt(0, 0, 0);

// 渲染器
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000);
    document.body.appendChild(renderer.domElement);

// 灯光
    scene.add(new THREE.AmbientLight(0x444444));
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 20, 20);
    scene.add(light);

initModel();

stats = new Stats();
    document.body.appendChild(stats.dom);

controls = new THREE.OrbitControls(camera, renderer.domElement);

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

bindEvent();
}

function update() {
    renderer.render(scene, camera);
    stats.update();

if (ball.position.y < -16) {
        gameState = 4;
        btnControl.innerText = '重新开始';
        alert('游戏结束');
    }

if (gameState == enumState.playing) {
        playgame();
    }

if (gameState != enumState.gameover) {
        requestAnimationFrame(update);
    }
}

function onMouseMove(event) {
    if (gameState == 2) {
        var posx = (event.clientX / window.innerWidth) * 30 - 15;
        paddle.position.x = THREE.Math.clamp(posx, -13, 13);
    }
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function initModel() {
    // 创建面板 30*40
    var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(30, 40, 1, 1), new THREE.MeshPhongMaterial({
        color: 0x014fff
    }));
    plane.position.z = -0.5;
    scene.add(plane);

// 创建砖块
    var geo = new THREE.BoxBufferGeometry(2, 1, 1);
    var brick = new THREE.Mesh(geo);

for (var i = 0; i < 8; i++) {
        var material = new THREE.MeshPhongMaterial({
            color: Math.random() * 0xffffff
        });
        for (var j = 0; j < 12; j++) {

var object = brick.clone();
            object.position.x = j * 2.2 - 12;
            object.position.y = i * 1.4 + 6;
            object.material = material;
            brickGroup.add(object);
        }
    }

// 创建球
    ball = new THREE.Mesh(new THREE.SphereBufferGeometry(0.5, 32, 16), new THREE.MeshPhongMaterial({
        color: 0xffffff
    }));
    ball.position.y = -10;
    scene.add(ball);

// 创建球拍
    paddle = new THREE.Mesh(new THREE.BoxBufferGeometry(4, 1, 1), new THREE.MeshBasicMaterial({
        color: 0x00F900
    }));
    paddle.position.y = -16;
    brickGroup.add(paddle);
}

function playgame() {
    if (ball.position.x < -15 || ball.position.x > 15) direction.x = -direction.x;
    if (ball.position.y < -20 || ball.position.y > 20) direction.y = -direction.y;

ball.position.x = Math.max(-15, Math.min(15, ball.position.x));
    ball.position.y = Math.max(-20, Math.min(20, ball.position.y));

raycaster.set(ball.position, direction);
    var intersections = raycaster.intersectObjects(brickGroup.children);
    if (intersections.length > 0) {
        var intersection = intersections[0];
        if (intersection.distance < 0.5) {
            if (intersection.object !== paddle) {
                brickGroup.remove(intersection.object);
                score++;
                if (brickGroup.length == 1) {
                    gameState = 4;
                    alert('胜利');
                }
            }
            direction.reflect(intersection.face.normal);
        }
    }

ball.position.add(speed.copy(direction).multiplyScalar(0.5));
}

function reloadGame() {
    brickGroup.children.forEach(function(obj) {
        obj.geometry.dispose();
        obj.material.dispose();
    });
    brickGroup.children = [];

ball.geometry.dispose();
    ball.material.dispose();
    scene.remove(ball);

direction.x = Math.random() - 0.5;
    direction.y = 0.5;
    direction.normalize();
    speed.set(0, 0, 0);

initModel();
    update();
}

编译

CSS

HTML

brick game with three.js

webgl, three, game

编辑器支持Emmet

快捷键

brick game with three.js

webgl, three, game

three.js制作一个简单而完整的数字计算射击小游戏

使用h5和matter.js实现的简化版台球小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：