基于three.js实现的点击盒子消除游戏

最新推荐文章于 2024-06-07 15:45:53 发布

杜柠函

最新推荐文章于 2024-06-07 15:45:53 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： javascript 游戏 three.js

本文链接：https://blog.csdn.net/gudada010/article/details/130900023

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.项目背景

大学时期参加了机器人协会，并有幸成为了视觉组组长，所以在新一届社团招新上做了一款趣味小游戏来吸引新生的眼球，让大家知道协会的视觉组。

二.代码展示

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    background-color: black;
    color:white;
    font-family: helvetica;
}
canvas {
    position: absolute;
}
.hud {
    position: absolute;
    margin-left: 1em;
}
.hit {
    font-weight: bold;
    color: red;
}
</style>
</head>
<body>
<script type="text/javascript" src="//wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script><div class="hud">
	<h1 align="center">机器人协会百团大战招新小游戏——眼花缭乱（视觉组制作）</h1>
    <h1 id="level"></h1>
    <p>点击方块，使它消失！！！</p>
    <p id="score"></p>
    <p>
        计时器：<span id="sp1"> 71</span>秒
    </p>
</div>

<div id="webgl-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script>
var scene;
var cube;
var camera;
var renderer;
var clock;
var holder;
var intersects;
var particles = [];
var level = 1;
var totalLevels = 4;
var score = 0;
var totalTargets = 3;
var speed = 0.01;
var complete = false;
var comments = ["简单", "一般", "困难", "超困难"];
var myLevel = document.getElementById("level");
var myScore = document.getElementById("score");
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function myScene() {
    scene = new THREE.Scene();
    var light = new THREE.AmbientLight(0xffffff);
    var width = window.innerWidth;
    var height = window.innerHeight;
    camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 18;
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setSize(width, height);
    document.getElementById("webgl-container").appendChild(renderer.domElement);
    clock = new THREE.Clock();
    var sLight = new THREE.SpotLight(0xffffff);
    sLight.position.set(-100, 100, 100);
    scene.add(sLight);
    var aLight = new THREE.AmbientLight(0xffffff);
    scene.add(aLight);
}
function spinner() {
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshPhongMaterial({
        color: "hotpink",
        ambient: "hotpink"
    });
    var cube = new THREE.Mesh(geometry, material);
    cube.position.x = 10;
    var spinner = new THREE.Object3D();
    spinner.rotation.x = 6;
    spinner.add(cube);
    scene.add(spinner);
}
function addHolder() {
    holder = new THREE.Object3D();
    holder.name = "holder"
    for (var i = 0; i < totalTargets; i++) {
        var ranCol = new THREE.Color();
        ranCol.setRGB(Math.random(), Math.random(), Math.random());
        var geometry = new THREE.BoxGeometry(2, 2, 2);
        var material = new THREE.MeshPhongMaterial({
            color: ranCol,
            ambient: ranCol
        });
        var cube = new THREE.Mesh(geometry, material);
        cube.position.x = i * 5;
        cube.name = "cubeName" + i;
        var spinner = new THREE.Object3D();
        spinner.rotation.x = i * 2.5 * Math.PI;
        spinner.name = "spinnerName" + i;
        spinner.add(cube);
        holder.add(spinner);
    };
    scene.add(holder);
}
function addExplosion(point) {
    var timeNow = clock.getElapsedTime();
    for (var i = 0; i < 4; i++) {
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({
            color: 0x999999
        });
        var part = new THREE.Mesh(geometry, material);
        part.position.x = point.x;
        part.position.y = point.y;
        part.position.z = point.z;
        part.name = "part" + i;
        part.birthDay = timeNow;
        scene.add(part);
        particles.push(part);
    };
}
function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
    holder.children.forEach(function(elem, index, array) {
        elem.rotation.y += (speed * (6 - index));
        elem.children[0].rotation.x += 0.01;
        elem.children[0].rotation.y += 0.01;
    });
    if (particles.length > 0) {
        particles.forEach(function(elem, index, array) {
            switch (elem.name) {
                case "part0":
                    elem.position.x += 1;
                    break;
                case "part1":
                    elem.position.x -= 1;
                    break;
                case "part2":
                    elem.position.y += 1;
                    break;
                case "part3":
                    elem.position.y -= 1;
                    break;
                default:
                    break;
            }
            if (elem.birthDay - clock.getElapsedTime() < -1) {
                scene.remove(elem);
                particles.splice(index, 1);
            }
        })
    };
    renderer.render(scene, camera);
}
function onDocumentMouseDown(event) {
    event.preventDefault();
    if (complete) {
        complete = false;
        score = 0;
        restartScene();
        return;
    }
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    if (score < totalTargets) {
        holder.children.forEach(function(elem, index, array) {
            intersects = raycaster.intersectObjects(elem.children);
            if (intersects.length > 0 && intersects[0].object.visible) {
                intersects[0].object.visible = false;
                addExplosion(intersects[0].point);
                score += 1;
                if (score < totalTargets) {
                    myScore.innerHTML = "<span class='hit'>考验手速的时候到了！！！</span> Score: " + score + "/" + totalTargets;
                } else {
                    complete = true;
                    if (level < totalLevels) {
                        myScore.innerHTML = "<strong>你消灭了全部</strong> 点击屏幕进入下一等级 " + (level + 1) + ".";
                    } else {
                        myScore.innerHTML = "<strong>你胜利啦，快去找社团负责人领取奖品吧！</strong> ";
                        alert("你胜利啦，快去找社团负责人领取奖品吧！请点击刷新以重新开始游戏。");
                    }
                };
            }
        });
    }
}
function restartScene() {
    myScore.innerHTML = "";
    if (level < totalLevels) {
        speed += 0.005;
        totalTargets += 1;
        level += 1;
    } else {
        speed = 0.01;
        totalTargets = 3;
        level = 1;
    }
    myLevel.innerText = comments[level - 1] + ": Level " + level + " of " + totalLevels;
    scene.remove(holder);
    addHolder();
}
document.getElementById("webgl-container").addEventListener('mousedown', onDocumentMouseDown, false);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}
window.onload = function() {
    myLevel.innerText = comments[level - 1] + ": Level " + level + " of " + totalLevels;
    myScene();
    addHolder();
    animate();
    window.addEventListener('resize', onWindowResize, false);
};
    var sp1 =document.getElementById("sp1").innerHTML;
    var time = setInterval(function () {
    	if(level===1&&sp1==71){
    		alert("请仔细观看左边的规则哦！！！熟悉规则后按确定开始游戏！！！")
    	}
    	if(sp1===0&&level!=1){
    		sp1=1;
    	}
    	sp1 = sp1-1;
        document.getElementById("sp1").innerHTML =sp1;
        if (sp1 ===0){
            alert("你失败了！");
        }
        if(sp1===0){
        	if(level ===1){
        		sp1=71;
        	}
        }
    },1000)
</script>
</body>
</html>