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