找回密码
当前位置：前端开发者 > HTML > 正文

H5Web前端开发 小游戏-彩色球作战

2018-05-30 分类：HTML 阅读(1012) 评论(0)

前端开发小游戏|前端小游戏开发|web前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>前端开发小游戏制作</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
#round{
width:40px;
height:40px;
background-color:#4bda4c;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
margin-top:-10px;
margin-left:-10px;
}
#tutorial{
background-image:url(“img/game.png”);
background-color:#222222;
}
#beiTU{
display:none;
}
#numDiv{
width:120px;
height:40px;
border:4pxsolid#c0c0c0;
box-shadow:004px4pxblack;
text-align:center;
line-height:40px;
background-color:black;
color:white;
position:absolute;
top:60px;
left:1258px;
display:none;
}
#num{
color:red;
}
#gameOver{
width:1349px;
height:700px;
position:absolute;
top:50px;
left:50px;
background-color:rgba(238,238,238,0.50);
text-align:center;
color:white;
display:none;
}
#gameOver>span{
font-size:50px;
display:block;
margin-top:150px;
}
#onlyNum{
color:red;
}
#historyNum{
color:red;
}
#gameOver_a{
width:400px;
height:150px;
border:4pxsolid#c0c0c0;
background-color:black;
margin-left:460px;
margin-top:50px;
}
#chongWan{
width:120px;
height:40px;
line-height:40px;
border:2pxsolid#c0c0c0;
border-radius:20px20px20px20px;
margin-left:610px;
margin-top:20px;
}
#chongWan:hover{
cursor:pointer;
}
#tuiChu:hover{
cursor:pointer;
}
#tuiChu{
width:120px;
height:40px;
line-height:40px;
border:2pxsolid#c0c0c0;
border-radius:20px20px20px20px;
margin-left:610px;
margin-top:20px;
}
#startGame{
width:1349px;
height:700px;
position:absolute;
top:50px;
left:50px;
background-color:rgba(238,238,238,0.50);
text-align:center;
color:white;
display:block;
}
#letsGo{
width:120px;
height:40px;
line-height:40px;
border:2pxsolid#c0c0c0;
border-radius:20px20px20px20px;
margin-left:610px;
margin-top:50px;
cursor:pointer;
}
input[type=”text”]{
margin-top:50px;
outline:none;
border-top:none;
border-left:none;
border-right:none;
border-bottom:1pxsolidwhite;
height:40px;
font-size:25px;
color:red;
background-color:transparent;
}
#gameName{
margin-top:200px;
font-size:50px;
}
#gameName_a{
color:#5dcbdb;
}
#em_a{
color:#4bda4c;
}
#em_b{
color:violet;
}
#em_c{
color:darkolivegreen;
}
#em_d{
color:coral;
}
#setName{
width:300px;
height:40px;
text-align:center;
font-size:25px;
color:red;
margin-top:60px;
position:absolute;
margin-left:60px;
display:none;
}
#gongxi{
width:1349px;
height:60px;
text-align:center;
line-height:60px;
font-size:35px;
margin-left:50px;
background-image:url(“img/gongxi.gif”);
display:none;
}
#gongxi>span:nth-child(1){
color:red;
}
#gongxi>span:nth-child(2){
color:yellow;
}
</style>
<script type=”text/javascript”>
functioneventwindowLoaded(){
canvasApp();
}
functioncanvasApp(){
vargameOver_a=document.getElementById(“gameOver”);
varonlyNum_a=document.getElementById(“onlyNum”);
varnumDiv=document.getElementById(“numDiv”);
numDiv.style.display =”block”;
varchongWan=document.getElementById(“chongWan”);
chongWan.onclick=function(){
eventwindowLoaded();
gameOver_a.style.display =”none”;
};
vartuiChu=document.getElementById(“tuiChu”);
tuiChu.onclick=function(){
if (confirm(“您确定要退出游戏吗？”)) {
window.opener = null;
window.open(”,’_self’);
window.close();
}else{}
};
varletsGo_a=document.getElementById(“letsGo”);
varstartGame_a=document.getElementById(“startGame”);
startGame_a.style.display =”none”;
vargetName_a=document.getElementById(“getName”).value;
// localStorage.setItem(“Name”,getName_a);
// var getName_a_a = localStorage.getItem(“Name”);
sessionStorage.setItem(“Name”,getName_a);
vargetName_a_a=sessionStorage.getItem(“Name”);
varsetName_a=document.getElementById(“setName_a”);
console.log(getName_a_a);
varsetName=document.getElementById(“setName”);
setName_a.innerText=getName_a_a;
setName.style.display =”block”;
varnum_a=document.getElementById(“num”);
varbeiTU=document.getElementById(“beiTU”);
vartheCanvas=document.getElementById(“tutorial”);
varroundObj=document.getElementById(“round”);
varctx=theCanvas.getContext(“2d”);
varnumBalls=20;
varnumBall=0;
varballs=newArray();
varbigBall=newArray();
varballPaiM=newArray();
varmaxSize=10;
varminSize=5;
varmaxSpeed=maxSize+6;
varyunits=0;
vartempBall;
vartempX;
vartempY;
vartempSpeed;
vartempAngle;
vartempRadius;
vartempRadians;
vartempXunits;
vartempYunits;
vartempColor;
varobjQiuColor;
//小球每隔一段时间换色
vararrColor= [“red”,”orange”,”#5dcbdb”,”green”,”#4bda4c”,”#48e8ba”,”purple”];
vararrBigColor= [“orange”,”red”,”#5dcbdb”,”green”,”#4bda4c”,”#48e8ba”,”purple”];
varzJ=0;
setInterval(function(){
zJ++;
if (zJ%8==0) {
numBall=numBalls;
numBalls+=5;
createBalls();
}
},1000);
// 创建随机大小的小球与随机速度的小球
functioncreateBalls(){
for (vari=numBall;i<numBalls;i++) {
tempRadius=Math.floor(Math.random() *maxSize+minSize);
tempX=tempRadius*2+ (Math.floor(Math.random() *theCanvas.width) -tempRadius*2);
tempY=tempRadius*2+ (Math.floor(Math.random() *theCanvas.height) -tempRadius*2);
tempSpeed=maxSpeed-tempRadius;
tempAngle=Math.floor(Math.random() *360);
tempRadians=tempAngle*Math.PI/180;
tempXunits=Math.cos(tempRadians) *tempSpeed;
tempYunits=Math.sin(tempRadians) *tempSpeed;
tempColor=Math.round(Math.random() *7);
tempBall={
x: tempX,
y: tempY,
radius: tempRadius,
speed: tempSpeed,
angle: tempAngle,
xunits: tempXunits,
yunits: tempYunits,
tempId: i,
color: tempColor
};
balls.push(tempBall);
}
}
createBalls();
// //删除表
// function dropData(){
// dataBase.transaction(function(db){
// db.executeSql(“DROP TABLE t_paiH”)
// })
// }
varbig_x=500;
varbig_y=200;
varr=20;
varnum_num=0;
varl=0;
varplayerColor;
setInterval(function(){
l++;
if (l>=7) {
l=0;
}
},10000);
theCanvas.onmousemove=function(){
big_x= event.clientX-35;
big_y= event.clientY-50;
};
varbig;
functioncreateBigball(){
playerColor=ctx.fillStyle=arrBigColor[l];
ctx.beginPath();
ctx.arc(big_x,big_y,r,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();
ctx.closePath();
bigBall.push(big);
}
// 排行榜webSql
// 第一步创建数据库对象
vardataBase=openDatabase(“ranking”,””,””,1024*1024*50);
// var a=0;
// 第二步连接数据库
// AUTO_INCREMENT
dataBase.transaction(function(db){
db.executeSql(“create table if not exists u_paiH(t_name VARCHAR(50),t_num int)”)
});
functionpHang(){
// 插入数据
console.log(typeofsetName.innerText);
console.log(typeofparseInt(num_a.innerText));
dataBase.transaction(function(db){
// a++;
db.executeSql(“INSERT INTO u_paiH(t_name,t_num) VALUES(?,?)”, [setName.innerText,parseInt(
num_a.innerText)],function(trans,rs){
console.log(“正确信息”+rs);
},function(trans,err){
console.log(“错误信息；”+err);
})
});
}
functionpHang_a(){
console.log(“111”);
dataBase.transaction(function(db){
console.log(“222”);
db.executeSql(“SELECT t_name,MAX(t_num) FROM u_paiH GROUP BY t_name ORDER BY t_num DESC”, [],
function(trans,rs){
console.log(“333”);
console.log(rs.rows);
for (varp=0;p<rs.rows.length;p++) {
if (setName.innerText==rs.rows.item(p).t_name) {
console.log(p);
varhistoryNum=document.getElementById(“historyNum”);
historyNum.innerText=””;
historyNum.innerText=p+1;
}
}
});
})
}
//画小球
functiondrawScreen(){
ctx.clearRect(0,0,1349,700);
varball;
for (vari=0;i<balls.length;i++) {
ball=balls[i];
ball.x +=ball.xunits;
ball.y +=ball.yunits;
ctx.beginPath();
objQiuColor=ctx.fillStyle=arrColor[ball.color];
ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//碰撞画布
if (ball.x >theCanvas.width ||ball.x <0) {
ball.angle=180-ball.angle;
updateBall(ball);
}elseif (ball.y >theCanvas.height ||ball.y <0) {
ball.angle=360-ball.angle;
updateBall(ball);
}
//球球碰撞
varball_x=parseInt(big_x) -parseInt(ball.x),
ball_y=parseInt(big_y) -parseInt(ball.y),
dist=Math.sqrt(ball_x*ball_x+ball_y*ball_y);
if (objQiuColor==playerColor) {
if (dist<ball.radius+r) {
r+=balls[i].radius/10;
balls.splice(i,1);
i–;
num_num++;
num_a.innerText=””;
num_a.innerText=num_num;
dataBase.transaction(function(db){
db.executeSql(
“select t_num from u_paiH where t_name=? order by t_num desc limit 1”, [
getName_a_a
],
function(trans,rs){
console.log(“bbbbbbb”+typeofrs.rows.item(0).t_num);
if (parseInt(rs.rows.item(0).t_num) <parseInt(num_num) &&parseInt(
num_num) <=parseInt(rs.rows.item(0).t_num) +1) {
vargongxi_a=document.getElementById(“gongxi”);
varhl=0;
setInterval(function(){
hl++;
gongxi_a.style.display =”block”;
if (hl>=40) {
gongxi_a.style.display =”none”;
}
},100);
}
})
})
}
}
if (objQiuColor!=playerColor) {
if (dist<ball.radius+r) {
// console.log(“1”);
clearTimeout(outObj);
bigBall= [];
gameOver_a.style.display =”block”;
onlyNum_a.innerText=””;
onlyNum_a.innerText=num_num;
pHang();
pHang_a();
}
}
}
}
//初始化三角函数反弹小球移动
functionupdateBall(ball){
ball.radians=ball.angle*Math.PI/180;
ball.xunits=Math.cos(ball.radians) *ball.speed;
ball.yunits=Math.sin(ball.radians) *ball.speed;
}
//调用画球并移动
functiongameLoop(){
outObj=setTimeout(gameLoop,50);
drawScreen();
createBigball();
}
gameLoop();
}
// 删除表
</script>
</head>
<body>
<divstyle=”position: absolute;top: 50px;left: 50px;”>
<canvasid=”tutorial” width=”1349px” height=”700px”>your browser dont support canvas！</canvas>
</div>
<divid=”numDiv”>
<span>分数为:</span>
<spanid=”num”>0</span>
</div>
<divid=”gameOver”>
<span>游戏结束</span>
<divid=”gameOver_a”>
<imgsrc=”img/jiangbei.png” height=”80px”>
<h2>你的分数为：
<spanid=”onlyNum”>0</span>
</h2>
<h2>你的历史最高排名是：
<span>第</span>
<spanid=”historyNum”>0</span>
<span>名</span>
</h2>
</div>
<divid=”chongWan”>
<h2>重 玩</h2>
</div>
<divid=”tuiChu”>
<h2>退 出</h2>
</div>
</div>
<divid=”startGame”>
<divid=”gameName”>
<span>
<emid=”em_a”>欢</em>
<emid=”em_b”>迎</em>
<emid=”em_c”>来</em>
<emid=”em_d”>到</em>
</span>
<span>《
<spanid=”gameName_a”>球球大作战</span>》</span>
</div>
<inputtype=”text” id=”getName” placeholder=”请输入你的游戏名”>
<divid=”letsGo” onclick=”eventwindowLoaded()”>
<h2>开 始</h2>
</div>
</div>
<divid=”setName”>
<spanid=”setName_a”></span>
</div>
<divid=”gongxi”>
<span>恭喜您！</span>
<span>刷新您的个人记录！</span>
</div>
<!–<div style=”width: 100px;height:35px;border: 1px solid red” onclick=”dropData()”>–>
<!–删除表–>
<!–</div>–>
<!–<img src=”img/stars.jpg” id=”beiTU”>–>
</body>
</html>
小游戏前端开发|web前端小游戏开发|网站前端开发
赞(0)
前端开发者 » H5Web前端开发 小游戏-彩色球作战
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论