吃豆豆小游戏

Html

Css


    
    








    点击黑块开始

body {
	overflow:hidden;
height:500px;
}
#player {
	position:absolute;
	background:black;
	width:100px;
	height:100px;
	z-index:900;
}
#gift {
	position:absolute;
	background:green;
	width:20px;
	height:20px;
}
.enemy {
	position:absolute;
	background:red;
	width:30px;
	height:30px;
}
#container {
	position:absolute;
	width:95%;
	height:95%;
}
#score {
	position:absolute;
	z-index:-1;
	width:100%;
	height:600px;
	line-height:600px;
	text-align:center;
	font-size:200px;
	color:lightgray;
	-webkit-user-select:none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-ms-user-select:none;
}
#time {
	position:absolute;
	z-index:-1;
	width:100%;
	height:600px;
	top:60%;
	left:50px;
	z-index:9999;
	font-size:30px;
}
#btn {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-100px;
	border:hidden;
	color:white;
	background:gray;
	width:300px;
	height:200px;
	font-size:40px;
}
p {
	font-size:40px;
}

var score = 0; //分数
var isSpawn = false; //是否生成了敌人
var isHit = false; //是否碰撞敌人
var time = 30; //游戏时间
var isFirst = true;
//物体移动
var player = document.getElementById("player");

//触屏点击
function touchStart(event) {
    alert("!!!");
    event.preventDefault();
    if (player || !event.touches.length) return;
    var touch = event.touches[0];
    startX = touch.pageX;
    startY = touch.pageY;
    if (player.style.left < startX < player.style.left + player.style.width && player.style.top < startY < player.style.top + player.style.height) {
        //表示点击到黑块
        alert("!!!");
    }
}

function touchMove(event) {
    event.preventDefault();
    if (!player || !event.touches.length) return;
    var touch = event.touches[0];
    var x = touch.pageX - startX;
    var y = touch.pageY - startY;
    player.style.top = y + "px";
    player.style.left = x + "px";
    hitgift();
    if (!isSpawn) {
        SpawnEnemy();
    }
    hitenemy();
}

player.onclick = function(ev) {
    if (isFirst) {
        desctime();
        isFirst = false;
        var p = document.getElementById("p");
        p.remove();
        player.style.display = "inline";
    }

var e = ev || window.event;
    var distanceX = e.clientX - player.offsetLeft;
    var distanceY = e.clientY - player.offsetTop;
    document.onmousemove = function(ev) {
        var e = ev || window.event;
        var left = e.clientX - distanceX;
        var top = e.clientY - distanceY;
        player.style.top = top + "px";
        player.style.left = left + "px";
        //碰撞gift
        hitgift();
        if (!isSpawn) {
            SpawnEnemy();
        }
        hitenemy();

}

//碰撞gift函数
function hitgift() {
    var gift = document.getElementById("gift");
    var player = document.getElementById("player");

var t1 = gift.offsetTop;
    var l1 = gift.offsetLeft;
    var r1 = gift.offsetLeft + gift.offsetWidth;
    var b1 = gift.offsetTop + gift.offsetHeight;

var t2 = player.offsetTop;
    var l2 = player.offsetLeft;
    var r2 = player.offsetLeft + player.offsetWidth;
    var b2 = player.offsetTop + player.offsetHeight;
    if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) { // 表示没碰上

} else {
        score++;
        //会慢慢长大
        player.style.width = player.offsetWidth + 3 + "px";
        player.style.height = player.offsetHeight + 3 + "px";
        isSpawn = false;
        var scoreplace = document.getElementById("score");
        scoreplace.innerHTML = "Score:" + score;
        var top = Math.round(Math.random() * 100);
        var left = Math.round(Math.random() * 100);
        gift.style.top = top + "%";
        gift.style.left = left + "%";

}

}
//碰撞敌人函数
function hitenemy() {
    var enemys = document.getElementsByClassName("enemy");
    var player = document.getElementById("player");
    if (enemys.length > 0) {
        for (var e = 0; e < enemys.length; e++) {
            var t1 = enemys[e].offsetTop;
            var l1 = enemys[e].offsetLeft;
            var r1 = enemys[e].offsetLeft + gift.offsetWidth;
            var b1 = enemys[e].offsetTop + gift.offsetHeight;
            //console.log(enemys.length);
            var t2 = player.offsetTop;
            var l2 = player.offsetLeft;
            var r2 = player.offsetLeft + player.offsetWidth;
            var b2 = player.offsetTop + player.offsetHeight;
            if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) { // 表示没碰上

} else {
                score -= 3;
                if (score < 0) {
                    document.onmousemove = null;
                    document.onmousedown = null;
                    gameover();
                    break;
                }
                var scoreplace = document.getElementById("score");
                scoreplace.innerHTML = "Score:" + score;
                enemys[e].remove();
                //碰撞到敌人，则生成两个
                Spawn();
                Spawn();
                player.style.width = player.offsetWidth + 5 + "px";
                player.style.height = player.offsetHeight + 5 + "px";
            }
        }
    }

}
//敌人生成函数
function SpawnEnemy() {
    //每五分生成一个敌人
    if (score % 4 == 0 && score > 0) {
        Spawn();
    }
    isSpawn = true;
}

function Spawn() {
    var container = document.getElementById("container");
    var enemy = document.createElement("div");
    enemy.className = "enemy";
    var top = Math.round(Math.random() * 100);
    var left = Math.round(Math.random() * 100);
    enemy.style.top = top + "%";
    enemy.style.left = left + "%";
    container.appendChild(enemy);
}
//gift随机位置
window.onload = function() {

var top = Math.round(Math.random() * 100);
    var left = Math.round(Math.random() * 100);
    var gift = document.getElementById("gift");
    gift.style.top = top + "%";
    gift.style.left = left + "%";
    //游戏时间为30S
}

//			function start() {
//				var btn = document.getElementById("btn")
//				btn.remove();
//				var player = document.getElementById("player");
//				player.style.display = "inline";
//				desctime();
//
//			}
//倒计时
function desctime() {
    time -= 1;
    setTimeout("desctime()", 1000);
    var T = document.getElementById("time");
    T.innerHTML = "剩余时间：" + time;
    if (time == 0) {
        document.onmousemove = null;
        document.onmousedown = null;
        gameover();
    }
}

function gameover() {
    alert("GameOver!");
    alert("你的分数:" + score);
    location.reload();
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

吃豆豆小游戏



代码描述：使用Javript编写的碰撞游戏代码

记得吃绿色的豆豆，尽量不要碰到红色的。
吃到绿色的加一分，碰到红色的扣三分，并且还会随机生成两个红色的豆豆。
代码可能不够完善，希望大家能够多多指教啦~

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

LLLLLLLLLLLEMON

相关代码

吃豆豆小游戏

最新