HtmlCssJs

点击黑块开始

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